Share bar

...

Browser support

...

Parameters

The CSS component uses the <nav> tag with the z-share-bar HTML custom attribute.

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

Name	Type	Description
z-share-bar	string	Custom attribute for the share bar component
content	string	The quote content
social	object	The social media links

INFO

Check the z-share-bar anatomy to know the specifications for this component. Use the Playground to see how you can customize this component.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/ShareBar.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Icon.css" />

Code

<nav z-share-bar>
  <div>Share text</div>
  <ol>
    <li>
      <a href="#"><i z-icon="facebook:outline"></i> </a>
    </li>
    <li>
      <a href="#"><i z-icon="linkedin:outline"></i> </a>
    </li>
    <li>
      <a href="#"><i z-icon="instagram:outline"></i> </a>
    </li>
    <li>
      <a href="#"><i z-icon="twitter:outline"></i> </a>
    </li>
    <li>
      <a href="#"><i z-icon="youtube:outline"></i> </a>
    </li>
  </ol>
</nav>