V6 Clearleft Patterns

Hero 

<section class="Hero Slat">
    <div class="constrain Hero__inner">
        <h1 class="Hero__header h h-1">
            <span>Explore</span>
            <span>Create</span>
            <span>Grow</span>
        </h1>

        <svg class="Hero__image-grid anim-hero" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 590.91 632.66">
            <defs>
                <clippath id="heroclip1">
                    <rect class="hero__swipe-1" id="heroclip1Rect" x="101.31" y="51.24" width="488.79" height="221.87" fill="#fff" />
                </clippath>

                <clippath id="heroclip2">
                    <rect class="hero__swipe-2" id="heroclip1Rect" x="195.36" y="293.94" width="292.4" height="268.6" fill="#fff" />
                </clippath>

                <clippath id="heroclip3">
                    <rect class="hero__swipe-3" id="heroclip3Rect" x="1.73" y="233.41" width="174.53" height="162.61" fill="#fff" />
                </clippath>

                <clippath id="heroclip4">
                    <rect class="hero__swipe-4" id="heroclip4Rect" x="100.03" y="405.79" width="75.83" height="73.12" fill="#fff" />
                </clippath>
            </defs>
            <g class="fouc fouc--hero" opacity="0">
                <circle class="hero__circle" cx="90.18" cy="79.56" r="50" fill="#dae1e2" />
                <circle class="hero__circle" cx="488.39" cy="563.49" r="30" fill="#23d8a0" />

                <rect class="hero__swipe-1" x="102" y="52" width="488" height="220" fill="#23d8a0" />
                <rect class="hero__swipe-2" x="196" y="294" width="292" height="268" fill="#FAFAFA" />
                <rect class="hero__swipe-3" x="2" y="234" width="173" height="162" fill="#FAFAFA" />
                <rect class="hero__swipe-4" x="101" y="406" width="75" height="73" fill="#23d8a0" />

                <image clip-path="url(#heroclip1)" href="/v6-assets/img/hero1.jpg" preserveaspectratio="xMidYMid slice" x="101" y="51" width="490" height="223" />
                <image clip-path="url(#heroclip2)" href="/v6-assets/img/hero2.jpg" preserveaspectratio="xMidYMid slice" x="195" y="293" width="294" height="270" />
                <image clip-path="url(#heroclip3)" href="/v6-assets/img/hero3.jpg" preserveaspectratio="xMidYMid slice" x="1" y="233" width="176" height="164" />
                <image clip-path="url(#heroclip4)" href="/v6-assets/img/hero4.jpg" preserveaspectratio="xMidYMid slice" x="99" y="404" width="78" height="76" />
            </g>
        </svg>

        <div class="Hero__intro flow">
            <h2 class="h h-4">
                Close the gap between strategy and delivery
            </h2>
            <div class="flow body">
                We believe the best digital products and services combine the imagination to think big with the ability to act on those thoughts. Let us help you turn ideas into reality.
            </div>
        </div>
    </div>
</section>
 
