Card
---
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> | - |
| images | ComponentProps<typeof Image>[] | - |
| position | ComponentProps<typeof Image>['position'] | - |
| buttons | ComponentProps<typeof Buttons>['buttons'] | - |
| button | ComponentProps<typeof Button> | - |
| variant | ComponentProps<typeof Button>['variant'] | - |
| align | ComponentProps<typeof Writeup>['align'] | - |
| icon | ComponentProps<typeof Icon>['name'] | - |
| price | ComponentProps<typeof Price>['value'] | - |
| slug | CollectionEntry<'pages'>['slug'] | - |
| id | any | - |
| panel | boolean | - |
| title | ComponentProps<typeof Writeup>['heading'] | - |
| heading | page.title, | - |
| text | page.description, | - |
| href | `/${slug}/`, ...page, | - |
| level | ComponentProps<typeof Heading>['level'] | - |
| badge | ComponentProps<typeof Badge> | - |
| tagline | ComponentProps<typeof Tagline>['text'] | - |
| list | ComponentProps<typeof List>['items'] | - |
| HTML Attributes | 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."
/>