<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 class="body">
                <p>Description lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </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": "#",
  "description": "Description lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
  • 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
  • Handle: @article-signpost--with-description
  • Preview:
  • Filesystem Path: src/templates/components/_deprecated/article-signpost/article-signpost.twig
  • References (1): @icon

No notes defined.