Skip to content

Promo - CSS Component

The Promo component can be used imported from:

Playground

Construction

The CSS component uses the <section> tag with the z-promo HTML custom attribute. Check the promo anatomy for more information.

z-promo

The z-promo attribute is the main attribute to style the promo component.

Promotional header

Promotional content

The z-promo attribute has two modifiers:

left

The left change the orientation of the promo component to the left.

Promotional header

Promotional content

narrow

The narrow change the width of the promo component to a narrow width.

Promotional header

Promotional content

The background color of the promo component can be customized using the --z-promo--bg CSS custom property.

Promotional header

Promotional content

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example