V6 Clearleft Patterns

Nutshells 

<div class="flow--l">
    <header class="flow--3xs">
        <h3 class="eyebrow eyebrow--accent eyebrow--black">
            We can help you
        </h3>
    </header>
    <div class="grid grid--of-three grid--v-gap">

        <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>

        </article>

        <article class="Nutshell flow--s Nutshell--border">
            <div class="flow--2xs">
                <header class="flow--2xs">
                    <h2 class="h h-4">
                        Rapidly solve problems
                    </h2>
                </header>
            </div>

        </article>

        <article class="Nutshell flow--s Nutshell--border">
            <div class="flow--2xs">
                <header class="flow--2xs">
                    <h2 class="h h-4">
                        Understand your customers
                    </h2>
                </header>
            </div>

        </article>
    </div>
</div>
 
{% set grid = ['two', 'two', 'two', 'three', 'four'] %}
{% set width = columns ?? grid[shells|length] %}
{% set border = border is defined ? border %}
<div class="flow--l">
  {% if eyebrow is defined or title is defined %}
    <header class="flow--3xs">
      {% if eyebrow is defined %}
        <h3 class="eyebrow eyebrow--accent eyebrow--black">
          {{ eyebrow }}
        </h3>
      {% endif %}
      {% if title is defined %}
        <h2 class="h h-3">
          {{ title }}
        </h2>
      {% endif %}
    </header>
  {% endif %}
  <div class="{{ width != 'one' ? 'grid grid--of-' ~ width ~ ' grid--v-gap' : 'flow--m' }}">
    {% for shell in shells %}
      {% include '@nutshell' with shell %}
    {% endfor %}
  </div>
</div>
 
{
  "eyebrow": "We can help you",
  "shells": [
    {
      "title": "Articulate a clear mission",
      "description": "<p>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.</p>"
    },
    {
      "title": "Rapidly solve problems",
      "description": "<p>Tricky challenges can be time-consuming and expensive to mitigate. Explore and unlock innovative solutions through a highly collaborative and engaging design process at pace. </p>"
    },
    {
      "title": "Understand your customers",
      "description": "<p>Great products and services come from a rich awareness of the people who use them. Reveal deeper insight by more proactively listening to your customers, audiences or end-users.</p>"
    }
  ]
}

No notes defined.