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)

example.jpg
.

Herofigure (content)

herofigure content.jpg

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

s herofigure.jpg

responsive behaviour.jpg

≥ 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)

exmaple herofigure tiles with paddig.jpg
.

Herofigure (tiles)

herofigure tiles.jpg

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

responsive behaviour 2.jpg

≥ 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

 

Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.