V6 Clearleft Patterns

Springboard 

<section class="Slat Springboard">
    <div class="constrain Springboard__inner flow--m">
        <h2 class="Springboard__eyebrow eyebrow">
            we can help you
        </h2>

        <ul class="Springboard__blocks grid grid--of-three" role="list">
            <li class="Springboard__block anim-triangle flow">
                <svg width="60" viewbox="0 0 60 59" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path class="triangles grey" d="M41.5308 23.6922L22.3132 56.9781L3.09559 23.6922L41.5308 23.6922Z" fill="#425968" />
                    <path class="triangles green" d="M57.4879 14.2176L38.2703 47.5035L19.0526 14.2176L57.4879 14.2176Z" fill="#23D8A0" />
                </svg>
                <a class="Springboard__link focus" href="/explore">
                    <h3 class="h h-5">
                        Explore the future
                    </h3>

                    <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Springboard__arrow">
                        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                    </svg>
                </a>
            </li>
            <li class="Springboard__block anim-square flow">
                <svg width="60" viewbox="0 0 60 59">
                    <path class="green" stroke="#23D8A0" fill="none" stroke-width="11" d="M38.59 12.89H48.59V23.89H38.59z" transform="rotate(15 38.6 12.9)" />
                    <path class="grey" fill="#425968" fill-rule="evenodd" d="M8 21.1543H23.4226V36.5769H8V21.1543ZM8 36.5772H23.4226V51.9998H8V36.5772ZM38.8453 36.5772H23.4227V51.9998H38.8453V36.5772Z" clip-rule="evenodd" />
                </svg>
                <a class="Springboard__link focus" href="/create">
                    <h3 class="h h-5">
                        Create digital products
                    </h3>

                    <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Springboard__arrow">
                        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                    </svg>
                </a>
            </li>
            <li class="Springboard__block anim-circle flow">
                <svg width="60" viewbox="0 0 60 59">
                    <circle class="grey" cx="16" cy="43" r="7" fill="#425968" />
                    <circle class="green" cx="35.5" cy="26.5" r="15.5" fill="#23D8A0" />
                </svg>
                <a class="Springboard__link focus" href="/grow">
                    <h3 class="h h-5">
                        Grow your capabilities
                    </h3>

                    <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right Springboard__arrow">
                        <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                    </svg>
                </a>
            </li>
        </ul>
    </div>
</section>
 
<section class="Slat Springboard">
  <div class="constrain Springboard__inner flow--m">
    <h2 class="Springboard__eyebrow eyebrow">
      {{ eyebrow }}
    </h2>

    <ul class="Springboard__blocks grid grid--of-three" role="list">
      {% for block in blocks %}
        <li class="Springboard__block anim-{{ block.shape }} flow">
          {% if block.shape == 'triangle' %}
            {% include '@shapes' %}
          {% elseif block.shape == 'square' %}
            {% include '@shapes--square' %}
          {% elseif block.shape == 'circle' %}
            {% include '@shapes--circle' %}
          {% endif %}

          <a class="Springboard__link focus" href="{{ block.link }}">
            <h3 class="h h-5">
              {{ block.title }}
            </h3>
            {% include '@icon' with {
              id: 'arrow-right',
              classes: 'Springboard__arrow'
            } %}
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
</section>
 
{
  "eyebrow": "we can help you",
  "subtitle": "Close the gap between strategy and delivery",
  "blocks": [
    {
      "title": "Explore the future",
      "link": "/explore",
      "shape": "triangle"
    },
    {
      "title": "Create digital products",
      "link": "/create",
      "shape": "square"
    },
    {
      "title": "Grow your capabilities",
      "link": "/grow",
      "shape": "circle"
    }
  ]
}
  • Content: 
    .Springboard {
  animation: fade-in 1s cubic-bezier(0.48, 0.43, 0.56, 0.82) 1.2s both;

  &__block {
    position: relative;
    background-color: var(--light-grey-step-1);
    padding: var(--space-s-m);
    transition: background-color 0.3s ease-out;

    svg {
      overflow: visible;
    }

    &:hover {
      background-color: var(--light-grey);

      .Icon {
        transform: translateX(4px);
      }
    }
  }

  &__arrow {
    margin-left: var(--space-s);
    margin-top: var(--space-3xs);
    transition: 0.35s transform cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  &__link {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-decoration: none;
    color: var(--dark);

    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
    }
  }
}
  • URL: /components/raw/springboard/springboard.css
  • Filesystem Path: src/templates/components/_deprecated/springboard/springboard.css
  • Size: 893 Bytes

No notes defined.