HTML & CSS CTA Components

<section class="block bg-black-2 text-color-white text-align-center" aria-labelledby="cta-heading">
  <div class="wrapper-md flow">
    <h2 id="cta-heading" class="h1">CTA Heading</h2>
    <div class="font-size-md">"Blue bottle DSA bicycle rights plaid put a bird on it umami VHS seitan, truffaut shoreditch cliche neutra chillwave. Venmo seitan gastropub coloring book. Pickled skateboard hammock bodega boys organic iceland cupping letterpress readymade roof party street art tilde plaid poutine typewriter."</div>
    <a class="btn btn--primary" href="/contact/">Let's Talk</a>
  </div>
</section>

CTA Heading

"Blue bottle DSA bicycle rights plaid put a bird on it umami VHS seitan, truffaut shoreditch cliche neutra chillwave. Venmo seitan gastropub coloring book. Pickled skateboard hammock bodega boys organic iceland cupping letterpress readymade roof party street art tilde plaid poutine typewriter."

Let's Talk

<section class="cta cta--full-background-image bg-black-2 text-color-white text-align-center" aria-labelledby="cta-heading">
  <div class="cta__content block">
    <div class="wrapper-md flow">
      <h2 id="cta-heading" class="h1">CTA Heading</h2>
      <div class="font-size-md">"Blue bottle DSA bicycle rights plaid put a bird on it umami VHS seitan, truffaut shoreditch cliche neutra chillwave. Venmo seitan gastropub coloring book. Pickled skateboard hammock bodega boys organic iceland cupping letterpress readymade roof party street art tilde plaid poutine typewriter."</div>
      <a class="btn btn--primary" href="/contact/">Let's Talk</a>
    </div>
  </div>
  <div class="cta__overlay"></div>
  <div class="cta__image">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/1600x600?space" alt="" width="1800" height="600">
    </picture>
  </div>
</section>

.cta--full-background-image {
  display: grid;
}

.cta--full-background-image > * {
  grid-area: 1/-1;
}

.cta--full-background-image .cta__content {
  z-index: 3;
}

.cta--full-background-image .cta__overlay {
  z-index: 2;
  background-color: rgba(0,0,0,.6);
}

.cta--full-background-image .cta__image {
  z-index: 1;
}

CTA Heading

Palo santo mustache tilde vegan. Mukbang same adaptogen tbh mustache literally umami cupping offal subway tile mustache flannel bodega boys mustache quinoa pug.

Let's Talk

<section class="cta--with-image block columns" aria-labelledby="cta-heading">
  <div class="cta__content margin-block-auto col">
    <div class="wrapper-sm text-color-white flow">
      <h2 id="cta-heading" class="h1">CTA Heading</h2>
      <p>Palo santo mustache tilde vegan. Mukbang same adaptogen tbh mustache literally umami cupping offal subway tile mustache flannel bodega boys mustache quinoa pug.</p>
      <a class="btn btn--primary" href="/contact/">Let's Talk</a>
    </div>
  </div>
  <div class="cta__image col">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
    </picture>
  </div>
</section>

.cta--with-image .cta__image img {
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 500px;
    object-fit: cover;
    border-radius: 50%;
    margin: auto;
}

CTA Heading

Kombucha literally sriracha gatekeep succulents kogi. Shoreditch XOXO beard gentrify cardigan green juice bodega boys blackbird spyplane tousled Brooklyn fit. Forage tacos cold-pressed blue bottle. Cornhole offal JOMO PBR&B occupy, fashion axe cloud bread yr.

Let's Talk

<section class="cta--split cta--overlap-card columns shadow-md" aria-labelledby="cta-heading">
  <div class="cta__content block margin-block-auto col">
    <div class="wrapper-sm bg-black-2 block-sm text-color-white flow">
      <h2 id="cta-heading" class="h1">CTA Heading</h2>
      <p>Kombucha literally sriracha gatekeep succulents kogi. Shoreditch XOXO beard gentrify cardigan green juice bodega boys blackbird spyplane tousled Brooklyn fit. Forage tacos cold-pressed blue bottle. Cornhole offal JOMO PBR&B occupy, fashion axe cloud bread yr.</p>
      <a class="btn btn--primary" href="/contact/">Let's Talk</a>
    </div>
  </div>
  <div class="cta__image col">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
    </picture>
  </div>
</section>

@include breakpoint(md) {
  .cta--overlap-card .cta__content {
    transform: translateX(100px);
  }
}

.cta--split .cta__image img {
    aspect-ratio: 3/2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

CTA Heading

Kombucha literally sriracha gatekeep succulents kogi. Shoreditch XOXO beard gentrify cardigan green juice bodega boys blackbird spyplane tousled Brooklyn fit. Forage tacos cold-pressed blue bottle. Cornhole offal JOMO PBR&B occupy, fashion axe cloud bread yr.

Let's Talk

<section class="cta--split columns bg-black-2 shadow-md" aria-labelledby="cta-heading">
  <div class="cta__content block margin-block-auto col">
    <div class="wrapper-sm text-color-white flow">
      <h2 id="cta-heading" class="h1">CTA Heading</h2>
      <p>Kombucha literally sriracha gatekeep succulents kogi. Shoreditch XOXO beard gentrify cardigan green juice bodega boys blackbird spyplane tousled Brooklyn fit. Forage tacos cold-pressed blue bottle. Cornhole offal JOMO PBR&B occupy, fashion axe cloud bread yr.</p>
      <a class="btn btn--primary" href="/contact/">Let's Talk</a>
    </div>
  </div>
  <div class="cta__image col">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
    </picture>
  </div>
</section>

.cta--split .cta__image img {
    aspect-ratio: 3/2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}