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
≥ 992
S: Max. three in a row
991 - 768
S: Max. two in a row (slider optional)
767 - 320
S: One in a row (slider optional)
Related topics