Card
A flexible container component for grouping related content with consistent styling.
Usage
The Card component provides a container for grouping related content with consistent styling and spacing.
Basic Example
Hello from a card!
Variant Examples
Here are examples of the Card with different variants:
Outlined Card
Muted Card
Soft Card
Raised Card
Color Examples
Blue Card
Green Card
Yellow Card
Red Card
Complex Card Example
John DoeAcme Inc.
Partner
CEO
Props
| Prop | Type | Default |
|---|---|---|
reversed? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, boolean> | - |
align? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, "stretch" | "center" | "end" | "start" | "baseline"> | - |
bleedY? | boolean | true |
bleedX? | boolean | false |
shadow? | "sm" | "md" | "lg" | "none" | - |
borderStrength? | "medium" | "strong" | "weak" | - |
paddingY? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingX? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginY? | ConditionalStyle<Values<{ auto: string; "-2xs": string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; none: `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginX? | ConditionalStyle<Values<{ auto: string; "-2xs": string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; none: `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
radius? | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "none" | "3xs" | "round" | - |
justify? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "baseline"> | - |
wrap? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, boolean> | - |
inline? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, boolean> | - |
layout? | LayoutOptions | - |
padding? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
margin? | ConditionalStyle<Values<{ auto: string; "-2xs": string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; none: `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
gap? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
borderWidth? | "regular" | "none" | "thick" | - |
borderColor? | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "teal" | "cyan" | "neutral" | - |
width? | ConditionalStyle<Values<{ none: string; 'fit-content': string; 'min-content': string; 'max-content': string; '1/12': string; '1/6': string; '1/4': string; '1/3': string; '5/12': string; '1/2': string; '7/12': string; '2/3': string; '3/4': string; '5/6': string; '11/12': string; full: string; device: string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingTop? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingRight? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingLeft? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
paddingBottom? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
minWidth? | ConditionalStyle<Values<{ none: string; 'fit-content': string; 'min-content': string; 'max-content': string; '1/12': string; '1/6': string; '1/4': string; '1/3': string; '5/12': string; '1/2': string; '7/12': string; '2/3': string; '3/4': string; '5/6': string; '11/12': string; full: string; device: string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
minHeight? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | "6xs" | "5xs" | "4xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
maxWidth? | ConditionalStyle<Values<{ none: string; 'fit-content': string; 'min-content': string; 'max-content': string; '1/12': string; '1/6': string; '1/4': string; '1/3': string; '5/12': string; '1/2': string; '7/12': string; '2/3': string; '3/4': string; '5/6': string; '11/12': string; full: string; device: string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
maxHeight? | ConditionalStyle<Values<MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "3xs" | "6xs" | "5xs" | "4xs", string>, `var(--${string})`>, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginTop? | ConditionalStyle<Values<{ auto: string; "-2xs": string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; none: `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginRight? | ConditionalStyle<Values<{ auto: string; "-2xs": string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; none: `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginLeft? | ConditionalStyle<Values<{ auto: string; "-2xs": string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; none: `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
marginBottom? | ConditionalStyle<Values<{ auto: string; "-2xs": string; "-xs": string; "-sm": string; "-md": string; "-lg": string; "-xl": string; "-2xl": string; "-3xl": string; "-4xl": string; "-5xl": string; "-6xl": string; "-3xs": string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; none: `var(--${string})`; "3xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
height? | ConditionalStyle<Values<{ none: string; full: string; device: string; "2xs": `var(--${string})`; xs: `var(--${string})`; sm: `var(--${string})`; md: `var(--${string})`; lg: `var(--${string})`; xl: `var(--${string})`; "2xl": `var(--${string})`; "3xl": `var(--${string})`; "4xl": `var(--${string})`; "5xl": `var(--${string})`; "6xl": `var(--${string})`; "3xs": `var(--${string})`; "6xs": `var(--${string})`; "5xs": `var(--${string})`; "4xs": `var(--${string})`; }, { defaultClass: string; conditions: { readonly xs: string; readonly sm: string; readonly md: string; readonly lg: string; readonly xl: string; readonly default: string; }; }>> | - |
direction? | ConditionalValue<ConditionalAtomicStyles<{ readonly alignItems: readonly ["flex-start", "flex-end", "center", "stretch", "baseline"]; readonly display: readonly ["block", "none", "inline-flex", "inline", "flex"]; readonly flexDirection: readonly ["row", "column", "row-reverse", "column-reverse"]; readonly flexWrap: readonly ["wrap", "nowrap"]; readonly gap: MapLeafNodes<Record<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs", string>, `var(--${string})`>; readonly justifyContent: readonly ["flex-start", "flex-end", "center", "stretch", "baseline", "space-around", "space-between", "space-evenly"]; }, { readonly xs: { '@media': string; }; readonly sm: { '@media': string; }; readonly md: { '@media': string; }; readonly lg: { '@media': string; }; readonly xl: { '@media': string; }; readonly default: {}; }, "default">, Orientation> | - |
variant? | "outlined" | "raised" | "subtle" | "soft" | "muted" | - |
Edit on GitHub
Last updated on