Stage - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses a sectiontag with the z-stageHTML custom attribute.

z-stage ​

The z-stage parameter is the main parameter used to render the stage component.

Welcome to ZDS

Content goes here

The z-stage parameter accepts two modifiers, left and slim.

left ​

The left modifier is used to align the stage content to the left.

Welcome to ZDS

Content goes here

slim ​

The slim modifier is used to reduce the padding of the stage content.

Welcome to ZDS

Content goes here

TIP

You can combine the left and slim modifiers to align the stage content to the left and reduce the padding. The pattern is config="left:slim".

Welcome to ZDS

Content goes here

The content of the Stage component is customizable. Check the stage anatomy guidelines for more details.

Welcome to ZDS

safe-space

Also you can customize the background color of the stage component, using the --z-stage--bg CSS custom property.

Welcome to ZDS

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Stage.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Shape.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/SafeSpace.css" />
Code
html
<section z-stage>
  <main>
    <h1>Stage header</h1>
    <p>Lorem ipsum</p>
  </main>
  <picture>
    <img z-safe-space="4" src="/0.5.0/sample.webp" loading="lazy" />
    <div z-shape="1:flip">
    </div>
  </picture>
</section>