---
_layout: BlockLayout
title: Hero
---

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

<Hero
  badge="Lorem ipsum dolor"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  image="/placeholder-landscape.webp"
/>
```

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

<Hero
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  structure="spread"
  image="/placeholder-landscape.webp"
/>
```

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

<Hero
  badge="Lorem ipsum dolor"
  heading="Lorem ipsum dolor sit amet conset."
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  structure="split"
  image="/placeholder-landscape.webp"
/>
```

```astro live props={{ title: 'Split Inset' }}
---
import Hero from 'fulldev-blocks/blocks/Hero.astro'
---

<Hero
  badge="Lorem ipsum dolor"
  heading="Lorem ipsum dolor sit amet conset."
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  structure="split"
  position="inset"
  image="/placeholder-portrait.webp"
/>
```

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

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