Cards are surfaces that display content and actions on a single topic.
They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Do
To display content and actions on a single topic.
Don’t
Add too many call-to-action elements to the same card. A card should only contain a single primary action. Inform users about important changes. It should only contain a single idea that may feature a call-to-action, or the option to navigate to more detailed content. The content of a card should be concise and offer only a preview of detailed content. The headings should set clear expectations about the card's purpose. Variants and Examples < dt-cardclass = " d-w-400" header-class = " h:d-bgc-moderate-opaque" content-class = " h:d-bgc-moderate-opaque" footer-class = " h:d-bgc-moderate-opaque" > < template#header > </ template> < template#content > </ template> < template#footer > </ template> </ dt-card>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-cardclass = " d-w-400" > < template#header > < dt-textas = " p" kind = " headline" :size = " 300" > </ dt-text> < dt-button:size = " 100" importance = " clear" kind = " muted" aria-label = " Menu button" > < template#startIcon > < dt-iconname = " more-vertical" size = " 100" /> </ template> </ dt-button> </ template> < template#content > </ template> </ dt-card>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-cardclass = " d-w-400" > < template#content > </ template> < template#footer > < dt-buttonimportance = " outlined" :size = " 200" > </ dt-button> </ template> </ dt-card>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-cardclass = " d-w-400" > < template#content > </ template> </ dt-card>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
With Header, Footer and Scrollable Content Content slot. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum molestie semper.
< dt-cardclass = " d-w-400" content-class = " d-pie-0" > < template#header > < dt-textas = " p" kind = " headline" :size = " 300" > </ dt-text> < dt-button:size = " 100" importance = " clear" kind = " muted" aria-label = " Menu button" > < template#startIcon > < dt-iconname = " more-vertical" size = " 100" /> </ template> </ dt-button> </ template> < template#content > < divclass = " d-h-125 d-pie-200" v-dt-scrollbar: always> </ div> </ template> < template#footer > < dt-buttonimportance = " outlined" :size = " 200" > </ dt-button> </ template> </ dt-card>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
import { DtCard } from '@dialpad/dialtone-vue' ; At minimum, card contains body of content. It could also have header with buttons, and footer with buttons/text.