<article class="Nutshell flow--s">
<img class="Nutshell__image" src="https://www.fillmurray.com/800/450" alt="" loading="lazy" />
<div class="flow--2xs">
<header class="flow--2xs">
<ul class="Tags">
<li>Tag 1</li>
<li>Tag 2</li>
<li>Tag 3</li>
</ul>
<h2 class="h h-4">
Articulate a clear mission
</h2>
</header>
<div class="body text-grey">
Knowing where and how to focus energy in a busy and disruptive environment can be an art in itself. Turn vague intentions into a actionable set of objectives and a brief for a potential new initiative.
</div>
<div class="Post-author">
<figure>
<img src="/v6-assets/img/author-image.png" alt="Alt" />
</figure>
<div class="flow--3xs text-grey">
<h3>Jeremy Keith</h3>
</div>
</div>
<a href="#" class="Twi Twi--link text-blue focus" style="">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>Find out more</span></a>
</div>
</article>
{% set hasImage = image is defined and image.src is defined and image.src is not null %}
{% set hasTags = tags is defined and (tags|length) %}
{% set hasExcerpt = excerpt is defined %}
{% set hasLink = link is defined and link.url is defined %}
{% set hasLinkText = hasLink and link.text is defined %}
{% set hasAuthor = author is defined and author is not empty %}
{% if border is defined %}
{% set hasBorder = border %}
{% else %}
{% set hasBorder = not hasImage %}
{% endif %}
{% set isSmall = small is defined and small %}
{% set isDense = dense is defined and dense %}
<article class="Nutshell flow--s{{ isSmall ? ' Nutshell--s' }}{{ hasBorder ? ' Nutshell--border' }}">
{% if hasLink and not hasLinkText %}
<a href={{ link.url }} class="block focus flow--s">
{% endif %}
{% if hasImage %}
<img
class="Nutshell__image"
src="{{ image.src }}"
alt="{{ image.alt }}"
loading="lazy" />
{% endif %}
<div class="{{ isDense ? 'flow--3xs' : 'flow--2xs' }}">
<header class="flow--2xs">
{% if hasTags %}
{% include '@tags' with {
tags: tags
} %}
{% endif %}
<h2 class="h{{ isSmall ? ' h-5' : ' h-4' }}">
{{ title }}
</h2>
</header>
{% if hasExcerpt %}
<div class="body text-grey{{ isSmall ? ' small' }}">
{{ excerpt|raw }}
</div>
{% endif %}
{% if hasAuthor %}
{% include '@post-author' with author %}
{% endif %}
{% if hasLinkText %}
{% include '@twi' with {
text: link.text,
link: link.url,
icon: 'arrow-right',
size: isSmall ? 's'
} %}
{% endif %}
</div>
{% if hasLink and not hasLinkText %}
</a>
{% endif %}
</article>
{
"title": "Articulate a clear mission",
"excerpt": "Knowing where and how to focus energy in a busy and disruptive environment can be an art in itself. Turn vague intentions into a actionable set of objectives and a brief for a potential new initiative.",
"tags": [
"Tag 1",
"Tag 2",
"Tag 3"
],
"image": {
"src": "https://www.fillmurray.com/800/450",
"alt": ""
},
"author": {
"title": "Jeremy Keith",
"image": {
"src": "/v6-assets/img/author-image.png",
"alt": "Alt"
}
},
"link": {
"text": "Find out more",
"url": "#"
}
}
.Nutshell {
&__image {
object-fit: cover;
width: 100%;
aspect-ratio: 16 / 9;
}
&--border {
border-top: 1px solid var(--light-grey-step--1);
padding-top: var(--space-s);
}
a:hover h2 {
text-decoration: underline;
}
}
No notes defined.