Promo - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

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.

promo image

Promotional header

Promotional content

The z-promo attribute has two modifiers:

left ​

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

promo image

Promotional header

Promotional content

narrow ​

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

promo image

Promotional header

Promotional content

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

promo image

Promotional header

Promotional content

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.2/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.2/@zurich/css-components/Chip.css" />
Code
html