Key Numbers component

put your key numbers on display

  • use images as background
  • add Recaps to highlight information
  • add links and buttons

The Key Numbers component lets you highlight key numbers to give the viewer a first overview of a product.

on this page:
CMS settings , Opens In New Window Front-end examples , Opens In New Window
Step by step , Opens In New Window

Introduction

The Key Numbers component can contain up to 3 Recaps, a background image, links and a Scroll Element. The Recaps consist of a title, value and text field, that are used to present your key numbers. The Recaps will fade-in if you scroll to down to the component.

Glossary:

Example:

CMS settings

tab: General

In the General tab of the Key Numbers component, the Theme, headline, text style and size can be configured.

tab: Image

tab: Recaps

In the Recaps tab of the Key Numbers component, the actual key numbers that will be placed on the component is configured.

Editorial hint:

BB Codes  

Since there is no Rich Text Editor for writing the textual content of the component, it is helpful to use BB Codes for styling. You can insert a line break or simply make some text bold, italic or red.

tab: Links

Front-end examples

1 Recap  |  Thin: Checked  |  Background Image 

2 Recaps  |  Thin: Checked  |  Background Image 

3 Recaps  |  Thin: Checked  |  Background Image 

Thin: Unchecked  |  Background Image 

Thin: Checked  |  Background Image 

With Headline  |  Text Style: Bright Text  |  Thin: Checked  |  Background Image 

With Headline  |  Text Style: Dark Text  |  Thin: Checked  |  Background Image 

Theme: Transparent  |  Thin: Checked  |  No Background Image 

Theme: White  |  Thin: Checked  |  No Background Image 

Theme: Light Blue  |  Thin: Checked  |  No Background Image 

Theme: Blue  |  Thin: Checked  |  No Background Image 

Theme: Dark Blue  |  Thin: Checked  |  No Background Image 

Theme: Light Grey  |  Thin: Checked  |  No Background Image 

Theme: Grey  |  Thin: Checked  |  No Background Image 

Theme: Dark Grey  |  Thin: Checked  |  No Background Image 

Theme: Light Orange  |  Thin: Checked  |  No Background Image 

Theme: Green  |  Thin: Checked  |  No Background Image 

With Links |  Thin: Checked  |  Background Image 

With Scroll Element |  Thin: Checked  |  Background Image 

Step by step

1

2

3

Related topics

Used recurring elements