Card Modern

Our new cards are separated into individual variants for specifik purposes.

Navigation Cards

<v-navigation-card> is used, as the name suggests, for navigation on section pages where they link to underlying content. They are especially well-suited for mobile devices, where the menu is hidden by default.

<v-navigation-cards> is a container component for <v-navigation-card> components and is used to group them together and as a placeholder in Sitecore.

API (v-navigation-card)

Name	Type	Description	Default
icon	Object	Icon object with name and size properties e.g. <v-navigation-card :icon="{ name: 'download'}" />	""
title	String	Header text for the card e.g. <v-navigation-card title="Se dine fordele" />	""
text	String	Text for the card, e.g. "Lorem ipsum"	""
arrow	Boolean	Show arrow on the card e.g. <v-navigation-card :arrow="true" />	false
buttonText	String	Text for the button on the card e.g. <v-navigation-card buttonText="Kontakt os" />	""
href	String	URL for the card e.g. <v-navigation-card href="/kontakt" />	""
v-theme="{variant:4,buttons:true}"	Object	Global theme feature can be used on navigation-cards e.g. <v-navigation-card v-theme="{ variant: 4 }" />	-

The title and text should not have the RTF-editor available but remain as simple Strings.
A buttonText string will overrule and hide the arrow icon, even if it's set to true
Documentation for v-theme color sets can be found here

Contact Cards

<v-contact-card> is a specialized card component variant for displaying contact information.

API (v-contact-card)

Name	Type	Description	Default
people	Boolean	Show people background instead of a map background <v-contact-card people>	false
aside	Boolean	Display the button/link in a right column on desktop, instead of at the bottom <v-contact-card aside>	false
label	String	Label for the card, e.g. "Personline oplysninger" <v-contact-card label="Personline oplysninger">	null
header	String	Header text for the card, e.g. "Peter Madsen" <v-contact-card header="Peter Madsen">	null