---
_layout: BlockLayout
title: CTA
---

```astro live props={{ title: 'Centered' }}
---
import Cta from 'fulldev-blocks/blocks/Cta.astro'
---

<Cta
  label="Lorem ipsum"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing."
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
/>
```

```astro live props={{ title: 'Brand' }}
---
import Cta from 'fulldev-blocks/blocks/Cta.astro'
---

<Cta
  label="Lorem ipsum"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing."
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  color="brand"
/>
```

```astro live props={{ title: 'Solid' }}
---
import Cta from 'fulldev-blocks/blocks/Cta.astro'
---

<Cta
  label="Lorem ipsum"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing."
  buttons={[{ text: 'Lorem ipsum', href: '', contrast: true }]}
  color="brand"
  variant="solid"
/>
```

```astro live props={{ title: 'Light' }}
---
import Cta from 'fulldev-blocks/blocks/Cta.astro'
---

<Cta
  label="Lorem ipsum"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing."
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  color="base"
  variant="base"
  theme="light"
/>
```

```astro live props={{ title: 'Spread' }}
---
import Cta from 'fulldev-blocks/blocks/Cta.astro'
---

<Cta
  heading="Lorem ipsum dolor sit"
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  structure="spread"
/>
```

```astro live props={{ title: 'Background' }}
---
import Cta from 'fulldev-blocks/blocks/Cta.astro'
---

<Cta
  label="Lorem ipsum"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing."
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  position="background"
  align="center"
  image="/placeholder-landscape.webp"
/>
```
