sticker

Stickers can highlight special content such as: features of a product, a promotion.

table of content

description
component variations
style scss

component variations

primary

Label

<div class="a-sticker -primary" aria-labelledby="sticker-label-id-primary">
  <span id="sticker-label-id-primary" class="a-sticker__label -size-s">
    Label
  </span>
</div>

secondary

Open on blank page

Label

<div class="a-sticker -secondary" aria-labelledby="sticker-label-id-secondary">
  <span id="sticker-label-id-secondary" class="a-sticker__label -size-s">
    Label
  </span>
</div>

contrast

Open on blank page

Label

<div class="a-sticker -contrast" aria-labelledby="sticker-label-id-contrast">
  <span id="sticker-label-id-contrast" class="a-sticker__label -size-s">
    Label
  </span>
</div>

turquoise

Open on blank page

Label

<div class="a-sticker -turquoise" aria-labelledby="sticker-label-id-turquoise">
  <span id="sticker-label-id-turquoise" class="a-sticker__label -size-s">
    Label
  </span>
</div>

purple

Open on blank page

Label

<div class="a-sticker -purple" aria-labelledby="sticker-label-id-purple">
  <span id="sticker-label-id-purple" class="a-sticker__label -size-s">
    Label
  </span>
</div>

green

Open on blank page

Label

<div class="a-sticker -green" aria-labelledby="sticker-label-id-green">
  <span id="sticker-label-id-green" class="a-sticker__label -size-s">
    Label
  </span>
</div>

additional content

styles SCSS

.a-sticker {
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  height: 1.5rem;
  width: auto;

  &.-turquoise {
    background-color: var(--nested-major__enabled__default__fill, var(--emphasis-turquoise-major__enabled__default__fill));
    color: var(--nested-major__enabled__default__front, var(--emphasis-turquoise-major__enabled__default__front));
  }

  &.-purple {
    background-color: var(--nested-major__enabled__default__fill, var(--emphasis-purple-major__enabled__default__fill));
    color: var(--nested-major__enabled__default__front, var(--emphasis-purple-major__enabled__default__front));
  }

  &.-green {
    background-color: var(--nested-major__enabled__default__fill, var(--emphasis-green-major__enabled__default__fill));
    color: var(--nested-major__enabled__default__front, var(--emphasis-green-major__enabled__default__front));
  }

  &__label {
    margin: auto 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
  }
}