<article class="Nutshell flow--s Nutshell--border">
<div class="flow--2xs">
<header class="flow--2xs">
<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>
</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."
}
.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.