Fulldev UI

Docs Components Blocks

Card

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import Card from 'fulldev-ui/components/Card.astro'
---

<Card
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

Props

PropTypeDefault
ratio'landscape' | 'portrait' | 'square' | number-
variant'primary' | 'secondary' | 'tertiary'-
position'background' | 'cover' | 'inset'-
align'start' | 'center' | 'end'start
level1 | 2 | 3 | 4 | 5 | 64
size'sm' | 'md' | 'lg'-
radius'auto' | 'none'auto
frame'panel' | 'none'panel
color'base' | 'brand'-
space'auto' | 'none'auto
mask'sm' | 'md' | 'lg'-
imagestring-
buttonComponentProps<typeof Button<'a'>>-
buttonsComponentProps<typeof Button<'a'>>[]-
ratingnumber | ComponentProps<typeof Rating>-
pricenumber-
iconstring-
avatarstring-
avatarsstring[]-
labelstring-
taglinestring-
contrastboolean-
headingstring-
titlestring-
descriptionstring-
htmlstring-
textstring-
liststring[]-
asHTMLTaghref ? a
HTML AttributesPolymorphic<href ? a>-

Examples

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import Card from 'fulldev-ui/components/Card.astro'
---

<Card
  frame="panel"
  size="sm"
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

<Card
  frame="fill"
  size="sm"
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import Card from 'fulldev-ui/components/Card.astro'
---

<Card
  frame="panel"
  size="sm"
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

<Card
  frame="panel"
  size="md"
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

<Card
  frame="panel"
  size="lg"
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import Card from 'fulldev-ui/components/Card.astro'
---

<Card
  frame="panel"
  color="base"
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

<Card
  frame="panel"
  color="brand"
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import Card from 'fulldev-ui/components/Card.astro'
---

<Card
  frame="panel"
  radius="none"
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>

<Card
  frame="panel"
  radius="auto"
  heading="Lorem ipsum dolor"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
/>