<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."
}
.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;
}
}
}
No notes defined.