Added in v5.2

View on GitHub

Sticker

Use Boosted’s custom stickers to inform people about new offers.

On this page

Example

39.99 € Per month

html 
<div class="sticker">
  <p class="mb-0">
    <span class="sticker-fs-3xl mb-0 d-block">39.99 €</span>
    <span>Per month</span>
  </p>
</div>
site/assets/scss/_component-examples.scss 
.sticker-fs-3xl {
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -.0625rem;
}

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 some specific classes to have non-responsive stickers. You may adapt those classes to your needs.

Please be aware that those examples are not meant to be responsive because they will always depend on the context. If you do not want this behavior, you could 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

html 
<div class="sticker sticker-lg">
  <p class="mb-0">
    <span class="sticker-fs-4xl">New</span>
  </p>
</div>
site/assets/scss/_component-examples.scss 
.sticker-fs-4xl {
  font-size: 3.75rem;
  line-height: 1;
  letter-spacing: -.125rem;
}

New

html 
<div class="sticker sticker-sm">
  <p class="mb-0">
    <span class="sticker-fs-xl">New</span>
  </p>
</div>
site/assets/scss/_component-examples.scss 
.sticker-fs-xl {
  font-size: 1.875rem;
  line-height: calc(32 / 30); // stylelint-disable-line function-disallowed-list
  letter-spacing: -.05rem;
}

Accessibility

Since stickers only provide a container, accessibility becomes specific to the sticker content:

Focus on one use case

html 
<div class="sticker">
  <p class="mb-1">
    <span class="sticker-fs-l mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
    <span class="sticker-fs-3xl 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>
site/assets/scss/_component-examples.scss 
.sticker-fs-3xl {
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -.0625rem;
}

.sticker-fs-l {
  font-size: 1.5rem;
  line-height: calc(26 / 24); // stylelint-disable-line function-disallowed-list
  letter-spacing: -.03125rem;
}

CSS

Variables

Added in v5.2.0

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.

scss/_sticker.scss 
--#{$prefix}sticker-size: #{$sticker-size-md};
--#{$prefix}sticker-font-weight: #{$sticker-font-weight};
--#{$prefix}sticker-color: #{$sticker-color};
--#{$prefix}sticker-background-color: #{$sticker-background-color};
--#{$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.

scss/_sticker.scss 
--#{$prefix}sticker-size: #{$sticker-size-sm};
--#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-sm};
scss/_sticker.scss 
--#{$prefix}sticker-size: #{$sticker-size-lg};
--#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-lg};

Sass variables

scss/_variables.scss 
$sticker-color:                         $black;
$sticker-background-color:              $supporting-orange;
$sticker-font-weight:                   $font-weight-bold;

$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;