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 |
|---|---|---|
| image | ComponentProps<typeof Image>['src'] | - |
| images | ComponentProps<typeof Image>['src'][] | - |
| position | ComponentProps<typeof Image>['position'] | - |
| buttons | ComponentProps<typeof Buttons>['buttons'] | - |
| button | ComponentProps<typeof Button> | - |
| variant | ComponentProps<typeof Button>['variant'] | - |
| align | ComponentProps<typeof Writeup>['align'] | start |
| panel | boolean | - |
| size | 'sm' | 'md' | 'lg' | - |
| color | 'base' | 'brand' | - |
| contrast | boolean | - |
| theme | 'light' | 'dark' | - |
| level | ComponentProps<typeof Heading>['level'] | 4 |
| badge | ComponentProps<typeof Badge> | - |
| tagline | ComponentProps<typeof Tagline>['text'] | - |
| heading | ComponentProps<typeof Heading>['text'] | - |
| text | ComponentProps<typeof Text>['text'] | - |
| list | ComponentProps<typeof List>['items'] | - |
| icon | ComponentProps<typeof Icon>['name'] | - |
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."
/>