V6 Clearleft Patterns

Contact Block 

<div class="Contact-block flow--l">
    <h3 class="h h-4">
        Let’s chat about your project
    </h3>

    <div class="Contact-block__grid">
        <figure class="Contact-block__figure">
            <img src="/v6-assets/img/jeremy-keith-2x.jpg" alt="" loading="lazy" />
        </figure>
        <div class="Contact-block__content flow">
            <div class="body">
                <p>I’m Andy Keetch. As Business Relationship Manager I help clients to shape and scope projects. Whether you’ve a tentative idea or a more defined requirements get in touch to see how we can help.</p>
            </div>
            <ul class="Link-list flow">
                <li class="Link-list__item">
                    <a href="#" class="Twi Twi--link text-blue focus" style="">
                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                        <span>Book a remote meeting</span></a>
                    <p class="Link-list__description body small text-grey">
                        You can see when I’m free for a chat and book a slot.
                    </p>
                </li>
                <li class="Link-list__item">
                    <a href="#" class="Twi Twi--link text-blue focus" style="">
                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                        <span>Fill in a client worksheet</span></a>
                    <p class="Link-list__description body small text-grey">
                        We’ll take a look and give you a call.
                    </p>
                </li>
                <li class="Link-list__item">
                    <a href="#" class="Twi Twi--link text-blue focus" style="">
                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                        <span>Send me an email</span></a>
                    <p class="Link-list__description body small text-grey">

                    </p>
                </li>
            </ul>
        </div>
    </div>
</div>
 
<div class="Contact-block flow--l">
  <h3 class="h h-4">
    {{ title }}
  </h3>

  <div class="Contact-block__grid">
    <figure class="Contact-block__figure">
      {% if image is defined and image.src is defined %}
        <img src="{{ image.src }}" alt="{{ image.alt }}" loading="lazy" />
      {% endif %}
    </figure>
    <div class="Contact-block__content flow">
      <div class="body">
        {{ body|raw }}
      </div>
      {% include '@link-list' with {
        items: items
      } only %}
    </div>
  </div>
</div>
 
{
  "title": "Let’s chat about your project",
  "image": {
    "src": "/v6-assets/img/jeremy-keith-2x.jpg"
  },
  "body": "<p>I’m Andy Keetch. As Business Relationship Manager I help clients to shape and scope projects. Whether you’ve a tentative idea or a more defined requirements get in touch to see how we can help.</p>",
  "items": [
    {
      "url": "#",
      "text": "Book a remote meeting",
      "description": "You can see when I’m free for a chat and book a slot."
    },
    {
      "url": "#",
      "text": "Fill in a client worksheet",
      "description": "We’ll take a look and give you a call."
    },
    {
      "url": "#",
      "text": "Send me an email",
      "description": ""
    }
  ]
}
  • Content: 
    .Contact-block {
  &__grid {
    display: grid;
    grid-gap: var(--gutter);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (min-width: 40rem) {
    &__grid {
      grid-template-columns: 1fr 2fr;
    }
  }
}
  • URL: /components/raw/contact-block/contact-block.css
  • Filesystem Path: src/templates/components/contact-block/contact-block.css
  • Size: 258 Bytes

No notes defined.