Pictogram - CSS Component
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
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
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.
z-pictogram
The z-pictogram
parameter is the main parameter used to render the pictogram component. Make sure that you specify, correctly, the name
of the pictogram you want to use. Check the pictograms catalog
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Pictograms.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Pictogram.css" />
Code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZDS | Chip CSS example</title>
<!-- #region imports -->
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Pictograms.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Pictogram.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.5.0/examples/styles.css" />
<script type="module" src="/0.5.0/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>camping</th>
<th>earth</th>
<th>plant</th>
</tr>
</thead>
<tbody>
<tr>
<th>-</th>
<td>
<div>
<div z-pictogram="camping"></div>
</div>
</td>
<td>
<div>
<div z-pictogram="earth"></div>
</div>
</td>
<td>
<div>
<div z-pictogram="plant"></div>
</div>
</td>
</tr>
<tr>
<th>dark</th>
<td>
<div>
<div z-pictogram="camping:dark"></div>
</div>
</td>
<td>
<div>
<div z-pictogram="earth:dark"></div>
</div>
</td>
<td>
<div>
<div z-pictogram="plant:dark"></div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>