ATOMS
ATOMS

Last updated: 25.11.2021

Version: 1.0

Text

Status: Under Refactoring

Typography - text variants

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

Color Variations

Dark-Grey

Grey

Blue

Red

Green

Yellow

Decoration

Bold

Line-through bold

Line-through

uppercase

Main Font Family

Sizes

Micro 11px

Small 13px

Small-plus 14px

Medium 16px

Medium-Plus 18px

Large 24px

Extra 30px

Extra-Plus 36px

Giant 60px

Examples

Bold Line-through small-plus Red -> UVP

Small Blue Bold

H1 Extra-Plus Main

H2 Medium

H3 Small-Plus Bold

H4 Small-Plus Bold

Responsive:

In 2021 we decided to clean out the design system and are from now on working with text variations. These styles are restricted to the a-text class and can be used for headlines, spans and paragraphs. Colors can be combined with any style. It is implemented with the ABEM method, which aligns closely to the previously used BEM method.

Typography - link variants

Ready
The component documented here is fully refactored and can freely be used in shop. Any other implementation of this components should be replaced with the one documented here.

Fluid:

Responsive:

Fluid:

Responsive: