V6 Clearleft Patterns

Nutshell: Default 

<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."
}
  • 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.