Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Contact us

This block shows contact information for an area of the bank (or a general number).

Guidelines

Short description

The purpose is to show contact information, either specific to an area of the bank, or in general.

Contact us

When and how to use it

Use this block when you need to display contact information for the bank. Don’t use it to present personal contact information. 

Behaviour

This is a passive component.

Do's and don'ts

  • Consider the amount of information in the block, it is only meant for contact information, so keep it lean

 

  • Consider if you should use the ‘Contact me’ block instead.

 

Writing

Note this!

The component Contact us is only meant for contact information and opening hours, not for engaging text.

Upper and lower case

Don't start each word in headings and labels with upper case. Only use upper case in:

  • The first letter of the first word
  • The first letter of proper names
  • Abbreviations

Weekdays should be capitalized in English but not in Swedish. Monday–Friday but måndag–fredag.

Do’s and don'ts

  • Do use the verb in imperative (prompt) form in the heading: Contact us!
  • Do write the opening hours without the minutes 00 if you want to specify a full hour. If you want to specify a time including for example half hours, use this format: 8–12.30
  • Don’t insert the word between (mellan) when you specify a time interval with a dash. The dash itself is sufficient.
  • Don't add country prefix to the telephone number unless your target audience is international. Most of our communication is national.

 

Specification

  • Icon = pictogram P-101
  • On mobile, click number to call
  • Text is white on all coloured backgrounds, except for yellow which has text in #000000 

Colours

  • Dark green 2
  • Yellow
  • Purple
  • Red
  • Dark blue 1
  • White

 

Examples

Desktop

 

Tablet

 

Mobile

Related patterns & components

Page last updated

Feedback

Was this helpful?