V6 Clearleft Patterns

Featured Post 

<article class="Featured-post">
    <a class="Featured-post__link" href="#" class="focus">
        <div class="Featured-post__content flow--xs">
            <ul class="Tags">
                <li>Advice</li>
                <li>Culture</li>
            </ul>
            <h2 class="h h-3">
                When the going gets tough, the tough get training
            </h2>
            <div class="body text-grey flow--xs">
                <p>Just because your training budget has stopped doesn’t mean your training should. Instead of making cuts to staff training, I want to suggest some alternative and cost-effective ways to achieve similar results.</p>
            </div>
        </div>

        <div class="Post-author Post-author--l">

            <figure>
                <img src="/v6-assets/img/author-image.png" alt="Alt" />
            </figure>
            <div class="flow--3xs text-grey">
                <h3>Jeremy Keith</h3>
                <h3>17 August 2020</h3>
            </div>

        </div>
    </a>
</article>
 
<article class="Featured-post">
  <a class="Featured-post__link" href="{{ url }}" class="focus">
    <div class="Featured-post__content flow--xs">
      {% if tags is defined and (tags|length) %}
        {% include '@tags' with {
          tags: tags
        } only %}
      {% endif %}
      <h2 class="h h-3">
        {{ title }}
      </h2>
      <div class="body text-grey flow--xs">
        {{ excerpt|raw }}
      </div>
    </div>
    {% if author is defined and author is not empty %}
      {% include '@post-author' with author only %}
    {% endif %}
  </a>
</article>
 
{
  "tags": [
    "Advice",
    "Culture"
  ],
  "title": "When the going gets tough, the tough get training",
  "excerpt": "<p>Just because your training budget has stopped doesn’t mean your training should. Instead of making cuts to staff training, I want to suggest some alternative and cost-effective ways to achieve similar results.</p>",
  "url": "#",
  "date": "17 August 2020",
  "author": {
    "size": "l",
    "title": "Jeremy Keith",
    "role": "17 August 2020",
    "image": {
      "src": "/v6-assets/img/author-image.png",
      "alt": "Alt"
    }
  }
}
  • Content: 
    .Featured-post {
  &__link {
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: 1fr;
    background: var(--white);
    padding: var(--space-s-l);
    box-shadow: 0px 1px 11px rgba(66, 89, 104, 0.11),
      0px 11px 33px rgba(66, 89, 104, 0.22);
    transition: 300ms box-shadow;

    &:hover {
      box-shadow: 0px 1px 21px rgba(66, 89, 104, 0.11),
        0px 11px 53px rgba(66, 89, 104, 0.22);
    }
  }

  @media screen and (min-width: 40rem) {
    &__link {
      grid-template-columns: 4fr 1fr;
    }

    .Post-author {
      flex-direction: column;
      justify-content: center;
      text-align: center;

      figure {
        margin: 0 0 var(--space-2xs);
      }
    }
  }
}
  • URL: /components/raw/featured-post/featured-post.css
  • Filesystem Path: src/templates/components/featured-post/featured-post.css
  • Size: 712 Bytes

No notes defined.