Tag - CSS Component ​

Browser support ​

Construction ​

The CSS component uses a <div> tag with the z-tag HTML custom attribute.

z-tag ​

The z-tag parameter is the main parameter used to render the tag component. Check the tag styling list here. Being omitted the style modifier, the tag will use the default style with Azure background color.

Tag label

Other styling options are teal, moss, lilac, candy, peach, mint, lime, lemon and powder-pink.

Tag label
Tag label
Tag label
Tag label
Tag label
Tag label
Tag label
Tag label
Tag label

Both background and text color can be customized using the --z-tag--bg and --z-tag--color CSS custom properties respectively.

Tag label

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/Tag.css" />
Code
html
<div z-tag>Tag label</div>
<div z-tag="teal">Tag label</div>
<div z-tag="moss">Tag label</div>
<div z-tag="lilac">Tag label</div>
<div z-tag="peach">Tag label</div>