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 is key for the Ribbon, ensuring a cohesive and familiar user experience that enhances
understanding and interaction.
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
Desktop have three sizes: 700, 900, 1100.
Mobile
Mobile have three sizes: 100, 300, 500.
Two-lines
When the banner requires two labels, use the two-line component.
Two-lines (Anatomy)
A – Label
B – Second label
Ribbon (Banner)
Desktop
Desktop have two sizes: 300 and 400.
Mobile
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.
Don't
Overlap important UI elements or
obstruct readability.
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.
Banner
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.
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.
Anatomy
Ribbon (Banner)
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)
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)
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)
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
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
The Ribbon Corner Component is thoughtfully aligned to the edges of the content, providing a seamless
and visually pleasing integration.
Bounding box
The Ribbon Corner Component features an invisible bounding box, ensuring a clean and unobtrusive
presentation.
Behavior
Scaling and adaption
Ribbon Banner
The Ribbon Banner hugs the content, adjusting its length to the label.
Ribbon Corner
The Ribbon Corner hugs the content, adjusting its length to the label.
Examples of proper usage
Tur (Ribbon Corner)
In this example we use the Ribbon Corner Component to showcase a new feature.
Sport & Casino (Ribbon Banner)
In this example we use the Ribbon Banner Component to highlight ‘Premiere League’.
