Public

Design tools

Install the component libraries for our design tools.

Visual identity

Patterns and components described here are SEB global. We have them in common - no matter what user group, customer journey or system you work with.

Motion

Motion is all about reenforcing understanding and behaviour on user triggered actions. We use it to describe functionality, relationships and intention.

Tab

Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.

Tooltip

A tooltip is a text label that acts as a helper to a specific item.

Take-over

Takeover modals enable a user to focus on a specific task while having the ability to go back to their previous view quickly.

Slide-out

Slideout modals allow for more complex interactions while not navigating away from the current view

PW Author

Design description to follow.

Article item

Design description to follow. PWS local.

Contact us

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

Contact me

A block for users to input their phone number so that SEB can contact them regarding a specific item/question/case/topic.

PW Buttons

Design description to follow.

Hook guide act

This block is meant to catch the interest of both customers that are ready to make a decision and those that still wants to know more before they do.

Disclaimer

Design description to follow. Global.

Eye catcher

This block is meant to catch the attention of the viewer and then keep their interest with its content.

Field-button group

An input field with a button next to it, for example used for search fields that are on pages or part of blocks.

Footnote

A note of reference, explanation, or comment usually placed below the text.

Story block

A block to promote an article or landing page.

Helper

Design description to follow. Global.

Text block

A generic block for body text.

Design hints

When talking to designers, valuable design hints have been shared with us. We have started to add them here.

Slider

A slider to experiment and adjust values with.

Expert quote

Used to highlight a quote from a block of text or an article.

Segmented control

A segmented control is a horizontal set of two or more segments. It’s used as toggles for features or content, similar to radio buttons but more visible and promote exploration.

Date picker

Date pickers simplify the task of selecting a date in a visual representation of a calendar.

Toggle button - will be removed

This button has a single select function, meaning only one can be chosen. The icons must relate to the choice or action they represent.

Skeleton loader

Gives the user a glimpse of what content is going to turn up after data has been loaded into the interface.

Mega menu pane

Design description to follow. Local.

Ordered bullet list

Design description to follow. Typo, global.

PW Preamble

Design description to follow.

Search bar

The Search bar helps visitors find relevant content

Table

Use global

Theme header

A coloured area/border in the top of a page (above the bread crumbs).

Tooltip

Design description to follow.

Up button

This is a feature that helps the visitor back to the top of the page once they have scrolled through a certain amount of the content.

USP list

A list with green check marks.

AppInt presentation

Design description to follow.

Book counseling

Design description to follow.

Contact list

Design description to follow.

PW Crisis alert

Design description to follow.

PW Critical info

Design description to follow.

Epiforms block

Design description to follow. Global pattern?

PW Expandable list

Design description to follow.

Flex block

Design description to follow.

Highlighted text-columns block

Design description to follow.

PW Iframe

Design description to follow.

PW Image

Design description to follow.

Link list

Design description to follow. Global.

Article features

A collection of data that can be used with a Story page or News page to give the reader better overview of the articles meta-data (date published, time to read, ability to share etc).

Quick facts

A block with heading and text which gives the visitor an extract of facts from the content. It can also be used to summarise the important points of an article.

Rates

Design description to follow.

Related content

Presents similar or related content of the same type to the visitor that they are currently on

Video block

A block showing a video with related heading, text or bookmarks to sections in the video.

PW Calendar

Design description to follow.

PW Find

Design description to follow.

Page listing

Design description to follow.

Promo

Design description to follow. Global. Name?

Rating

A block to measure the customer experience of a page.

Slideshow

Design description to follow.

Welcome block

A block to highlight and show the most important or prioritised message for a start or landing page.

Focus bar block

A block to enhance and highlight information (such as numbers and results) relating to the page content.

Alert ribbons

The alert ribbon is a compontent containing information about the state of the system/page/function. Information can be plain information, success, warnings & critical information (such as errors).

Related blocks

The purpose of The Related blocks is to highlight a story, article, news or a product that is related to the current content, or in other ways relevant to the reader.

Related Large

This is used to highlight a story, article, news or a product that is related to the current content, or in other ways relevant to the reader.

Related Medium

Related Medium is one of the three Related Blocks that is used to highlight a story, article, news or a product that is related to the current content, or in other ways relevant to the reader

Related Small

Related Small is one of the three Related Blocks that is used to highlight a story, article, news or a product that is related to the current content, or in other ways relevant to the reader