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.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.3/@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>