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.

Change log - design

An iterative design process requires change. This is the page that keeps track on them.

Column customiser

New component: 2021-05-06

What is this?

Lets the user customise coloumns to display in a table on a slide-out.

Details

https://designlibrary.sebgroup.com/components/component-columncustomiser


 

Language selector

Updated: 2020-03-10

Change

The design has changed to suit the Nexus use case better. No details, sorry!

Details

https://designlibrary.sebgroup.com/components/component-languageselector


 

Search

New component: 2021-03-08

What is this

The search component has been designed and described.

Details

https://designlibrary.sebgroup.com/components/component-search


 

Date picker - Non-selectable dates

Updated: 2021-02-01

Change
  • Background: #E6E6E6
  • Number: #B3B3B3
  • Previous/next month: #E6E6E6
  • Background previous/next month: #FFFFFF
Reason

The date picker component now has a feature that shows the user that a date can not be selected.

Details

https://designlibrary.sebgroup.com/components/component-datepicker


 

Slide toggle

Updated: 2020-11-13

Change
  • The standard version has adjusted sizes, states and colours
  • A new mobile-friendly larger version has been added
Reason

The slide toggle was too small for a mobile context. We also noticed that the default version for desktop needed to be updated and specified better. 

List of changes

All states

  • Changed border radius to 0.625rem
  • Changed height from 1.25rem to 1.5rem
  • Changed switch size from 1.125rem to 1.25rem
  • Changed with to 2.75rem from 2.5rem
  • Added version with and without label

 Normal/Off

  • Changed background color from Grey 400 to Grey 300
  • Changed state name to “Off”

 Hover

  • Removed blue ring in switch
  • Changed left margin of switch to 0.375rem

Focus

  • Removed blue ring in switch
  • Added border: 1px solid #007AC7; (Blue Dark 2)
  • Added box-shadow: 0 0 4px 1px #41B0EE; (Blue)

Pressed/On

  • Changed state name to “On”
  • Changed background from Blue to Green Dark 1

Pressed & Hover

  • Change state name to "On & Focused"
  • Removed blue ring in switch
  • Changed background from Blue to Green Dark 2
  • Changed right margin of switch to 0.375rem

Contextual helpbutton

  • On & Off have symbols with contextual help button for both default & large size versions

Default Size

  • Component has a Default size

Large Size

  • Added a Large Size version of the component
Details

See the full specification here:

https://designlibrary.sebgroup.com/components/component-slidetoggle


 

Link colour

Updated: 2020-10-28

Change

The blue link colour has been updated to #0062BC.

Reason

To increase the contrast to work better on both white, grey and other coloured backgrounds. To synk link colours between shells and public web sites.

Details

https://designlibrary.sebgroup.com/foundation/our-design/visual-identity/colours/


 

Toast notification

New component: 2020-10-22

What is this?

A small message that shows up in a box at the bottom of the screen and might disappear on its own after few seconds.

Details

See the full specification here: https://designlibrary.sebgroup.com/components/component-toast-notifications


 

Grey background

Updated: 2020-10-21
Change

The grey background has been updated to #EEEEEE.

Reason

To increase the contrast. To synk background colour between shells and public web sites.

Details

https://designlibrary.sebgroup.com/foundation/our-design/visual-identity/colours/


 

Filter tag

New component: 2020-10-09

What is this?

Filter tags display possible options for the user to choose between.

Details

See the full specification here:https://designlibrary.sebgroup.com/components/component-filtertag


 

Pagination

Updated: 2020-09-01

Change

The height has been updated 44 px/2.75 rem.

Reason

To be the same height as most other components.

Details

 

Segmented control

Updated: 2020-09-01

Change

