Card

A versatile container component that organizes content into sections with a consistent layout and styling. Built on our design system for flexible and beautiful content presentation.

Examples

Default CardA simple card with header, content, and footer

Cards are building blocks that help organize and present content in a consistent way.

1import { Card, Button, FlexBox } from '@sugarcoat/ui'
2
3<FlexBox gap='6' justify='center' items='stretch'>
4  <Card>
5    <Card.Header title='Default Card' meta='A simple card with header, content, and footer' />
6    <Card.Content>
7      Cards are building blocks that help organize and present content in a consistent way.
8    </Card.Content>
9    <Card.Footer>
10      <Button size='sm' block>Learn more</Button>
11      <Button size='sm' block variant='outline'>Sign Up</Button>
12    </Card.Footer>
13  </Card>
14</FlexBox>
15

API Reference

Component	Description
Card	The root component that provides the card container and layout structure.
Card.Header	Contains the card's title and meta information.
Card.Cover	Displays an image or media content at the top of the card.
Card.Content	Contains the main content of the card.
Card.Footer	Contains actions or additional information at the bottom of the card.

Component Properties

Card

Prop	Type	Default	Explanation
`size`	`string`	md	Controls the overall size and spacing of the card.
`variant`	`string`	default	The visual style variant of the card.
`layout`	`string`	vertical	The layout direction of the card content.
`shadow`	`string`	md	The shadow depth of the card.
`radius`	`string`	md	The border radius of the card.
`interactive`	`boolean`	false	Whether the card should show hover and focus states.
`block`	`boolean`	false	Whether the card should take the full width of its container.
`animation`	`boolean`	true	Whether the card should have transition animations.
`inset`	`boolean`	false	Whether the card cover should respect padding and border radius.

Card.Header

Prop	Type	Default	Explanation
`title`	`string \| ReactNode`	-	The title content of the card.
`meta`	`string \| ReactNode`	-	Additional metadata to display below the title.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius