Card
Styled wrapper for content
import { Card } from '@kalidao/reality'
name | type | default |
|---|---|---|
as | ElementType<any> | div |
backgroundColor | ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 20 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>> | background |
borderRadius | ConditionalStyle<Values<MapLeafNodes<{ none: string; medium: string; large: string; extraLarge: string; '2xLarge': string; '3xLarge': string; '4xLarge': string; full: string; }, CSSVarFunction>, { ...; }>> | { xs: '2xLarge', sm: '3xLarge' } |
color | ConditionalStyle<Values<MapLeafNodes<{ background: string; backgroundSecondary: string; backgroundTertiary: string; foreground: string; foregroundSecondary: string; foregroundSecondaryHover: string; foregroundTertiary: string; ... 20 more ...; transparent: string; }, CSSVarFunction> & MapLeafNodes<...>, { ...; }>> | foreground |
hover | boolean | - |
padding | ConditionalStyle<Values<MapLeafNodes<{ '0': string; px: string; '0.5': string; '1': string; '1.5': string; '2': string; '2.5': string; '3': string; '3.5': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; ... 28 more ...; none: string; }, ... | - |
shadow | boolean | - |
width | ConditionalStyle<Values<{ '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; screenSm: 640; ... 49 more ...; none: CSSVarFunction; }, { ...; }>> | - |
Adds shadow when mode is light.
Adds an outline on hover.