Skip to content

Style your cards

Give your cards a look that fits your site: a colour scheme from the card's Type, rounded corners and a shadow from the Style panel. At the end you have a card you can repeat across a row for features, team members or prices. To place a card on the page first, see Adding a Card.

Style a card

  1. Hover the card, open More and choose Settings.
  2. Under Type, choose Light.
  3. Open the Style panel.
  4. Set Border radius to 8.
  5. Set Drop shadow to 2.
  6. Click Save.

What you see

The card has a light background, rounded corners and a soft shadow. Its Header bar sits at the top, its Title opens the body, and the elements you added inside follow below.

A Type colours the whole card, not only the header. Primary, Secondary, Success, Info, Warning, Danger and Dark fill the card with that theme colour and make the text white. Light gives a light background with normal text. Default leaves the card to your theme.

Settings

Setting Where What it does
Header General Text in a bar at the top of the card; leave it empty for no bar
Title General A heading at the top of the card body
Type General The colour scheme of the whole card; default Default
Background, Font color Style Your own colours, when Type is Default
Border radius Style Rounded corners, in pixels
Drop shadow Style Depth, from 1 to 5
Border (box model), Border style, Border color Style A frame on one or more sides

Card patterns

  • Flat card: Border style Solid, a light Border color, Border radius 4, no shadow.
  • Elevated card: Drop shadow 2, Border style None, Border radius 8.
  • Highlighted card: set the left side of Border in the box model to 4, Border style Solid and an accent Border color.
  • Card that lifts: Drop shadow 1 in Style and 4 in Hover style; see Make elements react on hover.

Cards in a row

For a grid of feature cards, team members or prices:

  1. Add a row and pick a layout with three or four equal columns.
  2. Add a card to each column and give every card the same Type and Style values.
  3. Open the row's More menu, choose Settings and switch on Equal-height columns.

The columns line up, but each card stays as tall as its content. Keep the text of each card about the same length, so the cards end at the same height. For a pricing table, highlight the recommended plan with another Type or a deeper Drop shadow.

If you don't see the style

  • Background or Font color in the Style panel has no effect. A Type other than Default sets the card's colours with theme classes that win over the Style panel. Set Type to Default and choose your own colours.
  • White text on a coloured card is hard to read. The Warning and Info colours of many themes are pale, and these types always set white text. Choose a darker Type, or Light, which keeps the normal text colour.
  • The shadow does not show. Drop shadow is 0, which means no shadow. Set it to 1 or higher.

What's next?

Something wrong or missing on this page? Report it or edit the page.