We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Card

An all-around flexible and composable component

Features

  • Add any content to card body
  • With or without header
  • With or without footer

  • Add icons to header
  • Custom colorise header and footer
  • Individual font and style settings

Concept

  • Select whether to display a header
  • Select whether to display a footer
  • Add as many header or footer elements as you like
  • Add any stack to the card body
  • A card is best placed inside a column

Header Text

Content Stack here
Morgan Grimes
Assistant Manager
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Setup

You can select to include a header as well as a footer.

Header Text

Content Stack here

Header Text

Content Stack here
Content Stack here

Colors

You can set card-wide colors for the header and the footer

Header Text

Content Stack here

Header

You can create as many Header items as you like. They will be displayed in a single row.

Alignment

To align the card header, use the "left" and "center" options.

Layout

You can choose between four layouts:
  • header text only
  • header text with icon left
  • header text with icon right
  • header text with icon left and right

Extra Formatting

You can create special layouts with the included Font and Style stacks, which go way beyond the standard options.

Card Content

Drop any stack here as the main content.

Footer

You can create as many Footer items as you like. They will be displayed in a single row.

Link

You can format the entire Footer item as a link using the Add Link option or create a link using the text formatting feature.

Color

In addition to the card-wide color setting for the footer area, each footer item can be coloured individually.

Remark

Custom link colors are not shown in Edit Mode.