V6 Clearleft Patterns

Article Signpost 

<article class="Article-signpost">
    <div class="Article-signpost__wrapper focus">
        <div class="flow--3xs">
            <p class="eyebrow eyebrow--small">Meta tag</p>
            <p class="h h-6"><a class="Article-signpost__link" href="#">Article title lorem ipsum dolor sit amet, consectetur adipiscing.</a></p>
        </div>
    </div>
</article>
 
{% set hasArrow = arrow is defined and arrow %}
<article class="Article-signpost">
  <div class="Article-signpost__wrapper focus">
    <div class="flow--3xs">
      {% if eyebrow %}<p class="eyebrow{% if not hasArrow %} eyebrow--small{% endif %}">{{ eyebrow }}</p>{% endif %}
      <p class="h h-6"><a class="Article-signpost__link" href="{{ link }}">{{ title }}</a></p>
      {% if description is defined and description %}<div class="body"><p>{{ description | raw }}</p></div>{% endif %}
    </div>
    {% if hasArrow %}
      {% include "@icon" with { id: 'arrow-right' } %}
    {% endif %}
  </div>
</article>
 
{
  "title": "Article title lorem ipsum dolor sit amet, consectetur adipiscing.",
  "eyebrow": "Meta tag",
  "link": "#"
}
  • Content: 
    .Article-signpost {
  position: relative;

  &:hover .h {
    text-decoration: underline;
  }

  &__link:after {
    z-index: 1;
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }

  &__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

    & > * + * {
      margin-left: var(--gutter);
    }
    
    .Icon {
      flex-shrink: 0;
    }
  }
}
  • URL: /components/raw/article-signpost/article-signpost.css
  • Filesystem Path: src/templates/components/_deprecated/article-signpost/article-signpost.css
  • Size: 437 Bytes

No notes defined.