Blog Card 

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

<div class="blog-card" data-module="card">
    <div class="blog-card__image-wrapper">
        <a href="#">
            <div class="blog-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="blog-card__info">
        <a href="#">
            <p class="blog-card__category">
                Category
            </p>
            <p class="blog-card__date">
                20/02/2019
            </p>
            <p class="blog-card__title">
                Lorem Ipsum
            </p>
        </a>
    </div>

    <a href="#" data-module="cta" class="cta blog-card__cta">
        Click here
    </a>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet"
  href="/assets/themes/{{theme}}/css/blog-default-card.css?cb={{cacheBuster}}">
{{/if}}

<div class="blog-card" data-module="card">
  <div class="blog-card__image-wrapper">
    {{#if cta}}
    <a href="{{cta.url}}">
      {{/if}}
      <div class="blog-card__image lazy-load-image" data-module="imageLazyLoad">
        {{> @picture image }}
      </div>
      {{#if cta}}
    </a>
    {{/if}}
  </div>

  <div class="blog-card__info">
    {{#if cta}}
    <a href="{{cta.url}}">
      {{/if}}
      {{#if categories}}
      <p class="blog-card__category">
        {{#each categories}}{{this}}{{#unless @last}} ,{{/unless}}{{/each}}
      </p>
      {{/if}}
      <p class="blog-card__date">
        {{date}}
      </p>
      <p class="blog-card__title">
        {{title}}
      </p>
      {{#if subline}}
      <p class="blog-card__subline">
        {{subline}}
      </p>
      {{/if}}
      {{#if cta}}
    </a>
    {{/if}}
  </div>

  {{#if cta}}
  {{> @link url=cta.url text=cta.text cssClasses="blog-card__cta" }}
  {{/if}}
</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"
      }
    ]
  },
  "categories": [
    "Category"
  ],
  "date": "20/02/2019",
  "title": "Lorem Ipsum",
  "text": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
  "cta": {
    "url": "#",
    "text": "Click here"
  }
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.blog-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(18);
        padding-bottom: 56%;
        width: 100%;
    }

    &__info {
        padding: rem(30);
    }

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

    &__date {
        display: block;
    }

    &__title {
        @extend %heading02;
    }

    &__subline {
        display: block;
        margin-bottom: rem(32);
    }

    &__cta {
        @extend %primary-cta;
        margin: auto auto 0 rem(30);
    }
}
  • URL: /components/raw/blog-card/blog-default-card.scss
  • Filesystem Path: source/patterns/03-components/cards/blog-card/blog-default-card.scss
  • Size: 835 Bytes

No notes defined.