Herofigure

This component visualizes key figures. There are two variations: herofigure (content) and herofigure (tiles). Use this component in corporate color. All elements have the same color.

Example herofigure (content)

Herofigure (content)

Use in corporate color in L or S on article pages.

L herofigures are centered and can optionally be used with a background image.

Contains:
a. Number
b. Unit. Size: 1/3 height of the number. Placement options: either subscript or superscript
c. Description, centered
e. Optional background image, ratio 16:9, opacity max. 30%

S herofigures are aligned left. No option for background image. If there is a need for herofigure with image, please use herofigure tiles, see below.

Contains:
a. Number
b. Unit. Size: 1/3 height of the number. Placement options: either subscript or superscript
d. Description, left aligned

≥ 768

L: One in a row (centered)
S: Max. three in a row (aligned left)

767 - 320

L: One in a row (centered)
S: One in a row (centered/ slider optional)

Example herofigure (tiles with padding)

Herofigure (tiles)

Without padding
Use in corporate color, in S, on plain sites without background images or background colors.

Contains:
a. Number
b. Unit. Size: 1/3 height of the number. Placement options: either subscript or superscript.
c. Description
d. Infographic

Teasers with padding
Use in S on sites containing background images or background colors.

Contains:
a - d. In corporate color or white (depends on BG color)
e. Background corporate color or white
f. Background image or background color