Pictogram โ
...
Browser support โ
...
Parameters โ
The CSS component uses a <div>
tag. Using the z-pictogram
HTML custom attribute referencing the name of the pictogram as a value will display the pictogram CSS component. Check te pictograms catalog
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
z-pictogram | string | The name of the pictogram to be displayed |
Attention!
Make sure you import the proper CSS stylesheet. Check CSS components packages here. Pictograms
are excluded of the general import and need to be loaded manually. Check how you can import pictograms here
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/design-tokens/Pictograms.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Pictogram.css" />
Code
html
<div z-pictogram="camping"></div>
<div z-pictogram="earth"></div>
<div z-pictogram="plant"></div>