Stage banner - CSS Component ​

Browser support ​

Construction ​

The CSS component uses a sectiontag with the z-stage-bannerHTML 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


Test image
Welcome to ZDS

Content goes here

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.0/@zurich/design-tokens/Pictograms.css" />
<link rel="stylesheet" href="/0.4.0/@zurich/css-components/StageBanner.css" />
<link rel="stylesheet" href="/0.4.0/@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>