Profile - Web Component ​

...

Browser support ​

Parameters ​

The Web component uses a <z-profile> tag.

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
config
(optional)		string

The main parameter has two components following the pattern: <size><?:color><?:style>

  • size: Defines the size of the profile. Possible values are: l, m, s
  • color: Defines the color of the profile. Possible values are: 1, 2, 3, 4, 5, 6
  • outline: If outline parameter is present, the profile will be rendered with a border.

Attention!

If the `outline` parameter is present, the `color` parameter will be ignored.
status
(optional)		string

Defines the status of the profile. Possible values are: online, absent,occupied

initials
(optional)		stringDefines the initials of the user. Only the first two characters will be displayed.
image-src
(optional)		stringDefines 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.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/badge.js"></script>
<script type="module" src="/0.3.7/@zurich/web-components/profile.js"></script>
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 | Link Web Component example</title>

    <!-- #region imports -->
    <link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
    <script type="module" src="/0.3.7/@zurich/web-components/badge.js"></script>
    <script type="module" src="/0.3.7/@zurich/web-components/profile.js"></script>
    <!-- #endregion imports -->

    <link rel="stylesheet" href="/0.3.7/examples/styles.css" />
    <script type="module" src="/0.3.7/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>
              <z-profile>AZ</z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-profile status="absent">AZ</z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-profile config="6">AZ</z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-profile config="outline">AZ</z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-badge config="text" text="+99" fill="peach">
                <z-profile status="occupied">AZ</z-profile>
              </z-badge>
            </div>
          </td>
        </tr>
        <tr>
          <th>with img</th>
          <td>
            <div>
              <z-profile image-src="/0.3.7/sample.png"></z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-profile image-src="/0.3.7/sample.png" status="absent"></z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-profile image-src="/0.3.7/sample.png" config="6"></z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-profile image-src="/0.3.7/sample.png" config="outline"></z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-badge config="text" text="+99" fill="peach">
                <z-profile image-src="/0.3.7/sample.png" status="occupied"></z-profile>
              </z-badge>
            </div>
          </td>
        </tr>
        <tr>
          <th>with img<br /> fallback</th>
          <td>
            <div>
              <z-profile image-src="/wrong.png"></z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-profile image-src="/wrong.png" status="absent"></z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-profile image-src="/wrong.png" config="6"></z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-profile image-src="/wrong.png" config="outline"></z-profile>
            </div>
          </td>
          <td>
            <div>
              <z-badge config="text" text="+99" fill="peach">
                <z-profile image-src="/wrong.png" status="occupied"></z-profile>
              </z-badge>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>