<section class="Hero Slat">
  <div class="constrain Hero__inner">
    <h1 class="Hero__header h h-1">
      {% for line in title.lines %}
        <span>{{ line }}</span>
      {% endfor %}
    </h1>

    <svg class="Hero__image-grid anim-hero"
      xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 590.91 632.66">
      <defs>
        <clippath id="heroclip1">
          <rect class="hero__swipe-1"
            id="heroclip1Rect"
            x="101.31"
            y="51.24"
            width="488.79"
            height="221.87"
            fill="#fff" />
        </clippath>

        <clippath id="heroclip2">
          <rect class="hero__swipe-2"
            id="heroclip1Rect"
            x="195.36"
            y="293.94"
            width="292.4"
            height="268.6"
            fill="#fff" />
        </clippath>

        <clippath id="heroclip3">
          <rect class="hero__swipe-3"
            id="heroclip3Rect"
            x="1.73"
            y="233.41"
            width="174.53"
            height="162.61"
            fill="#fff" />
        </clippath>

        <clippath id="heroclip4">
          <rect class="hero__swipe-4"
            id="heroclip4Rect"
            x="100.03"
            y="405.79"
            width="75.83"
            height="73.12"
            fill="#fff" />
        </clippath>
      </defs>
      <g class="fouc fouc--hero" opacity="0">
        <circle class="hero__circle"
          cx="90.18"
          cy="79.56"
          r="50"
          fill="#dae1e2" />
        <circle class="hero__circle"
          cx="488.39"
          cy="563.49"
          r="30"
          fill="#23d8a0" />

        <rect class="hero__swipe-1"
          x="102"
          y="52"
          width="488"
          height="220"
          fill="#23d8a0" />
        <rect class="hero__swipe-2"
          x="196"
          y="294"
          width="292"
          height="268"
          fill="#FAFAFA" />
        <rect class="hero__swipe-3"
          x="2"
          y="234"
          width="173"
          height="162"
          fill="#FAFAFA" />
        <rect class="hero__swipe-4"
          x="101"
          y="406"
          width="75"
          height="73"
          fill="#23d8a0" />

        <image clip-path="url(#heroclip1)"
          href="{{ img1 }}"
          preserveaspectratio="xMidYMid slice"
          x="101"
          y="51"
          width="490"
          height="223" />
        <image clip-path="url(#heroclip2)"
          href="{{ img2 }}"
          preserveaspectratio="xMidYMid slice"
          x="195"
          y="293"
          width="294"
          height="270" />
        <image clip-path="url(#heroclip3)"
          href="{{ img3 }}"
          preserveaspectratio="xMidYMid slice"
          x="1"
          y="233"
          width="176"
          height="164" />
        <image clip-path="url(#heroclip4)"
          href="{{ img4 }}"
          preserveaspectratio="xMidYMid slice"
          x="99"
          y="404"
          width="78"
          height="76" />
      </g>
    </svg>

    <div class="Hero__intro flow">
      <h2 class="h h-4">
        {{ subtitle }}
      </h2>
      <div class="flow body">
        {{ lede|raw }}
      </div>
    </div>
  </div>
</section>
 
{
  "title": {
    "lines": [
      "Explore",
      "Create",
      "Grow"
    ]
  },
  "subtitle": "Close the gap between strategy and delivery",
  "lede": "We believe the best digital products and services combine the imagination to think big with the ability to act on those thoughts. Let us help you turn ideas into reality.",
  "img1": "/v6-assets/img/hero1.jpg",
  "img2": "/v6-assets/img/hero2.jpg",
  "img3": "/v6-assets/img/hero3.jpg",
  "img4": "/v6-assets/img/hero4.jpg"
}
  • Content: 
    .Hero {
  &__header {
    display: flex;
    flex-direction: column;
  }

  &__intro {
    animation: fade-in 1s cubic-bezier(0.48, 0.43, 0.56, 0.82) 1.2s both;
  }

  &__image-grid {
    width: 100%;
    max-width: 556px;
  }

  &__header span {
    animation: fade-down 1.3s cubic-bezier(0.48, 0.43, 0.56, 0.82) both;
    animation-delay: 1s;
  }

  &__header {
    span:nth-of-type(2) {
      animation-delay: 1.2s;
    }
    span:nth-of-type(3) {
      animation-delay: 1.4s;
    }
    span:nth-of-type(4) {
      animation-delay: 1.6s;
    }
    span:nth-of-type(5) {
      animation-delay: 1.8s;
    }
  }
}

@media screen and (min-width: 40rem) {
  .Hero__inner > * {
    width: calc(50% - var(--gutter) / 2);
  }
  .Hero__header {
    float: left;
  }
  .Hero__image-grid {
    float: right;
  }
  @supports (display: grid) {
    .Hero__inner > * {
      width: 100%;
    }
    .Hero__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 0 var(--gutter);
    }

    .Hero__header {
      float: unset;
      grid-row: 1 / span 1;
      grid-column: 1 / span 1;
    }

    .Hero__image-grid {
      float: unset;
      grid-row: 1 / span 2;
      grid-column: 2 / span 1;
    }

    .Hero__intro {
      margin-top: var(--space-xl-2xl);
      grid-row: 2 / span 1;
      grid-column: 1 / span 1;
    }
  }
}
  • URL: /components/raw/hero/hero.css
  • Filesystem Path: src/templates/components/_deprecated/hero/hero.css
  • Size: 1.3 KB

No notes defined.