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
ratio	'landscape' \| 'portrait' \| 'square' \| number \| undefined	-
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	-
radius	'auto' \| 'none' \| undefined	fulldevConfig.radius ?? 'auto'
frame	'panel' \| 'none' \| undefined	none
color	'base' \| 'brand' \| undefined	-
space	'auto' \| 'none' \| undefined	auto
mask	'sm' \| 'md' \| 'lg' \| 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	-
contrast	boolean \| 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
  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."
/>

Button Checkbox