Card
Lorem ipsum dolor
| Prop | Type | Default |
|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | 4 |
| position | 'background' | 'cover' | 'inset' | - |
| ratio | 'landscape' | 'portrait' | 'square' | number | - |
| image | string | - |
| button | ComponentProps<typeof Button<'a'>> | - |
| buttons | ComponentProps<typeof Button<'a'>>[] | - |
| price | number | - |
| icon | string | - |
| avatar | string | - |
| avatars | string[] | - |
| mask | 'sm' | 'md' | 'lg' | - |
| label | string | - |
| rating | number | - |
| html | string | - |
| text | string | - |
| description | string | - |
| heading | string | - |
| title | string | - |
| contrast | boolean | - |
| compact | boolean | true |
| size | 'sm' | 'md' | 'lg' | - |
| align | 'start' | 'center' | 'end' | start |
| radius | 'none' | 'auto' | auto |
| frame | 'panel' | 'none' | panel |
| color | 'base' | 'brand' | - |
| space | 'auto' | 'none' | auto |
| variant | 'base' | 'ghost' | 'subtle' | 'surface' | 'outline' | 'soft' | 'surface' | 'solid' | subtle |
| 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'
import Heading from 'fulldev-ui/components/Heading.astro'
import Paragraph from 'fulldev-ui/components/Paragraph.astro'
---
<Card frame="panel" size="sm">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
<Card frame="fill" size="sm">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
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'
import Heading from 'fulldev-ui/components/Heading.astro'
import Paragraph from 'fulldev-ui/components/Paragraph.astro'
---
<Card frame="panel" size="sm">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
<Card frame="panel" size="md">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
<Card frame="panel" size="lg">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
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.
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'
import Heading from 'fulldev-ui/components/Heading.astro'
import Paragraph from 'fulldev-ui/components/Paragraph.astro'
---
<Card variant="subtle">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
<Card variant="ghost">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
<Card variant="outline">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
<Card variant="soft">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
<Card variant="surface">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
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'
import Heading from 'fulldev-ui/components/Heading.astro'
import Paragraph from 'fulldev-ui/components/Paragraph.astro'
---
<Card frame="panel" color="base">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
<Card frame="panel" color="brand">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
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'
import Heading from 'fulldev-ui/components/Heading.astro'
import Paragraph from 'fulldev-ui/components/Paragraph.astro'
---
<Card frame="panel" radius="none">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>
<Card frame="panel" radius="auto">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</Paragraph>
</Card>