Fulldev UI

Docs Components Blocks Showcase

Features

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

<Features
  color="brand"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
  cards={[
    {
      icon: 'rocket',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      button: { text: 'Lorem ipsum', href: '' },
    },
    {
      icon: 'pencil',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      button: { text: 'Lorem ipsum', href: '' },
    },
    {
      icon: 'typography',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      button: { text: 'Lorem ipsum', href: '' },
    },
  ]}
/>

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

<Features
  color="brand"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
  cards={[
    {
      icon: 'rocket',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
    },
    {
      icon: 'pencil',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
    },
    {
      icon: 'typography',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
    },
  ]}
/>

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

<Features
  color="brand"
  variant="primary"
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
  buttons={[
    { text: 'Lorem ipsum', href: '' },
    { text: 'Lorem ipsum', href: '' },
  ]}
  cards={[
    {
      icon: 'rocket',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
    },
    {
      icon: 'pencil',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
    },
    {
      icon: 'typography',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
    },
  ]}
/>

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing elit.

placeholder landscape

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

placeholder landscape

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

placeholder landscape

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

<Features
  heading="Lorem ipsum dolor sit"
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
  frame="panel"
  position="inset"
  cards={[
    {
      image: '/images/placeholder-landscape.webp',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      href: '',
    },
    {
      image: '/images/placeholder-landscape.webp',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      href: '',
    },
    {
      image: '/images/placeholder-landscape.webp',
      heading: 'Lorem ipsum',
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      href: '',
    },
  ]}
/>