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.

Design Library

Defaults

Default styles for common elements, such as headlines, links and body font family.

Available in

Component meta

Component identifier

seb-defaults

Tags

Global

Design principles

---
Guidelines

Short description

Do's and don'ts

Specification

Specification

Font-weight
  • Light 300
  • Regular 400
  • Medium 500
  • Bold 700

 

Examples

Desktop (above)

Tablet (above)

Mobile (above)

 

Typography

Desktop (above)

Tablet (above)

Mobile (above)

 

Type scale for desktop, tablet and mobile

Have a look at the different sizes of the SEB Sans Serif type face.

 

1. For desktop

Display

  • font-size 96
  • font-weight Bold
  • line-height 100
  • color #333333

 

H1

  • font-size 48
  • font-weight Bold
  • line-height 56
  • color #333333

 

H2

  • font-size 32
  • font-weight Bold
  • line-height 40
  • color #333333

 

H3

  • font-size 24
  • font-weight Bold
  • line-height 32
  • color #333333

 

H4

  • font-size 20
  • font-weight Medium
  • line-height 28
  • color #333333

 

H5
  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #333333

 

H6
  • font-size 14
  • font-weight Regular
  • line-height 20
  • color #333333

 

Body text

  • font-size 16
  • font-weight Regular
  • line-height 24
  • color #333333

 

Inline-links

  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #007AC7

___________________________________________________________

2. For tablet

Display

  • font-size 64
  • font-weight Bold
  • line-height 72
  • color #333333

 

H1

  • font-size 40
  • font-weight Bold
  • line-height 48
  • color #333333

H2

  • font-size 24
  • font-weight Bold
  • line-height 32
  • color #333333

H3

  • font-size 20
  • font-weight Bold
  • line-height 28
  • color #333333

 

H4

  • font-size 20
  • font-weight Medium
  • line-height 28
  • color #333333

 

H5
  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #333333

 

H6
  • font-size 14
  • font-weight Medium
  • line-height 20
  • color #333333

 

Body text

  • font-size 16
  • font-weight Regular
  • line-height 24
  • color #333333

 

Inline-links

  • font-size 16
  • font-weight Regular
  • line-height 24
  • color #007AC7

___________________________________________________________

3. For mobile

Display

  • font-size 48
  • font-weight Bold
  • line-height 56
  • color #333333

 

H1

  • font-size 32
  • font-weight Bold
  • line-height 40
  • color #333333

 

H2

  • font-size 24
  • font-weight Bold
  • line-height 32
  • color #333333

 

H3

  • font-size 20
  • font-weight Bold
  • line-height 28
  • color #333333

 

H4

  • font-size 20
  • font-weight Medium
  • line-height 28
  • color #333333

 

H5
  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #333333

 

H6
  • font-size 14
  • font-weight Regular
  • line-height 20
  • color #333333

 

Body text

  • font-size 16
  • font-weight Regular
  • line-height 24
  • color #333333

 

Inline-links

  • font-size 16
  • font-weight Medium
  • line-height 24
  • color #007AC7

Page last updated

Feedback

Was this page helpful?