Card
Cards are used to visually group related information on a page. There are two variants: display (default) and interactive.
Display
This is the default styling for a card.
Card title
Card contents
Interactive (button)
Use variant="interactive" to change the card's visual treatment to indicate that it's clickable. By default, it will automatically become a button.
Interactive (link)
Use variant="interactive" and pass in href to turn the card into a link.
Card title
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 title
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 title
Card contents
EsCard props
- Name
href
- Default
undefined
- Description
- If card is intended to be a link, the URL destination should be passed in here.
- Name
tag
- Default
'div'
- Description
- The name of the tag or component the card should render as.
- Name
to
- Default
undefined
- Description
- If card is intended to be an internal link within a Nuxt application, the URL destination should be passed in here.
- Name
variant
- Default
'display'
- Description
- The styling variant to use. Possible values are
'display'and'interactive'.