V6 Clearleft Patterns

Geometric Image 

<div class="Geo-image anim-geo-trigger">
    <div class="Geo-image__inner grid grid--of-two grid--swap">
        <svg class="Geo-image__grid anim-geo" viewbox="0 0 633 540">
            <defs>
                <mask id="geo-mask">
                    <path id="geo-mask" fill="#fff" d="M71,6h292c110,0,190,53,190,197v297H71V6z" />
                </mask>
            </defs>

            <g>
                <circle class="geo-shape" cx="71.3" cy="231.3" r="50" fill="#23d8a0" />
                <g mask="url(#geo-mask)">
                    <image class="geo-image fouc" opacity="0" href="/v6-assets/img/hero1.jpg" preserveaspectratio="xMidYMid slice" x="68" y="3" width="510" height="502" />
                    <rect class="geo-green" fill="#23d8a0" x="68" y="3" width="510" height="502" />
                </g>
                <path class="geo-shape" fill="#425968" d="M221 500H253V532H221z" opacity=".5" style="isolation:isolate" />
                <path class="geo-shape" fill="#23d8a0" d="M473 270H553V350H473z" />
                <path class="geo-shape" fill="#425968" d="M553 460H633V540H553z" />
            </g>
        </svg>

        <div class="Geo-image__intro flow--m">
            <h1 class="Geo-image__header h h-3">
                Working with us
            </h1>
            <div class="body flow">
                <p>We approach all our engagements with a bold curiosity and enthusiasm to tackle even the thorniest of problems.
                    We’ll be your committed allies working alongside you and your teams to break down barriers, adapt to change and go that one step beyond.</p>
            </div>

            <button class="Button focus"><span>Find out more</span><svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                </svg></button>
        </div>
    </div>
</div>
 
<div class="Geo-image anim-geo-trigger">
  <div class="Geo-image__inner grid grid--of-two grid--swap">
    <svg class="Geo-image__grid anim-geo" viewbox="0 0 633 540">
      <defs>
        <mask id="geo-mask">
          <path id="geo-mask"
            fill="#fff"
            d="M71,6h292c110,0,190,53,190,197v297H71V6z" />
        </mask>
      </defs>

      <g>
        <circle class="geo-shape" cx="71.3" cy="231.3" r="50" fill="#23d8a0" />
        <g mask="url(#geo-mask)">
          <image class="geo-image fouc"
            opacity="0"
            href="{{ image }}"
            preserveaspectratio="xMidYMid slice"
            x="68"
            y="3"
            width="510"
            height="502" />
          <rect class="geo-green"
            fill="#23d8a0"
            x="68"
            y="3"
            width="510"
            height="502" />
        </g>
        <path class="geo-shape"
          fill="#425968"
          d="M221 500H253V532H221z"
          opacity=".5"
          style="isolation:isolate" />
        <path class="geo-shape" fill="#23d8a0" d="M473 270H553V350H473z" />
        <path class="geo-shape" fill="#425968" d="M553 460H633V540H553z" />
      </g>
    </svg>

    <div class="Geo-image__intro flow--m">
      <h1 class="Geo-image__header h h-3">
        {{ title }}
      </h1>
      <div class="body flow">
        {{ description }}
      </div>
      {% include '@button' with {
        text: linkLabel,
        link: link,
        arrow: true
      } %}
    </div>
  </div>
</div>
 
{
  "title": "Working with us",
  "description": "<p>We approach all our engagements with a bold curiosity and enthusiasm to tackle even the thorniest of problems.\nWe’ll be your committed allies working alongside you and your teams to break down barriers, adapt to change and go that one step beyond.</p>",
  "image": "/v6-assets/img/hero1.jpg",
  "linkLabel": "Find out more"
}
  • Content: 
    .Geo-image {
  &__grid {
    width: 100%;
    max-width: 630px;
  }

  &__inner {
    align-items: center;
  }
}

html:not(.has-js) .geo-green {
  opacity: 0;
}
  • URL: /components/raw/geometric-image/geometric-image.css
  • Filesystem Path: src/templates/components/_deprecated/geometric-image/geometric-image.css
  • Size: 161 Bytes

No notes defined.