Hero Image

Components

Ribbon

The Ribbon is a visual indicator that help to highlight new content or products to draw attention to them.

Interactive demo

This demo lets you preview the Ribbon component, its variations, and configuration options. Each tab displays a different type of Ribbon.

Usage

The Ribbon Component draws attention to new content or products, guiding users focus with an eye-catching design. Use thoughtfully to elevate your design and create a seamless, engaging experience

Principles

Consistency

Consistency

Consistency is key for the Ribbon, ensuring a cohesive and familiar user experience that enhances understanding and interaction.

Visibility

Visibility

The Ribbon should be visually prominent and easily noticeable to draw attention to new or updated content. This helps users quickly identify what's fresh and relevant.

There are two different variants for the Ribbon Component – Corner and Banner. The Corner variant is used for Svenska Spel Tur, while the Banner variant is used for Sport & Casino.

Ribbon (Corner)

Desktop
Large ribbon corner

Desktop have three sizes: 700, 900, 1100.

Mobile
Small ribbon corner

Mobile have three sizes: 100, 300, 500.

Two-lines
Two lines ribbon examples

When the banner requires two labels, use the two-line component.

Two-lines (Anatomy)
Two Lines anatomy

A – Label
B – Second label

Ribbon (Banner)

Desktop
Large ribbon banner

Desktop have two sizes: 300 and 400.

Mobile
Small ribbon banner

Mobile have two sizes: 100 and 200.

Content

Corner

Do: Ensure that the Ribbon is clearly visible and stands out from the rest of the content.
Do
Ensure that the Ribbon is clearly visible and stands out from the rest of the content.
Don´t: Overlap important UI elements or obstruct readability.
Don't
Overlap important UI elements or obstruct readability.
Don: Always position the Ribbon (Corner) in the left corner for a consistent user exeperience.
Do
Always position the Ribbon (Corner) in the left corner for a consistent user exeperience.
Don´t: Place the Ribbon in any other corner or rotate it.
Don't
Place the Ribbon in any other corner or rotate it.
Do: Ensure that the Ribbon is clearly visible and stands out from the rest of the content.
Do
Ensure that the Ribbon is clearly visible and stands out from the rest of the content.
Don´t: Overlap important UI elements or obstruct readability.
Don't
Overlap important UI elements or obstruct readability.
Don: When using the ´Align left´ Ribbon, position it top left, and for the ´Align right´ Ribbon, place it top right.
Do
When using the 'Align left' Ribbon, position it top left, and for the 'Align right' Ribbon, place it top right.
Don´t: Center align the Ribbon.
Don't
Center align the Ribbon.

Formatting

Anatomy

Ribbon (Banner)

Anatomy of corner ribbon

The Ribbon Banner consist of essential components like the Container, Label, Flag, Edge fold and Elevation.

A – Container
B – Label
C – Flag shape
D – Edge fold
E – Elevation 100

Ribbon (Corner)

Anatomy of banner ribbon

The Ribbon Corner consists of essential components like the Container, Label, and Sharp edges, creating the impression that the Ribbon is wrapped around the content.

A – Sharp edge (Left)
B – Container
C – Label
D – Sharp edge (Right)

Sizes

The Ribbon consists of two variants, each with different sizes.

Ribbon (Corner)

Anatomy of corner ribbon
Desktop

A– 700 (104 px)
B – 900 (120px)
C – 1100 (138 px)

Mobile

D – 100 (55 px)
E – 300 (70 px)
F– 500 (85 px)

Ribbon (Banner)

Anatomy of banner ribbon
Desktop

A – 300 (29 px)
B – 400 (39 px)

Mobile

C – 100 (16 px)
D – 200 (26 px)

Elevation (Banner)

The Banner Ribbon features an elevation of 100, providing a sense of depth.

Padding

Padding for banner

The Ribbon Banner Component has a 12-pixel top padding as default, creating a visually balanced space. The Banner variant is offset from the content, ensuring that the 'Edge Fold' aligns precisely with the outside edge. (See the blue vertical line for reference). If needed, you can also use the "offset top" property to modify the distance from top of parent container.

Alignment

Placement of corner ribbon

The Ribbon Corner Component is thoughtfully aligned to the edges of the content, providing a seamless and visually pleasing integration.

Bounding box

Placement of corner ribbon in different sizes

The Ribbon Corner Component features an invisible bounding box, ensuring a clean and unobtrusive presentation.

Behavior

Scaling and adaption

Ribbon Banner

Ribbon banner hugs content

The Ribbon Banner hugs the content, adjusting its length to the label.

Ribbon Corner

Ribbon corner with long content

The Ribbon Corner hugs the content, adjusting its length to the label.

Examples of proper usage

Tur (Ribbon Corner)

Ribbon corner example from Lotto card

In this example we use the Ribbon Corner Component to showcase a new feature.

Sport & Casino (Ribbon Banner)

Ribbon banner example from Stryktipset card

In this example we use the Ribbon Banner Component to highlight ‘Premiere League’.

Related

Hero Image

Components

Speech Bubble

Hero Image

Components

Badge

Hero Image

Components

Toast