Skip to main content

Card


Example

Props

NameTypeDefault ValueRequiredDescription
elevation"small" | "none" | "large" | "medium"No
borderRadiusBorderRadiusConfigNo
backgroundConditionalStyle<Values<{ readonly currentColor: "currentColor"; readonly softGrey: CSSVarFunction | MapLeafNodes<any, CSSVarFunction>; readonly softRed: CSSVarFunction | MapLeafNodes<...>; ... 74 more ...; readonly brandTertiary: CSSVarFunction | MapLeafNodes<...>; }, { ...; }>>No
paddingBottomConditionalStyle<Values<MapLeafNodes<{ 0: any; 4: any; 8: any; 12: any; 16: any; 24: any; 32: any; 40: any; 80: any; }, CSSVarFunction>, { defaultClass: string; conditions: { wide: string; desktop: string; tablet: string; mobile: string; }; }>>No
paddingLeftConditionalStyle<Values<MapLeafNodes<{ 0: any; 4: any; 8: any; 12: any; 16: any; 24: any; 32: any; 40: any; 80: any; }, CSSVarFunction>, { defaultClass: string; conditions: { wide: string; desktop: string; tablet: string; mobile: string; }; }>>No
paddingRightConditionalStyle<Values<MapLeafNodes<{ 0: any; 4: any; 8: any; 12: any; 16: any; 24: any; 32: any; 40: any; 80: any; }, CSSVarFunction>, { defaultClass: string; conditions: { wide: string; desktop: string; tablet: string; mobile: string; }; }>>No
paddingTopConditionalStyle<Values<MapLeafNodes<{ 0: any; 4: any; 8: any; 12: any; 16: any; 24: any; 32: any; 40: any; 80: any; }, CSSVarFunction>, { defaultClass: string; conditions: { wide: string; desktop: string; tablet: string; mobile: string; }; }>>No
paddingConditionalStyle<Values<MapLeafNodes<{ 0: any; 4: any; 8: any; 12: any; 16: any; 24: any; 32: any; 40: any; 80: any; }, CSSVarFunction>, { defaultClass: string; conditions: { wide: string; desktop: string; tablet: string; mobile: string; }; }>>No
paddingXConditionalStyle<Values<MapLeafNodes<{ 0: any; 4: any; 8: any; 12: any; 16: any; 24: any; 32: any; 40: any; 80: any; }, CSSVarFunction>, { defaultClass: string; conditions: { wide: string; desktop: string; tablet: string; mobile: string; }; }>>No
paddingYConditionalStyle<Values<MapLeafNodes<{ 0: any; 4: any; 8: any; 12: any; 16: any; 24: any; 32: any; 40: any; 80: any; }, CSSVarFunction>, { defaultClass: string; conditions: { wide: string; desktop: string; tablet: string; mobile: string; }; }>>No