<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": "#"
  }
}
  • Content:
    .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;
      }
    }
    
  • URL: /components/raw/nutshell/nutshell.css
  • Filesystem Path: src/templates/components/nutshell/nutshell.css
  • Size: 254 Bytes

No notes defined.