Stable3.3.0View in LexiconCHANGELOG
Colors
Lexicon adopts in its design system the following colors below:
133
133
133
133
133
133
Copied!
<span class="sticker sticker-primary">133</span>
<span class="sticker sticker-secondary">133</span>
<span class="sticker sticker-success">133</span>
<span class="sticker sticker-info">133</span>
<span class="sticker sticker-warning">133</span>
<span class="sticker sticker-danger">133</span>
Position
Place them anywhere relative to your container using positional sticker classes sticker-top-left
, sticker-bottom-left
, sticker-top-right
, and sticker-bottom-right
.




Copied!
<div class="clay-site-positional-sticker">
<div class="aspect-ratio">
<img
alt="thumbnail"
class="aspect-ratio-item aspect-ratio-item-fluid"
src="/images/thumbnail_hot_air_ballon.jpg"
/>
<span class="sticker sticker-danger sticker-top-left">PDF</span>
</div>
</div>
<div class="clay-site-positional-sticker">
<div class="aspect-ratio">
<img
alt="thumbnail"
class="aspect-ratio-item aspect-ratio-item-fluid"
src="/images/thumbnail_hot_air_ballon.jpg"
/>
<span class="sticker sticker-bottom-left sticker-danger">PDF</span>
</div>
</div>
<div class="clay-site-positional-sticker">
<div class="aspect-ratio">
<img
alt="thumbnail"
class="aspect-ratio-item aspect-ratio-item-fluid"
src="/images/thumbnail_hot_air_ballon.jpg"
/>
<span class="sticker sticker-danger sticker-top-right">PDF</span>
</div>
</div>
<div class="clay-site-positional-sticker">
<div class="aspect-ratio">
<img
alt="thumbnail"
class="aspect-ratio-item aspect-ratio-item-fluid"
src="/images/thumbnail_hot_air_ballon.jpg"
/>
<span class="sticker sticker-bottom-right sticker-danger">PDF</span>
</div>
</div>
Sizes
Stickers come in 4 sizes sm
, default, lg
, and xl
. Create your own custom size with the sticker-size
mixin.
133
133
133
133
Copied!
<span class="sticker sticker-primary sticker-sm">133</span>
<span class="sticker sticker-secondary">133</span>
<span class="sticker sticker-lg sticker-success">133</span>
<span class="sticker sticker-danger sticker-xl">133</span>
<span class="sticker sticker-primary sticker-xl">
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-format"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#format"></use>
</svg>
</span>
</span>
<span class="sticker sticker-lg sticker-secondary">
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-format"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#format"></use>
</svg>
</span>
</span>
<span class="sticker sticker-success">
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-format"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#format"></use>
</svg>
</span>
</span>
<span class="sticker sticker-danger sticker-sm">
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-format"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#format"></use>
</svg>
</span>
</span>
Variations
Overlay
Overlay content over stickers by nesting sticker-overlay
inside sticker
.




Copied!
<span class="sticker sticker-dark sticker-sm">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/thumbnail_coffee.jpg"
/>
</span>
<span class="sticker-overlay">JB</span>
</span>
<span class="sticker sticker-dark">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/thumbnail_hot_air_ballon.jpg"
/>
</span>
<span class="sticker-overlay">TT</span>
</span>
<span class="sticker sticker-dark sticker-lg">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/tv-at-beach.png"
/>
</span>
<span class="sticker-overlay">SP</span>
</span>
<span class="sticker sticker-dark sticker-xl">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/long_user_image.png"
/>
</span>
<span class="sticker-overlay">BC</span>
</span>
Outside
Add class sticker-outside
in conjunction with sticker positions to position the sticker on the outside corners.
Copied!
<button class="btn btn-primary" style="position:relative;">
Email
<span
class="sticker sticker-circle sticker-danger sticker-outside sticker-top-left"
>133</span
>
</button>
<button class="btn btn-primary" style="position:relative;">
Email
<span
class="sticker sticker-circle sticker-bottom-left sticker-danger sticker-outside"
>133</span
>
</button>
<button class="btn btn-primary" style="position:relative;">
Email
<span
class="sticker sticker-circle sticker-danger sticker-outside sticker-top-right"
>133</span
>
</button>
<button class="btn btn-primary" style="position:relative;">
Email
<span
class="sticker sticker-circle sticker-bottom-right sticker-danger sticker-outside"
>133</span
>
</button>
User Icon






Copied!
<span class="sticker sticker-sm sticker-user-icon">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/thumbnail_dock.jpg"
/>
</span>
</span>
<span class="sticker sticker-user-icon">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/thumbnail_coffee.jpg"
/>
</span>
</span>
<span class="sticker sticker-lg sticker-user-icon">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/thumbnail_hot_air_ballon.jpg"
/>
</span>
</span>
<span class="sticker sticker-user-icon sticker-xl">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/thumbnail_coffee.jpg"
/>
</span>
</span>
<span class="sticker sticker-user-icon sticker-xl">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/long_user_image.png"
/>
</span>
</span>
<span class="sticker sticker-primary sticker-user-icon sticker-xl">
<span class="sticker-overlay">
<img
alt="thumbnail"
class="sticker-img"
src="/images/tv-at-beach.png"
/>
</span>
</span>
<span class="sticker sticker-danger sticker-user-icon sticker-xl">JB</span>
<span class="sticker sticker-lg sticker-success sticker-user-icon">TT</span>
<span class="sticker sticker-secondary sticker-user-icon">SP</span>
<span class="sticker sticker-primary sticker-sm sticker-user-icon">BC</span>