Profile
...
Browser support
...
Parameters
The CSS component uses a <div>
tag.
Attention!
For the CSS component, in order to get rid of the default fallback display (the alt
attribute and the broken image icon), use the onerror
attribute with the fallback src to place an empty SVG that can be set as a global variable. Or use the @zurich/css-components/javascript.js
import.
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
z-profile | string | The main parameter has two components following the pattern:
Attention!
|
status | string | Defines the status of the profile. Possible values are: |
INFO
You can insert a <span>
tag with the initials of the user. Only the first two characters will be displayed. Also it's possible to insert a <img>
tag with the src
attribute pointing to the user's profile picture. Default fallback it's a user icon.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/javascript.js" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Badge.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Profile.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.3.6/@zurich/css-components/javascript.js" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Badge.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Profile.css" />
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.3.6/examples/styles.css" />
<script type="module" src="/0.3.6/examples/params-script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>-</th>
<th>absent</th>
<th>alt. color</th>
<th>outline</th>
<th>with badge</th>
</tr>
</thead>
<tbody>
<tr>
<th>-</th>
<td>
<div>
<div z-profile>AZ</div>
</div>
</td>
<td>
<div>
<div z-profile status="absent">AZ</div>
</div>
</td>
<td>
<div>
<div z-profile="6">AZ</div>
</div>
</td>
<td>
<div>
<div z-profile="outline">AZ</div>
</div>
</td>
<td>
<div>
<div z-badge="text" text="+99" fill="peach">
<div z-profile status="occupied">AZ</div>
</div>
</div>
</td>
</tr>
<tr>
<th>with img</th>
<td>
<div>
<div z-profile>
<img src="/0.3.6-rc.1/sample.png">
</div>
</div>
</td>
<td>
<div>
<div z-profile status="absent">
<img src="/0.3.6-rc.1/sample.png">
</div>
</div>
</td>
<td>
<div>
<div z-profile="6">
<img src="/0.3.6-rc.1/sample.png">
</div>
</div>
</td>
<td>
<div>
<div z-profile="outline">
<img src="/0.3.6-rc.1/sample.png">
</div>
</div>
</td>
<td>
<div>
<div z-badge="text" text="+99" fill="peach">
<div z-profile status="occupied">
<img src="/0.3.6-rc.1/sample.png">
</div>
</div>
</div>
</td>
</tr>
<tr>
<th>with img<br /> fallback</th>
<td>
<div>
<div z-profile>
<img src="/wrong.png">
</div>
</div>
</td>
<td>
<div>
<div z-profile status="absent">
<img src="/wrong.png">
</div>
</div>
</td>
<td>
<div>
<div z-profile="6">
<img src="/wrong.png">
</div>
</div>
</td>
<td>
<div>
<div z-profile="outline">
<img src="/wrong.png">
</div>
</div>
</td>
<td>
<div>
<div z-badge="text" text="+99" fill="peach">
<div z-profile status="occupied">
<img src="/wrong.png">
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>