ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Sticker

yarn add @clayui/sticker

Stickers are a visual way to quickly identify content in a different way than badges and labels.

  • Examples
  • Markup
  • API

Stable3.3.0View in LexiconCHANGELOGstorybook demos

  • Colors
  • Position
  • Sizes
  • Variations

    • Overlay
    • Outside
    • User Icon

Colors

Lexicon adopts in its design system the following colors below:

133 133 133 133 133 133
Copied!
Code Sample (expand to see it)
<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.

thumbnail PDF
thumbnail PDF
thumbnail PDF
thumbnail PDF
Copied!
Code Sample (expand to see it)
<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!
Code Sample (expand to see it)
<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.

thumbnail JB thumbnail TT thumbnail SP thumbnail BC
Copied!
Code Sample (expand to see it)
<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!
Code Sample (expand to see it)
<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

thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail JB TT SP BC
Copied!
Code Sample (expand to see it)
<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>

How can this be improved? Create an issue!