Standard Card 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/standard-card.css?cb=">

<div class="card">

    <div class="card__image-wrapper">
        <a href="#">
            <div class="card__image lazy-load-image" data-module="imageLazyLoad">
                <picture>
                    <source media="(max-width: 840px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                    <source media="(min-width: 841px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                    <img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="">
                </picture>
            </div>
        </a>
    </div>
    <div class="card__details">
        <a href="#">
            <h2 class="card__title">Lorem Ipsum</h2>

            <p class="card__subline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>
        </a>
        <a href="#" data-module="cta" class="cta card__cta">
            Click here
        </a>
    </div>

</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/standard-card.css?cb={{cacheBuster}}">
{{/if}}

<div class="card">

    <div class="card__image-wrapper">
        {{#if image}}
        {{#if cta}}
        <a href="{{cta.url}}" {{#if download}}download{{/if}}>
            {{/if}}
            <div class="card__image lazy-load-image" data-module="imageLazyLoad">
                {{> @picture image }}
            </div>
            {{#if cta}}
        </a>
        {{/if}}
        {{/if}}
    </div>
    <div class="card__details">
        {{#if cta}}
        <a href="{{cta.url}}" {{#if download}}download{{/if}}>
            {{/if}}
            {{#if eyebrow}}
            <span class="card__eyebrow">{{eyebrow}}</span>
            {{/if}}
            <h2 class="card__title">{{title}}</h2>

            {{#if subline}}
            <p class="card__subline">{{subline}}</p>
            {{/if}}
            {{#if cta}}
        </a>
        {{/if}}
        {{#if cta}}
        {{> @link text=cta.text url=cta.url cssClasses="card__cta" download=download}}
        {{/if}}
    </div>

</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "image": {
    "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
    "fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
    "sources": [
      {
        "type": "image/jpeg",
        "desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
      }
    ]
  },
  "title": "Lorem Ipsum",
  "subline": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.",
  "cta": {
    "url": "#",
    "text": "Click here"
  }
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.card {
    display: flex;
    flex-direction: column;
    height: 100%;

    a {
        text-decoration: none;
    }

    &__image {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: block;
        margin-bottom: rem(40);
        padding-bottom: 56%;
        width: 100%;
    }

    &__eyebrow {
        display: block;
        margin-bottom: rem(14);
    }

    &__title {
        @extend %heading03;
        margin: 0 rem(40) rem(10);
    }

    &__subline {
        @extend %p--body;
        margin: 0 rem(40) rem(10);
    }

    &__cta {
        @extend %secondary-cta;
        margin: auto auto 0 rem(40);
    }
}
  • URL: /components/raw/standard-card/standard-card.scss
  • Filesystem Path: source/patterns/03-components/cards/standard-card/standard-card.scss
  • Size: 779 Bytes

No notes defined.