Zur NavigationZum InhaltKontaktMenuFind componentOverview Web (Legacy)PrinciplesFoundationAccessibilityDesign SystemGuidelinesDeutschFrançaisItalianoEnglishOur design principlesUser-centredRecognisableInclusiveReducedHolisticSelf-explanatoryTask-orientedAppropriateSBB Brand portalLogoDigital clockRights of useBase colorsFunctional colorsOff brand colorsIconsTimetable iconsPictogramsAbout accessibilityÜber diesen GuideContactFurther informationProduct OwnerUser ResearchInteraction DesignVisual DesignDevelopmentContent DesignTestingWhat is a design system?DesigningCodingFAQHelpProcessContributionContactOverviewBaseComponentsOverviewReleasesDesign TokensKomponentenOverviewBaseInformationenOverviewBaseComponentsSense & PurposeCommunity AssetsInstructionsPower-AppsDigital banner adsSAP Design GuidelinesApp IconsGhettobox Overview
What does the component do?
It is used to display cross-page messages.
When should the component be used?
For information and errors that concern an entire application.
Rules
The ghettobox can be hidden with the X-icon until the next page reload.
The ghettobox is always directly below the header.
The ghettobox is not sticky but instead scrolls away with the content.
The text can be multi-line.
There is always an icon in a red area (HIM/CUS icons) in front of the text.
If several ghettoboxes are used at the same time, they are arranged beneath one another.
States and variants
Variants
Default
Link
This variant has the following states:
Default
Hover
* If the text contains another link, the ghettobox distinguishes between the statuses of normal and hover.{.lead} * There is always an arrow icon at the end of the text.{.lead} * The entire area of the ghettobox can be clicked on and opens the link inserted (except above the X-icon).{.lead}