V6 Clearleft Patterns

Space 

<div class="flow">

    <div class="spaces flow">
        <div style="width: var(--space-xs); height: var(--space-xs);">
            <span class="eyebrow">xs</span>
        </div>
        <div style="width: var(--space-s); height: var(--space-s);">
            <span class="eyebrow">s</span>
        </div>
        <div style="width: var(--space-m); height: var(--space-m);">
            <span class="eyebrow">m</span>
        </div>
        <div style="width: var(--space-l); height: var(--space-l);">
            <span class="eyebrow">l</span>
        </div>
        <div style="width: var(--space-xl); height: var(--space-xl);">
            <span class="eyebrow">xl</span>
        </div>
        <div style="width: var(--space-2xl); height: var(--space-2xl);">
            <span class="eyebrow">2xl</span>
        </div>
        <div style="width: var(--space-3xl); height: var(--space-3xl);">
            <span class="eyebrow">3xl</span>
        </div>
        <div style="width: var(--space-4xl); height: var(--space-4xl);">
            <span class="eyebrow">4xl</span>
        </div>
    </div>

    <div class="spaces flow">
        <div style="width: var(--space-xs-s); height: var(--space-xs-s);">
            <span class="eyebrow">xs-s</span>
        </div>
        <div style="width: var(--space-s-m); height: var(--space-s-m);">
            <span class="eyebrow">s-m</span>
        </div>
        <div style="width: var(--space-m-l); height: var(--space-m-l);">
            <span class="eyebrow">m-l</span>
        </div>
        <div style="width: var(--space-l-xl); height: var(--space-l-xl);">
            <span class="eyebrow">l-xl</span>
        </div>
        <div style="width: var(--space-xl-2xl); height: var(--space-xl-2xl);">
            <span class="eyebrow">xl-2xl</span>
        </div>
        <div style="width: var(--space-2xl-3xl); height: var(--space-2xl-3xl);">
            <span class="eyebrow">2xl-3xl</span>
        </div>
    </div>
</div>

<style>
    .spaces>* {
        background: linear-gradient(135deg, rgba(169, 67, 154, 0.5) 0%, rgba(169, 67, 154, 0.4) 100%);
        position: relative;
    }

    .spaces span {
        position: absolute;
        left: 100%;
        margin-left: 1rem;
        white-space: nowrap;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
 
{% set spaceTypes = [
  ['xs', 's','m', 'l', 'xl', '2xl', '3xl', '4xl'],
  [
    'xs-s',
    's-m',
    'm-l',
    'l-xl',
    'xl-2xl',
    '2xl-3xl'
  ]
] %}

<div class="flow">
  {% for group in spaceTypes %}  
    <div class="spaces flow">
      {% for space in group %}
        <div style="width: var(--space-{{ space }}); height: var(--space-{{ space }});">
          <span class="eyebrow">{{ space }}</span>
        </div>
      {% endfor %}
    </div>
  {% endfor %}
</div>
  
<style>
.spaces > * {
  background: linear-gradient(135deg, rgba(169, 67, 154, 0.5) 0%, rgba(169, 67, 154, 0.4) 100%);
  position: relative;
}

.spaces span {
  position: absolute;
  left: 100%;
  margin-left: 1rem;
  white-space: nowrap;
  top: 50%;
  transform: translateY(-50%);
}
</style>
 
/* No context defined. */

No notes defined.