Skip to content

Card

Use this as the main wrapper for your cards.


example

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import { Card, Heading, Image, Paragraph } from 'fulldev-ui'
---
<Card>
<Image src="/example.jpg" frame="inset" />
<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>

Props

frame

Type: 'fill' | 'panel'

Applies a margin around certain child elements and applies the background and border set in your color variables

You can use the variant prop explained below to adjust these styles.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

---
import { Card, Heading, Paragraph } from 'fulldev-ui'
---
<Card frame="panel">
<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>

size

Type: size?: 'sm' | 'md' | 'lg'

Sets the size for this component and all its children.

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, Heading, Paragraph } from 'fulldev-ui'
---
<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>

density

Type: density?: 'base' | 'compact' | string = 'compact'

Changes the underlying values used by the size prop, for this component and all its children.

For example, we set compact on a card and can now size this and all children automatically based on the size on the wrapping block/section.

Choose a predefined density, or a custom value defined like explained in the theming guide.

The default for cards is compact and you probably use it this way most of the time.

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.

---
import { Card, Heading, Paragraph } from 'fulldev-ui'
---
<Card frame="panel">
<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" density="base">
<Heading> Lorem ipsum dolor </Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
</Paragraph>
</Card>

variant

Type: 'base' | 'ghost' | 'soft' | 'solid'

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, Heading, Paragraph } from 'fulldev-ui'
---
<Card frame="panel" 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 frame="panel" variant="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" variant="raised">
<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" variant="primary">
<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>

theme

Type: theme?: 'light' | 'dark' | string

Changes the colors for this component and all its children.

Choose a predefined theme, or a custom value defined like explained in the theming guide.

as & HTML Attributes

Type: as?: HTMLTag = 'div'

Used to determine which HTML tag is used to render the component.

Based on the value, all HTML attributes of this tag are accepted as props too.

For a detailed explanation see Polymorphic props in the Astro documentation.