The active colour Dark Blue 2 (#007AC7);

Reason

To follow the same colour pattern as button.

Details

 

Focus state

Updated: 2020-06-29

Change

Blue focus state is a gradient 4 px outline in seb-blue/#41B0EE:

box-shadow: 0 0 4px 1px #41B0EE;

 

Red focus state is a gradient 4 px outline in seb-red/#F03529:

box-shadow: 0 0 4px 1px $seb-red;
Reason

This time we focused on the focus state for blue and red buttons but the goal is to bring a consistency throughout our components and frameworks, so these colours could be applied on all interactive components.

Details

https://github.com/sebgroup/design-library/issues/82


 

Sell button

New component: 2020-06-26
What is this?

The sell button is used to help the user differentiate between the buy and sell buttons.

Details

See the full specification here:

https://github.com/sebgroup/design-library/issues/116


 

Related blocks

Updated: 2020-05-12

Change

The content blocks (mostly used as Epi-blocks for public web) "Related content", "Promo block" and "Story block" have an updated design. They also have new names that group them under Related blocks:

  • Related Small, Medium and Large
Details

Component: Related small


 

Slider

Updated: 2020-04-17

Change

For example (detail in the specification, link below:

  • No chevron
  • Line: Height 4 px, rounded corners
  • Thumb size: 24 x 24 px
  • Hover state: Thumb is enlarged
  • Focus state: Thumb is framed
Details

Component: Slider


 

Secondary button

Updated: 2020-04-15

Change

The secondary button needs a transparent background. It used to be white.

Reason

This button is commonly used on white or grey backgrounds and took too much focus for being a secondary button.

On any other backgrounds, colours, images, etc, ghost buttons are preferred.

Details

Component: Button


 

Datepicker - with range

Updated: 2020-03-27

Reason

This alternative date picker is for when the user has to enter a time period and you don't want two separate date pickers.

Details

Component: Date picker


 

Grey colours

Updated: 2020-03-23
Change
  • Design Library will use the same naming convention as SEB Bootstrap (from "grey 8" to "grey 800")
  • Design Library will change colours 100-700 and use same grey shades as SEB Bootstrap
  • Bootstrap will change the two darker colours Grey 800 (from #343434 to #333333) and Grey 900 (from #212121 to #1A1A1A)
Correct grey shades

$white:    #fff !default;
$gray-100: #f8f8f8 !default;
$gray-200: #e9e9e9 !default;
$gray-300: #dedede !default;
$gray-400: #cecece !default;
$gray-500: #adadad !default;
$gray-600: #868686 !default;
$gray-700: #494949 !default;
$gray-800: #333333 !default;
$gray-900: #1A1A1A !default;
$black:    #000 !default;

Reason

Our designers and developers must have the same colour references. The original reason was that the disabled colours sometimes blended in with the background. Then it was noted that colours were out of synk.

Details

See the full specification here: 
https://designlibrary.sebgroup.com/visual-identity/colours/#swatches


 

Grey background

Updated: 2020-03-23
Change
  • Background colour: Grey 100 #F8F8F8
Reason

Background colour can be grey or white. After discussions between Design management and Bootstrap, we have decided on which grey colour.

Details

See the full specification here: 
https://designlibrary.sebgroup.com/visual-identity/colours/


 

Shadow on cards

Updated: 2020-03-20

Change
  • Drop shadow height: 0.375 rem (used to be 0.125 rem)
  • Drop shadow colour: Black (used to be Grey 2)
Reason

There are too many variations because the design has been unspecified. The goal is to align the design of all our components and frameworks.

Details

See the full specification here: Component: Card


 

Slide-up sheet

New component: 2020-03-20

What is this?

Slide-up sheet is a white area sliding up from bottom of the viewport that is best suited for a hybrid context

Reason

We are investigating how components should look and behave in a hybrid context, a design bridge between web and native app. The slide-up behaviour is the hybrid option for a slide-out modal.

Details

Check out the details here: Component: Slide-out


 

Input field - small

New component: 2020-03-18

What is this?

A smaller size of input fields.

Reason

A smaller size of input fields that can be used inside tables and lists.

Details

Check out the details here: Component: input


 

Contextual help button

New component: 2020-03-18

What is this?

A button that presents an explanation to a problem/question, with a tool tip or a slide-out modal.

Reason

This is not a new component as such but it was time to decide the details on it, to avoid having so many versions.

Details

Check out the details here: Component: Contextual help button


 

Slide-out modal

Updated: 2020-03-09

Change
  • Close icon: FontAwsome icon "times", regular
  • Two alternative headers (with multiple headers and navigation)
  • Padding for desktop: 2 rem
  • Padding for mobile: 1 rem. Another 1 rem at the top (to avoid clashing with mobile features)
Reason

The Slide-out modal now has a better description, and has been synked so the component is consistent cross-frameworks.

Details

See the full specification here: Component: Slide-out


 

Name on a button variation

Updated: 2020-01-28

Change
  • The button Button link that looks like a link used to be called Alternative button.
Reason

The new name says what it is. This was changed a very long time ago but the images in Design Library were only recently updated.

Details

See the full specification here: Component: Button


 

Error indicator for checkbox and radio button

Updated: 2020-01-21

Change
  • The component and lable text is framed in red border. Red error text is placed under and near the component.
Reason

The design of error indicators on form components was not specified so can vary depending on what framework code is based on.The goal is to align the design of all our components and frameworks. 

Details

See the full specification here: 


 

Tooltip

Updated: 2020-01-14

Change
  • The background colour is changed to #1A1A1A to align to SEB Bootstrap's tooltip
Reason

The goal is to align the design of all our components and frameworks. 

Details

See the full specification here: 
https://designlibrary.sebgroup.com/components/tooltip/#specification


 

Chip

New compontent: 2020-01-13

What is this?

Chips display a filter or a property and can come with the possibility to remove the property.

Details

See the full specification here: 
https://designlibrary.sebgroup.com/components/chips/


 

Badge

New component: 2020-01-13

What is this?

Badges highlights status'.

Details

See the full specification here: 
https://designlibrary.sebgroup.com/components/badge/


 

Tab component

Updated: 2019-10-25

Change
  • States for hover and focused have been updated (see specification)
  • Overflow tab is left-aligned (used to be right-aligned)

**Mobile version**

  • The arrow is moved into the tab and a tiny line is added to look like a tab
  • Instruction is clarified: feel free to display more than one tab in a mobile. If there are too many tabs for the width that calls for an overflow menu, then only one tab is presented (with arrow).
Reason

The instructions were not clear enough.  

Details

See the full specification here: 
https://designlibrary.sebgroup.com/components/tab/#specification


 

Table component

Updated: 2019-10-09

Change

There are two small and important changes on table design:

  • Bigger table header font: 16 px, medium, Grey 2 (#333333)
  • New sorting icon: Normal = Grey 7 (#B2B3B3), Selected= Dark Blue 2 (#007AC7), Hover = Blue (#41B0EE)
  • The sorting icon is FontAwesome solid "chevron-up" and solid "chevron-down", on top of each other, width 10 x height 16 px (together)
Reason

The table header font used to be 12 px which has been to small to achieve readability. There are more changes to come, but these are the most urgent. So the rest of what we know about tables stays the same for now. 

Details

See the full specification here: 
https://designlibrary.sebgroup.com/components/table/


 

Updated form components

Updated: 2019-10-01

Change

The following components has an updated height (44 px):

  • Radio buttons 
  • Checkboxes
  • Stepper (updated design description)
  • Segmented control (updated design description)
Reason

This synk makes all form components' height at 44 px (the first round was 2019-01-30). 

Details

See the full specification here:


 

Alert ribbon

Updated: 2019-09-09

Change
  • New colours - Make sure you use the correct colour codes
  • We are no longer using purple as a colour. Use grey instead.
  • New alert state - "Success" (green)
  • Updated state names:
    • "Information" (grey, used to be "Whisper")
    • "Success" (green, new state)
    • "Warning" (yellow, used to be "Talk")
    • "Critical" (red, used to be "Shout")
  • New icons - The specific names are on the component page. Use FontAwesome "Solid".
  • Updated measurements
  • Added recommendation for using grey alert on grey background
Reason

Feedback from user tests and usage from several channels, saying that purple was too loud. We also learned that the description in Design Library generally was too confusing. And we hade a design synk between Bootstrap and Design Library which generated sensible updates for both.

Details

See the full specification here, especially the Styles tab:

https://designlibrary.sebgroup.com/components/alerts/alert-ribbons/#guidelines  


 

Guideline for icon use

Updated: 2019-09-04 
Change
  • Use "regular" FontAwesome icons, rather than "light"
Reason

Originally the “light” version of FontAwesome icons was recommended as it aligns well with our brand. We have since then learned that the lines look too subtle in smaller icon sizes.

Details

List of FontAwesome icons:
https://fontawesome.com/icons?d=gallery&s=regular

About Icons in Design library:
https://designlibrary.sebgroup.com/patterns/icons-and-pictograms/icons/#usage

Instructions for license use:
https://github.sebank.se/seb-common/licenses/blob/master/font-awesome.md


 

Dropdown multiselect

New component: 2019-05-08

What is this?

The dropdown now has another version that allows multiple selections.

Details

https://designlibrary.sebgroup.com/components/forms/dropdown/#usage

Discussion

https://github.com/sebgroup/design-library/issues/59


 

Delete-button

New component: 2019-04-05
What is this?

A new button version to use when the action the user is about to do is irreversible. Use this in two ways:

1. Delete button standard. More subtle, red link that can be used with or without an icon.

2. Delete button confirm. Stands out with a solid, red background. Is used in the confirmation dialogue.

Details

https://designlibrary.sebgroup.com/components/forms/button/#styles

Discussion

https://github.com/sebgroup/design-library/issues/55


 

Header 6 (H6)

Updated: 2019-04-04 

Change
  • Font-size 14
  • Font-weight Regular
  • Line-height 20
  • Color #333333
Reason

This header helps differentiate between a primary and secondary headline in a supporting area or box.

Details

https://designlibrary.sebgroup.com/visual-identity/typography/

Discussion

https://github.com/sebgroup/design-library/issues/55


 

Accordion

Updated: 2019-03-27

Change
  • The green “tab border” is removed
  • Font in header is 20 px, with the option of a sub header (14 px)
  • Header cell height: if header only 48 px, if sub header 64 px
  • Grey hover is added on the header cell
  • Content background is still white/none, with the option to make it grey
  • Chevron (FontAwesome Light) points up/down (not right/down)
  • Guidelines now include: "Use this component mainly for text content"
Reason

Many reasons. First of all, it was time to specify the component better. We have adjusted to fit users’ need with more efficient use of space. The direction of chevron and the animation that follows a tap, are aligned.

We also noticed that the component has been (too) content-heavy and added clearer guidelines.

Details

https://designlibrary.sebgroup.com/components/accordion/

Discussion

https://github.com/sebgroup/design-library/issues/38


 

Sticky bar

New component: 2019-02-25
What is this?

The sticky bar stays in view at all times, no matter how many times the user tries to scroll away. There are two types: Sticky summary bar (placed at the top) and Sticky button bar (placed at the bottom).

Sticky summary bar

https://designlibrary.sebgroup.com/components/sticky-bar/sticky-summary-bar/#usage

Sticky button bar

https://designlibrary.sebgroup.com/components/sticky-bar/sticky-button-bar/


 

Breadcrumbs

New component: 2019-02-22 

What is this?

Breadcrumbs are used as a secondary navigation showing the website hiearchy. We have given it the SEB design touch.

Details

https://designlibrary.sebgroup.com/components/breadcrumbs/


 

Ghost buttons

Updated: 2019-02-13

Change

The Ghost button is updated to two versions:

  • Ghost button light: Transparent with a "White" outline (1 px). On hover: Background and outline is "Grey 2".
  • Ghost button dark: Transparent with a "Grey 2" outline (1 px). On hover: Background and outline is "White".
Reason

The instruction for the Ghost button is clarified. It is used on coloured background and photographs. Ghost light is for darker backgrounds, and Ghost dark for lighter backgrounds.

Details

https://designlibrary.sebgroup.com/components/forms/button/

Discussion

https://github.com/sebgroup/design-library/issues/35


 

Input field error indicator

Updated: 2019-01-30

Change
  • The error indicator for input fields have a 2 px line (#D81A1A) at the bottom
  • No frame or shadow
  • No error indication icon in the text field
Reason

The reasoning for changing the line from 4 px to 2 px is that the line was too hefty, especially when there were many fields lighting up at the same time.

Details

https://designlibrary.sebgroup.com/components/forms/input/

Discussion

https://github.com/sebgroup/design-library/issues/13


 

Height on form components

Updated: 2019-01-30

Change
  • Form components (Input Field, Drop Down, Medium Button, Segmented Control and Stepper) all have the same height: 44 px
  • This applies to both desktop and mobile
Reason

When labels got bigger, form components follow in size to harmonise and match them. Also, the mobile click area needed to be bigger so we want them to be the same size, to simplify and have fewer options (=easier to do it right).

Discussion

https://github.com/sebgroup/design-library/issues/16


 

Labels, input instructions and input errors

Updated: 2018-12-11
Change

Labels

  • font size: 16 px (1 rem)
  • weight: medium
  • line height: 20 px
  • distance from input border to label: 8 px

Input instruction

  • font size: 14 px (.875 rem)
  • weight: regular
  • line height: 20 px
  • distance from input border to instruction: 8 px

Input error text

  • font size: 14 px (.875)
  • weight: regular
  • line height: 20 px
  • distance from input border to error text: 8 px
Reason

Users gave feedback on labels being too small to read. Therefore, font sizes and weights for labels, input instructions and input errors are updated.

See component: Input fields

Change log in Github 


 

Button variations

Updated: 2018-09-06
Change 
  • Re-name “Alternative button” to: “Button link”
  • Re-name “White outline button” to: “Ghost button”
  • Changed guidelines for "Ghost button":
    • Outline colour = white
    • Hover colour = white
Reason

Guidelines on how to use button was not clear enough. We also need a button to use on coloured background


 

Disabled form elements

Updated: 2018-03-12
Change

Disabled state on Secondary button, Ghost button, Button link: Grey 9

Reason

Feedback from IBP/Version x/Minor change


 

Inline links

Updated: 2018-03-01
Change

Inline links have medium weight

Reason

Feedback from IBP/Version x/Minor change


 

Subsections

Page last updated

Feedback

Was this page helpful?