Cards

A card is a piece of paper that contains unique related data. Cards are typically an entry point to more complex and detailed information.

Styling options

Cards can be formatted in different ways so that it best suits its content. There are different styles available for this purpose which can be combined with each other.

Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.

Basic Card

Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.

Underlined Card

Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.

Outlined Card with icon

Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.

Outlined & solid header Card with icon

Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.

Colored Card

Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.

Card with colored body

Sizes

Sometimes you have to put more or less emphasis on a card. You can do this using one of the headersize classes.

XS header

Rather have larger or smaller card headers? There are 4 different sizes.

card-head-xs, card-head-sm, regular, card-head-lg

SM header

Rather have larger or smaller card headers? There are 4 different sizes.

card-head-xs, card-head-sm, regular, card-head-lg

Regular header

Rather have larger or smaller card headers? There are 4 different sizes.

card-head-xs, card-head-sm, regular, card-head-lg

XL header

Rather have larger or smaller card headers? There are 4 different sizes.

card-head-xs, card-head-sm, regular, card-head-lg

Colors

Convey meaning through color with the styling classes.

.style-primary-dark

.style-primary

.style-primary-light

.style-primary-bright

.style-accent-dark

.style-accent

.style-accent-light

.style-accent-bright

.style-default-dark

.style-default

.style-default-light

.style-default-bright

.style-gray-dark

.style-gray

.style-gray-light

.style-gray-bright

.style-danger

.style-warning

.style-success

.style-info

Actions

Actionbar

Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card.

Card with actions

Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.

Cancel Submit

Card with an actionbar

Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.

Submit

Left and right aligned actions

Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.

Cancel Submit

Double actionbar

Behavior

Single scrollbar

Cards can be given a fixed height with a custom scroll bar.

Scroll Card

Cu conceptam vituperata temporibus has. Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Omnis modus phaedrum an vim, pri ipsum quando no.

Eros facete ponderum et vix. Quo nisl pertinax at, mea ea ullum simul ponderum. Postulant definiebas ius et, quas voluptaria moderatius pro ex, ea augue aeque labitur mea. Cu quo explicari iracundia, et quo primis ceteros moderatius. Veniam ubique laboramus ut pri, cu mea causae docendi. Cum an tritani civibus, est quem error malorum ei, quod fuisset eu sed.

Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.

Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo

Ad ius duis dissentiunt, an sit harum primis persecuti, adipisci tacimates mediocrem sit et. Id illud voluptaria omittantur qui, te affert nostro mel. Cu conceptam vituperata temporibus has.

Hover to see the scroller

Multiple scrollbars

Multiple scrollers can exist in one card.

Divided card

Multiple card bodies with scroller