Documentation
Card-link
Card link is used to display an image with some additional text as a linkable card that uses Next/Link component.
It uses Link-wrapper as a wrapper around a trinidad-ui/paper. This is because trinidad-ui/paper don't have support for Next/Link.
Code examples
This is an example of the implementation from /getting-started.
// Import card-link component
import CardLink from '@components/content/card-link';
<CardLink href='/components/dropdown' image="/images/getting-started/overview/dropdown-pic.png" alt="Dropdown" sizes="(min-width: 1357px) 20vw, (min-width: 768px) 33vw, 100vw" title='Dropdown' component='h2' variant='body200' />
Props table
| Prop name | Type | Default Value | Description |
|---|---|---|---|
| href | string | Path where link should point to. | |
| image | string | Path to image. | |
| alt | string | Alt text for image. | |
| sizes | string | Image component prop, sizes for different breakpoints for image. | |
| component | string | Typography component prop, (h2, h3, p...). | |
| variant | string | Typography component prop, (subtitle100, heading200...). | |
| transparent | boolean | false | Image component prop, true if background should be transparent |
| target | boolean | false | True for target="_blank". |