CTA

CTA Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CTA button

Astro

  <CTA heading={data.cta.heading} content={data.cta.content}>
    <Button variant="contained">CTA button</Button>
  </CTA>

Compiled

  <section data-component="Cta" class="flex flex-col gap-24 mx-auto p-24 lg:p-64 items-start md:flex-row md:items-center lg:gap-64 max-w-screen-xl">
    <div class="flex flex-col gap-8 flex-1">
      <h2 class="text-3xl font-bold">CTA Title</h2>
      <p class="text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <button type="button" data-component="Button" class="btn-contained"> CTA button </button>
  </section>

API Reference

The following are the props that can be passed to the page block.

Prop	Type	Default
align Horizontal alignment of text and button elements.	"left" | "center"	"left"
heading	string	—
content	string	—

Examples

Center aligned, with an onclick event (see console)

CTA 2 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CTA button 2

Astro

  <CTA align="center" heading={data.cta_2.heading} content={data.cta_2.content}>
    <Button variant="outlined" onclick='console.log("this works")'>CTA button 2</Button>
  </CTA>