Use the Card widget to highlight a single value or message, such as a count, a status, or a summary line.

When to use it #

A Card widget makes one thing prominent. Use it for:

• a headline figure at the top of a page;
• the status of the object a details page is about;
• a short label with an icon that helps users recognize where they are;
• a row of two or three cards summarising a page below them.

Where you need several values in a structured layout, use a Text Grid widget. Where you need paragraphs, use a Text widget.

Add a Card widget #

To add a Card widget:

1. Open the page and enable Layout edit mode.
2. Select Add a widget.
3. Select the Card tile, or drag it onto the page.
4. Enter a Widget Title.
5. Configure the card’s text, style, and icon.
6. Select Create.
7. Save the page layout.

Configuration #

Basic Information #

Widget Title is required, and Widget Description is optional. Neither is shown on the card, and the card dialog offers no visibility control for them, so the title serves only to identify the widget while you build. The card’s own text carries the message.

Card Properties #

Main Text is required and is the card’s headline. It accepts $(parameterName), so a card can show a value from the page’s parameters.

Header Text is the smaller line above it, used as a caption for the main text. It also accepts parameters.

A card that reads

Header Text:  Annual revenue
Main Text:    $(account.annualRevenue)

shows the label and the figure together, which is the pattern most cards follow.

Card Layout places the icon relative to the text, with Left to Right putting the icon first and the text left-aligned, and Right to Left putting the icon last and the text right-aligned. It defaults to Left to Right.

Card Style sets the colour, from Default, Primary, Secondary, Info, Success, Warning, and Error, and defaults to Primary. Use colour to carry meaning – Success for a healthy figure, Warning for something needing attention – rather than for decoration.

Text size #

Two sliders set the size of each line independently: Main Text Font Size and Header Text Font Size, each between 10 and 24 pixels. The main text defaults to 18 and the header text to 14.

Scale font size with portal font size decides whether those sizes are absolute or relative. Switched on, the card’s text grows and shrinks with the font size a user has chosen in their own settings, which keeps the page consistent for anyone who has increased it for readability. Switched off, the card stays at the size you set regardless.

It is off by default. Switch it on unless the card has to line up precisely with something else.

Icon #

Icon Type offers two sources, Icon and Url. Choose Icon and select the preview to pick from the icon library, or choose Url and enter the address of an image in Url.

Library icons take the card’s style colour. An image from a URL does not, so it keeps its own colours.

Preview #

The dialog shows a live preview of the card as you configure it. Use it – the interaction between layout, style, icon, and the two font sizes is much easier to judge by eye than by reading the fields.

Recommendations #

When using Card widgets:

• put one value on a card, not a sentence;
• use Header Text for the label and Main Text for the value, consistently, so a row of cards scans cleanly;
• give cards on the same row the same style unless the colours mean something;
• switch Scale font size with portal font size on, so the card respects the user’s own settings;
• keep the card wide enough that the main text does not wrap, and check it at a narrow width.