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

Prop	Type	Default
variant	'primary' \| 'secondary' \| 'tertiary' \| undefined	-
position	'background' \| 'cover' \| 'inset' \| undefined	-
align	'start' \| 'center' \| 'end' \| undefined	start
justify	'start' \| 'center' \| 'end' \| undefined	-
level	1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined	4
size	'sm' \| 'md' \| 'lg' \| undefined	-
color	'base' \| 'brand' \| undefined	-
space	'auto' \| 'none' \| undefined	auto
panel	boolean \| undefined	true
contrast	boolean \| undefined	-
image	string \| ComponentProps<typeof Image> \| undefined	-
images	string[] \| undefined	-
button	ComponentProps<typeof Button<'a'>> \| undefined	-
buttons	ComponentProps<typeof Button<'a'>>[] \| undefined	-
badge	string \| ComponentProps<typeof Badge<'a'>> \| undefined	-
badges	(string \| ComponentProps<typeof Badge<'a'>>)[] \| undefined	-
rating	number \| ComponentProps<typeof Rating> \| undefined	-
price	number \| undefined	-
icon	string \| undefined	-
avatar	string \| undefined	-
avatars	string[] \| undefined	-
label	string \| undefined	-
tagline	string \| undefined	-
heading	string \| undefined	-
title	string \| undefined	-
description	string \| undefined	-
html	string \| undefined	-
text	string \| undefined	-
list	string[] \| undefined	-
as	HTMLTag	href ? a
HTML Attributes	Polymorphic<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
  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
  panel={false}
  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
  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
  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
  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
  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
  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."
/>

Button Checkbox