Skip to main content

Statcard

Use Statcards to easily display large numbers - great for any kind of simple metrics.

The Statcard content type requires a number and description, with optional fields for an associated delta percentage and positive/negative indicator. You can also set the background color to one of the Bootstrap contextual color options, and set the text alignment to left, center, or right.

The Statcard can be placed in the main, main-left, main-right, or right sidebar regions of a page, and can be included in a Grid layout.

The following example shows three Statcards in a grid, with alternate background colors and text positioning for each.

126,235 10.3%

Pageviews

1:07 10.9%

Time on Page

56.86% 9.1%

Bounce Rate

12345

Numbers
Floating Statcards

A Statcard can be positioned to the left or right side of the main content area with wrapping text, as in these examples.

 

123456

Numbers

A floating Statcard would be added just before a General Content block (or between two blocks). Set it to be displayed in the Main content area, and then apply the Width and Float settings. In the first example, the card is set to float to the right, and the width is set to 1/4 of the main content area. The second Statcard is floating left, and the width is set to 1/2.

As with any content that's set to float with wrapping text, the display at smaller window widths could have unusual results. It's recommended to test this by resizing the window before publishing.

Submit a Web Support Ticket