Skip to content

Stage - CSS Component

The Stage component can be used imported from:

Playground

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

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example