Zur Navigation Zum Inhalt Kontakt Menu Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Overview Base Components Overview Base Components Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Images

What does the element do?

Images support the understanding of texts and loosen up text-heavy pages.

When should the element be used?

Rules

Variants and states

The following styles are distinguished for images:

Key Visual

Formats

Aspect Ratio

Non-Retina

Retina

Retina-HD (iPhone 7)

Tablet 48:25 768x400 1536x800
Desktop

83:30

1328x480

2656x960


4K 83:30 2656x960 2656x960
Mobile 166:133 320x266 640x532 960x798
5K



Info picture

Lazyload

Inside of a teaser

As background (e.g. map)

Imprint Contact Cookie settings