Adding a Card

You get a framed box with a header and a title that holds other elements, such as text or a button. Use cards to group related content like services, team profiles or price plans.

Add a card

Open your page while logged in: the builder controls appear when you hover the content area. Your first page shows the basics.

1. Hover the column and click + in its control bar, or click Add Elements on an empty page. Open the Content tab and click Card. It lands at the top of the column, without a dialog.
2. Hover it, click More in its control bar and choose Settings. Type a Header, for example Investor Relations.
3. Type the card Title, for example Q3 Results Published.
4. Choose a Type for the card style. Here we pick Primary. The text turns white automatically.
5. Click Save in the dialog.
6. Hover the card and click + in its own control bar, not the column's. The + in the empty card body works too. Add a Button, because a card is a container. Set its label and link as in Button. Then click Save in the toolbar at the top of the content area to store the page.

What you see

Your header and title sit on a card in the colour you picked, with the button inside. In the video, they read Investor Relations and Q3 Results Published on a Primary card. The button is a normal Button element, so you edit and style it on its own. Visitors see it once you save the page and it is published.

Set up your card

Hover the element and open More > Settings in its control bar. Options:

• Header: text in the bar at the top of the card. Leave it empty to hide the bar.
• Title: the heading at the top of the card body.
• Type: the card colour: Default, Primary, Secondary, Success, Info, Warning, Danger, Dark or Light. All but Default and Light use white text.

A card is a container. Add or drag other elements into its body, such as text, an image or a button.

If you don't see it

• Card is not in the Content tab. Your user profile hides it. Ask an administrator to tick Card (Bootstrap 4/5) under Elements in User Profiles.
• It is gone after you reload. The page was not saved. Add it again and click Save in the toolbar at the top of the content area.
• The card shows only a border and nothing inside. No elements are inside it yet. Hover the card, click + in its control bar and add a Text, Image or Button.
• The header bar is missing. The Header field is empty. Hover the element and open More > Settings, then type a header.
• Text on the card is hard to read. Most Type options use white text, which fades on a light colour such as Warning. Pick a darker Type, or Light.

What's next?

Style tab to change spacing and background for your card.

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