Fulldev UI

Docs Components Blocks Showcase

CTA

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur ades

---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

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

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur ades

---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

<Cta
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur ades"
  buttons={[
    { text: 'Lorem ipsum', href: '', contrast: true },
    { text: 'Lorem ipsum', href: '', contrast: true },
  ]}
/>

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur ades

---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

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

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur ades

---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

<Cta
  label="Lorem ipsum dolor"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur ades"
  buttons={[
    { text: 'Lorem ipsum', href: '', contrast: true },
    { text: 'Lorem ipsum', href: '', contrast: true },
  ]}
  theme="light"
/>

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur ades

---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

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

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur ades

---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

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

Lorem ipsum dolor sit

---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

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

Lorem ipsum dolor sit

---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

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

Lorem ipsum dolor sit

---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

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

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur ades

placeholder landscape
---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

<Cta
  label="Lorem ipsum dolor"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur ades"
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  position="inset"
  structure="split"
  align="center"
  color="brand"
  image="/images/placeholder-landscape.webp"
/>

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur ades

placeholder landscape dark
---
import Cta from 'fulldev-ui/blocks/Cta.astro'
---

<Cta
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur ades"
  buttons={[
    { text: 'Lorem ipsum', href: '', color: 'brand' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  position="background"
  align="center"
  image="/images/placeholder-landscape-dark.png"
/>