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 | - |
| variant | 'primary' | 'secondary' | 'tertiary' | - |
| position | 'background' | 'cover' | 'inset' | - |
| align | 'start' | 'center' | 'end' | start |
| level | 1 | 2 | 3 | 4 | 5 | 6 | 4 |
| size | 'sm' | 'md' | 'lg' | - |
| radius | 'auto' | 'none' | auto |
| frame | 'panel' | 'none' | panel |
| color | 'base' | 'brand' | - |
| space | 'auto' | 'none' | auto |
| mask | 'sm' | 'md' | 'lg' | - |
| image | string | - |
| button | ComponentProps<typeof Button<'a'>> | - |
| buttons | ComponentProps<typeof Button<'a'>>[] | - |
| rating | number | ComponentProps<typeof Rating> | - |
| price | number | - |
| icon | string | - |
| avatar | string | - |
| avatars | string[] | - |
| label | string | - |
| tagline | string | - |
| contrast | boolean | - |
| heading | string | - |
| title | string | - |
| description | string | - |
| html | string | - |
| text | string | - |
| list | string[] | - |
| 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."
/>