Sticker
Use Boosted’s custom stickers to inform people about new offers.
Example
39.99 € Per month
<div class="sticker">
<p class="mb-0">
<span class="display-3 mb-0 d-block">39.99 €</span>
<span>Per month</span>
</p>
</div>
How it works
A sticker is basically a rounded container. All its content is centered horizontally and vertically.
A max width is set for this content so that it fits easily within the circle.
We provide a set of stickers examples representing several use cases.
Positioning
This flexibility means that the stickers can vary from the design specifications regarding the vertical positioning of content.
For a better rendering you can use our margin utilities or even CSS.
Font sizes and responsiveness
All the provided examples use our text utilities to facilitate the understanding.
Please be aware that those examples are not meant to be responsive because they will always depend on the context. Indeed the font size will be resized in small screens due to the text utilities. If you do not want this behavior, you could for example set fixed font sizes and add some responsive rules by using scale()
CSS function.
Sizes
Fancy larger or smaller stickers? Add .sticker-lg
or .sticker-sm
for additional sizes.
Don’t forget to adjust the size of the content.
New
<div class="sticker sticker-lg">
<p class="mb-0">
<span class="display-1">New</span>
</p>
</div>
New
<div class="sticker sticker-sm">
<p class="mb-0">
<span class="h2">New</span>
</p>
</div>
Accessibility
Since stickers only provide a container, accessibility becomes specific to the sticker content:
- Showing and vocalizing prices can help when stickers contain prices.
- Accessibility and SVGs can help with the SVGs.
- You must semantize the informative content in context with HTML elements, such as
<p>
(as shown in our examples),<h1>
to<h6>
, etc.
Focus on one use case
39.99 € per month instead of 69.99 €
<div class="sticker">
<p class="mb-1">
<span class="h3 mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
<span class="display-3 mb-0 d-block" aria-hidden="true">39.99 €</span>
<span aria-hidden="true">Per month</span>
<span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
</p>
</div>
CSS
Variables
As part of Boosted’s evolving CSS variables approach, stickers now use local CSS variables on .sticker
for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}sticker-size: #{$sticker-size-md};
--#{$prefix}sticker-font-weight: #{$font-weight-bold};
--#{$prefix}sticker-background-color: #{$brand-orange};
--#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-md};
Small and large sticker modifier classes are used to update the value of these CSS variables as needed.
--#{$prefix}sticker-size: #{$sticker-size-sm};
--#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-sm};
--#{$prefix}sticker-size: #{$sticker-size-lg};
--#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-lg};
Sass variables
$sticker-size-sm: $spacer * 7;
$sticker-size-md: $spacer * 9;
$sticker-size-lg: $spacer * 14;
// Considering @use "sass:math", math.sqrt(2) / 2 is approximated to 0.7071067812
$sticker-content-max-width-sm: $sticker-size-sm * .7071067812;
$sticker-content-max-width-md: $sticker-size-md * .7071067812;
$sticker-content-max-width-lg: $sticker-size-lg * .7071067812;