components
Navigation Card
v.1.0.0 | SaturnUsage
The name of the tokens object to style the NavigationCard component is NAVIGATION_CARD_STYLES.
You can not change the name of the object of tokens.
There is one prop that allows to modify different aspects of the component:
- Variant: modify the styles of the NavigationCard.
Variants
Variants can modify the styles for the NavigationCard. The tokens used are:
- container?: CommonStyleType;
- containerExpandedContent?: boolean;
- contentContainer?: CommonStyleType;
- rightContentContainer?: CommonStyleType;
- decorativeElementContainer?: CommonStyleType;
- icon?: IconTypes & { margin_right: string; };
- iconHighlighted?: {
variant?: string;
size?: IconHighlightedSizeType;
color?: string;
backgroundColor?: string;
margin_right: string;
} - illustration?: IllustrationTypes & { margin_right: string };
- avatar?: { margin_right = string };
- title?: Omit<TypographyTypes, 'DESKTOP' | 'TABLE' | 'MOBILE'> & {
component?: TextComponentType;
linesNumber?: number
} & {
[key in DeviceBreakpointsType]?: TypographyTypes & {
component?: TextComponentType;
linesNumber?: number;
};
}; - tagContainer?: CommonStyleType;
- tag?: {
variant?: string;
option?: string;
}
Example
NavigationCard theme object example:
12345678910
const NAVIGATION_CARD_STYLES = { [VARIANT]: { container?: CommonStyleType, containerExpandedContent: boolean, contentContainer?: CommonStyleType, rightContentContainer?: CommonStyleType, decorativeElementContainer?: CommonStyleType, icon?: IconTypes & { margin_right?: string, },