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

Welcome to ZDS

Content goes here

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/design-tokens/Pictograms.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/StageBanner.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/Pictogram.css" />

Code

<section z-stage-banner>
  <div z-pictogram="gesture-risk">
  </div>
  <main>
    <h6>Category lorem ipsum</h6>
    <h3>Headline lorem ipsum</h3>
  </main>
</section>