Cards are used to visually group related information on a page. There are two variants: display (default) and interactive.
This is the default styling for a card.
Card contents
Use variant="interactive" to change the card's visual treatment to indicate that it's clickable. By default, it will automatically become a button.
Use variant="interactive" and pass in href to turn the card into a link.
Card contents
If you pass in href and forget to specify variant="interactive", the card will detect this and automatically become an interactive link.
Card contents
You can also use the tag prop to tell the card what HTML element or Vue component to render as, while still getting the same interactive card treatment by setting variant="interactive".
Below is an example of using tag="nuxt-link" to make the card an internal navigation link to another page in the same Nuxt app (in this case, the color page).
Card contents
hrefundefinedtag'div'toundefinedvariant'display''display' and 'interactive'.