components
Navigation Card
v.1.0.0 | Saturn
StorybookDisplay infomation while it is used to navigate to another section, page or screen.
import { NavigationCard } from '@kubit-ui-web/react-components'
12345678910
<NavigationCard
variant="PRIMARY_ICON"
title={{ content: 'Title' }}
description={{ content: 'Description' }}
arrowIcon={{ icon: 'ICON_PLACEHOLDER' }}
arrowIconText={{ content: 'Navigation Link' }}
url="www.google.com"
tag={{ content: 'Tag', status: 'NORMAL', screenReaderText: 'Status' }}
decorative={{ ICON: { icon: 'ICON_PLACEHOLDER', altText: 'icon alt text', color: '#ff0000' } }}
/>Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set this predefine style for its quick use, access them through the variant prop:
Light version of the component used in dark bakgrounds.
import { NavigationCard } from '@kubit-ui-web/react-components'
12345678910
<NavigationCard
variant='PRIMARY_ICON'
title={{ content: 'Title' }}
description={{ content: 'Description' }}
arrowIcon={{ icon: 'ICON_PLACEHOLDER' }}
arrowIconText={{ content: 'Navigation Link' }}
url="www.google.com"
tag={{ content: 'Tag', status: 'NORMAL', screenReaderText: 'Status' }}
decorative={{ ICON: {icon: 'ICON_GHOST', altText: 'icon alt text', color: '#ff0000'} }}
/>