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>