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:

NameTypeDescription
z-profilestring

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.
statusstring

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

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>