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.

Druck

Example herofigure (content)

example.jpg
Druck

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
Druck

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.