Loading...
Generic card
Simple
This element is a simple, ‘card’ that has a heading and a content pane. It is designed to expand to fit the width of the container that it is in
This is a card
It can contain anything
Truncated title
If the title is too long (because it's a large amount of text, or the box is just small) it is set to auto-truncate
A very small box
Although the title is truncated, the text (or whatever) shouldn't push the size of the box out
This has a very long title in a reasonable sized box. This should also be truncated
Although the title is truncated, the text (or whatever) shouldn't push the size of the box out
With subtitle
An optional subtitle can appear below the title in a lighter colour.
Card with subtitle
This is a subtitle providing extra contextCard body content
Subtitle — truncated with tooltip
Long subtitles are truncated to a single line. The full text appears in a tooltip on hover.
Truncated subtitle
This subtitle is quite long and will be truncated with a tooltip on hoverHover the subtitle to see the tooltip.
Not padded & Fit To Contents
By default, cards expand to fit the box they are in, but by adding fitToContents it shrinks to fit what is in it. If we also add notPadded to it, we can then make the contents exactly the contained thing and nothing more.
Isn't he funny!?
