Fulldev UI

Docs Components Blocks Showcase

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
justify'start' | 'center' | 'end'-
level1 | 2 | 3 | 4 | 5 | 64
size'sm' | 'md' | 'lg'-
radius'auto' | 'none'auto
frame'panel' | 'none'none
color'base' | 'brand'-
space'auto' | 'none'auto
mask'sm' | 'md' | 'lg'-
imagestring-
imagesstring[]-
buttonComponentProps<typeof Button<'a'>>-
buttonsComponentProps<typeof Button<'a'>>[]-
badgestring | ComponentProps<typeof Badge<'a'>>-
badges(string | ComponentProps<typeof Badge<'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."
/>