Card

Showcase your information beautifully with our Card. A canvas that displays your data with the respect it deserves

Example

Default CardShowcase your information beautifully with our Card

Showcase your information beautifully with our Card. A canvas that displays your data with the respect it deserves

1import {Card, FlexBox} from '@sugarcoat/ui';
2
3<FlexBox gap='6' justify='center'>
4  <Card>
5    <Card.Header title='Default Card' meta='Showcase your information beautifully with our Card' />
6    <Card.Content>Showcase your information beautifully with our Card. A canvas that displays your data with the respect it deserves</Card.Content>
7    <Card.Footer>
8      <Button size='sm' block>Learn more</Button>
9      <Button size='sm' block variant='outline'>Sign Up</Button>
10    </Card.Footer>
11  </Card>
12</FlexBox>
13

API Reference

Component	Description
Card	The versatile canvas. A FlexBoxible container that neatly presents information and actions about a single topic in a visually appealing way.
Card.Cover	The eye-catcher. A visual area at the top or on the side of the Card, usually hosting an image or illustration, that sets the tone for the content that follows.
Card.Header	The welcoming committee. The upper section of the Card, often containing the title and meta information, serving as an introduction to the content inside.
Card.Title	The headline act. The text that summarizes the essence of the Card, usually bolder and larger, guiding attention to what’s important.
Card.Meta	The fine print. A section for secondary information like tags, categories, or timestamps, giving extra context without stealing the spotlight.
Card.Content	The storyteller. The central area of the Card where the main content, such as text or media, is displayed, sharing the bulk of the information.
Card.Footer	The afterthought. The lower section of the Card that usually contains actions or secondary information, rounding up the content with additional insights or steps.

Component Properties

Card

Prop	Type	Default	Explanation
`size`	`string`	md	The size of the whole Card component, which directly affects font size, paddings and margins of it's sub components.
`variant`	`string`	default	The variant of Card components which impacts the overall style.
`shadow`	`string`	md	The shadow of the entire Card element
`radius`	`string`	md	The radius of the Card component's corners, which also affects the Card.Cover when inset is set to true
`animation`	`boolean`	true	Enable/disable the animation of the Card when it's hovered or clicked (only when interactive=true)
`block`	`boolean`	false	Make the Card component a block element, filling the width of its parent.
`inset`	`boolean`	false	Add extra padding to the Card.Cover sub component when is set to true.
`interactive`	`boolean`	false	Mark the Card component as interactive, which means it will animate when hovered or clicked.

Card.Cover

Prop	Type	Default	Explanation
`src`	`string \| React.ReactNode`	-	Image source for the cover, either string or custom React component
`alt`	`string`	-	Alt value to be used for the image src, when src is a string.

Card.Header

Prop	Type	Default	Explanation
`title`	`string`	-	Title of the Card component, either string or custom React component
`meta`	`string`	-	The meta (or subtitle) of the Card component, either string or custom React component.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius