The CERN toolbar is a key branding element that identifies a website as belonging to the CERN web. It must be implemented in a standard way so that users who see it in different contexts get the same experience across multiple sites.  See an example of the implementation standard.

The toolbar provides basic functions:

• A link to the CERN homepage - https://home.cern
• A link to the directory - http://cern.ch/directory
• A link to sign in via CERN's single sign on service

Guidelines and restrictions

The CERN toolbar:

• Must be used by any site hosted at CERN on a web.cern.ch, cern.ch or cern URL, and its use is mandatory under the design guidelines
• Must be the first element on the page
• Must not deviate from the standard
• Authentication must only ever use CERN single sign on via https://login.cern.ch
• Typography, colours and icons must not be customized
• Translation sets are available in English and French. The toolbar must not be translated into other languages
• No further elements such as logos, links or contextual elements may be added to the toolbar
• Except in specific circumstances, all elements of the toolbar must be implemented

Typography

The CERN toolbar must use the PT Sans typeface. If your web page or application already serves this font you should only serve it once.

CERN toolbar on https

Note that there are external assets referenced via http. If you are serving to an application or site on https you should localise these resources.

Authenticated user types and multifactor authentication

On larger viewports the CERN toolbar shows the username, method of authentication (including the federation authority) and whether multifactor authentication was used. At mobile sizes, a simple sign-out link is provided.

Additional information is available to the user via the title element (generally seen on :hover, depending on the user agent):

CERN registered

<li>Signed in as: <a href="https://cern.ch/account" title="Signed in as Mario Rossi (mrossi)">mrossi (CERN)</a></li>

Example of CERN toolbar for authenticated CERN-registered users 

CERN shared

<li>Signed in as: <a href="https://cern.ch/account" title="Signed in as Mario Rossi (libframe)">libframe (CERN)</a></li>

Example of CERN toolbar for authenticated CERN-shared users

HEP trusted

<li>Signed in as: username (Institute name)</li>

Example of CERN toolbar for authenticated HEP-trusted users

Verified external

<li>Signed in as: <a href="https://cern.ch/account" title="Signed in with a verified external account">johnnylongname@yahoo.fr</a></li>

Example of CERN toolbar for authenticated verified-external users

Unverified external

<li>Signed in as: johnnylongname@yahoo.fr (Facebook)</li>

Example of CERN toolbar for authenticated unverified-external users

Examples

1. Desktop - anonymous users

The CERN toolbar as seen on wider viewports by unauthenticated users

2. Desktop - authenticated CERN-registered user

The CERN toolbar as seen on wider viewports by a CERN-registered user. The authentication authority (CERN) is displayed after the username.

3. Desktop - anonymous users (directory)

When the toolbar is seen on the directory page the link becomes a tab, tying the bar to the page itself. This is also true of the CERN sign in page.

4. Desktop - CERN-registered user with multifactor authentication

Users who have used multifactor authentication have a visual clue about the increased strength of their authentication method.

5. Mobile - anonymous users

At mobile sizes the toolbar is pared down to basics.

6. Mobile - authenticated users

At mobile sizes the toolbar looks the same for all types of authenticated user.