Fulldev UI

Docs Components Blocks Showcase

Hero

Lorem ipsum dolor

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing elit

placeholder landscape
---
import Hero from 'fulldev-ui/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="/images/placeholder-landscape.webp"
/>

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing elit

placeholder landscape
---
import Hero from 'fulldev-ui/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="/images/placeholder-landscape.webp"
/>
Lorem ipsum dolor

Lorem ipsum dolor consectetur amet

Lorem ipsum dolor sit amet consectetur aler

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

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

Lorem ipsum dolor consectetur amet

Lorem ipsum dolor sit amet consectetur aler

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

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

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing elit

placeholder landscape dark
---
import Hero from 'fulldev-ui/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: '' },
  ]}
  image="/images/placeholder-landscape-dark.png"
  position="background"
  align="center"
  frame="viewport"
  justify="center"
/>