Stage banner - CSS Component โ
Browser support โ
Construction โ
The CSS component uses a section
tag with the z-stage-banner
HTML custom attribute.
z-stage-banner
โ
The z-stage-banner
parameter is the main parameter used to render the stage component.
The Stage Banner CSS component comesthree variants: Shape
, Pictogram
and Image
.
The shape
variant can be configured with the following parameters:
left
- Puts the shape on the left side of the banner.center
- aligns the content to the center.
Welcome to ZDS
Content goes here
Welcome to ZDS
Content goes here
Welcome to ZDS
Content goes here
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/design-tokens/Pictograms.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/StageBanner.css" />
<link rel="stylesheet" href="/0.4.3/@zurich/css-components/Pictogram.css" />
Code
html
<section z-stage-banner>
<div z-pictogram="gesture-risk">
</div>
<main>
<h6>Category lorem ipsum</h6>
<h3>Headline lorem ipsum</h3>
</main>
</section>