Profile - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

The CSS component uses a <div> tag.

z-profile ​

The z-profile is the main HTML custom attribute used to render the profile CSS component. If modifiers are omitted, the default m size with the Zurich Blue background will be applied.

Both, background and foreground color can be customized using the --z-profile--bg and --z-profile--color custom tokens, respectively.

The z-profile has three optional modifiers, that can be applied in order using color(:) as the separator. The pattern would be: <size><?:color><?:style>

  • The first modifier is size and it defines the size of the profile. The default value is m, being omitted from the parameter. The possible values for size are: s or l. Check the size section.
  • The second modifier is color and it defines the color of the profile. The possible values for color are: 1, 2, 3, 4, 5, 6. Check the theme section for the color palette. This attribute uses the --z-profile--bg CSS custom property to set the color of the profile.
1
2
3
4
5
6
  • The third modifier is style and it can receive the value outline to render the profile with a border. If the outline modifier is present, the color modifier will be ignored.

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.

AZ
Alternative text

status ​

The status attribute is used to define the status of the profile. The possible values are: online, absent, occupied.

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.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<script type="module" src="/0.5.3/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.5.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.3/@zurich/css-components/Badge.css" />
<link rel="stylesheet" href="/0.5.3/@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 -->
    <script type="module" src="/0.5.3/@zurich/css-components/javascript.js"></script>
    <link rel="stylesheet" href="/0.5.3/@zurich/css-components/base.css" />
    <link rel="stylesheet" href="/0.5.3/@zurich/css-components/Badge.css" />
    <link rel="stylesheet" href="/0.5.3/@zurich/css-components/Profile.css" />
    <!-- #endregion imports -->


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

</html>