Share bar ​

The share components contain a button or a list of buttons. The most common buttons we can find in a share component are links to social media platforms. Messaging apps could also be included. Additionally, it is possible to share content through more traditional channels like sending it by e-mail or printing.

Share bar

Usage guidelines ​

Using a share component on all pages isn't mandatory, sometimes there's nothing to share!

Even though share components are sometimes ignored, it is essential to give the users the chance to share content effortlessly through different channels. This improves the user experience and gives more visibility not only to that content but to the whole website.

  • Number of Buttons: A share component should contain at least 2 buttons or icons but should not be excessively long. Consider the target of your content and use only the social icons that resonate with it.
  • Order of the buttons: By studying users and their activity on the website, you can discover which are the most common platforms they use and, therefore, which might be the most clicked icons inside a share bar. Always place these ones first.
  • Visibility and placement: The purpose of a share component is to make it easy for users to share content they like. This element should be placed near the content it refers to and be immediately visible.
When to use ​
  • To give the user the chance to share Zurich content.
When not to use ​
  • If you have less than 2 buttons or icons.
  • It is not recommended to add more than 5 icons.
Writing guidelines ​

The share text on the share bar explains what the share bar is about or what the user can do like “share this...”

Language

Use simple and clear language.

Text length

Don't write more than 3-4 words.

Specifications ​

Anatomy ​

Share/bar Anatomy
  1. Background shape (rectangle): its color is predefined
  2. Share text
  3. Icon: a series of up to five icons is possible

Types/Sizes ​

When you want to offer many share icons to the users or even the chance to copy and share a link, we suggest you use Modals with a list of icons divided by type. Otherwise:

Share bar can hold up to 5 buttons, icons.

Long horizontal bar which is fixed and contains a title and a series of share icons.

Share bar

The Share bar is available in Large, Medium, Small and Extra small sizes, both in a full-width and narrow variant.

Share bar sizes

For Mobile, there is only one possible width but there are different options depending on the number of icons and the length of the text.

Styling ​

Share bar is available in a dark and a light mode.

  • The Light version uses Zurich Blue with Gray/white icons.
  • The Dark version uses Zurich White with Zurich Blue icons.
Share bar styling
Docs image
Always control the contrast ratio between the Share Bar and the background color.
Docs image
Don't use color combinations where the contrast between share/bar and background is very low.
Docs image
Use an appropriate title.
Docs image
Don't use different colors for the title and the icons.
Docs image
Don't use different sizes for the icons.

Behavior ​

Positioning ​

When designing a share component, it is very important to consider the placement of that element on the page.

Top of the post: challenging because the users would have to share something yet unknown but still useful since it is immediately visible.

Bottom: practical (when the users scans the content, they can decide if they want to share it) but many won't read the whole content so they might never reach the share element.

In-line: another option is to pin it to the screen so it is always visible.

Left: better than on the right (the users normally read the content from left to right).

Alignment ​

The share bar has one orientation.

Interaction ​

The share/bar is static. The icons have a hover effect and a new window opens on click.

Accessibility guidelines ​

Design considerations ​

  • The share component must have appropriate contrast against the surrounding background.