Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Stickers

Description

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

Check the Lexicon Stickers Pattern for a more in-depth look at the motivations and proper usage of this component.

Sizes

Stickers come in four sizes: sm, normal, lg, and xl. Create your own custom size with the sticker-size mixin.

133 133 133 133

{call ClaySticker.render}
	{param label: '133' /}
	{param size: 'sm' /}
	{param style: 'primary' /}
{/call}

{call ClaySticker.render}
	{param label: '133' /}
	{param style: 'secondary' /}
{/call}

{call ClaySticker.render}
	{param label: '133' /}
	{param size: 'lg' /}
	{param style: 'success' /}
{/call}

{call ClaySticker.render}
	{param label: '133' /}
	{param size: 'xl' /}
	{param style: 'danger' /}
{/call}
<clay-sticker
	label="133"
	size="sm"
	style="primary">
</clay-sticker>

<clay-sticker label="133" style="secondary"></clay-sticker>

<clay-sticker
	label="133"
	size="lg"
	style="success">
</clay-sticker>

<clay-sticker
	label="133"
	size="xl"
	style="danger">
</clay-sticker>
<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>

Colors

133 133 133 133 133 133

{call ClaySticker.render}
	{param label: '133' /}
	{param style: 'primary' /}
{/call}

{call ClaySticker.render}
	{param label: '133' /}
	{param style: 'secondary' /}
{/call}

{call ClaySticker.render}
	{param label: '133' /}
	{param style: 'success' /}
{/call}

{call ClaySticker.render}
	{param label: '133' /}
	{param style: 'info' /}
{/call}

{call ClaySticker.render}
	{param label: '133' /}
	{param style: 'warning' /}
{/call}

{call ClaySticker.render}
	{param label: '133' /}
	{param style: 'danger' /}
{/call}
<clay-sticker label="133"></clay-sticker>

<clay-sticker label="133" style="secondary"></clay-sticker>

<clay-sticker label="133" style="success"></clay-sticker>

<clay-sticker label="133" style="info"></clay-sticker>

<clay-sticker label="133" style="warning"></clay-sticker>

<clay-sticker label="133" style="danger"></clay-sticker>
<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>

Variations

Square

Use square stickers to identify files and folders. You can place up to three characters or an icon inside a square sticker. Always capitalize the text in a square sticker.

JPG

{call ClaySticker.render}
	{param label: 'JPG' /}
	{param style: 'primary' /}
{/call}

{call ClaySticker.render}
	{param icon: 'picture' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param style: 'primary' /}
{/call}
<clay-sticker
	label="JPG"
	style="primary">
</clay-sticker>

<clay-sticker
	icon="picture"
	spritemap="/images/icons/icons.svg"
	style="primary">
</clay-sticker>
<span class="sticker sticker-primary">JPG</span>
<span class="sticker sticker-primary">
	<span class="inline-item">
		<svg class="lexicon-icon lexicon-icon-picture" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#picture" />
		</svg>
	</span>
</span>

Round

Use a round sticker to identify people. You can place up to two characters or an image inside a round sticker. Always capitalize the text in a round sticker.

JP thumbnail

{call ClaySticker.render}
	{param label: 'JP' /}
	{param shape: 'circle' /}
	{param style: 'primary' /}
{/call}

{call ClaySticker.render}
	{param imageAlt: 'thumbnail' /}
	{param imageSrc: '/images/thumbnail_coffee.jpg' /}
	{param shape: 'circle' /}
{/call}
<clay-sticker
	label="JP"
	style="primary"
	shape="circle">
</clay-sticker>

<clay-sticker
	imageAlt="thumbnail"
	imageSrc="/images/thumbnail_coffee.jpg"
	shape="circle">
</clay-sticker>
<span class="sticker sticker-primary rounded-circle">JP</span>
<span class="sticker sticker-primary rounded-circle">
	<span class="sticker-overlay">
		<img alt="thumbnail" class="img-fluid" src="/images/thumbnail_coffee.jpg" />
	</span>
</span>

Position

You can add a sticker to an Image Card. By default, its position is bottom left.

Use the positional sticker classes to place them anywhere relative to your container: sticker-top-left, sticker-bottom-left, sticker-top-right, and sticker-bottom-right.

thumbnail PDF
thumbnail PDF
thumbnail PDF
thumbnail PDF
{call ClaySticker.render}
	{param label: 'PDF' /}
	{param position: 'top-left' /}
	{param style: 'danger' /}
{/call}

{call ClaySticker.render}
	{param label: 'PDF' /}
	{param position: 'bottom-left' /}
	{param style: 'danger' /}
{/call}

{call ClaySticker.render}
	{param label: 'PDF' /}
	{param position: 'top-right' /}
	{param style: 'danger' /}
{/call}

{call ClaySticker.render}
	{param label: 'PDF' /}
	{param position: 'bottom-right' /}
	{param style: 'danger' /}
{/call}
<clay-sticker
	label="133"
	position="top-left"
	style="danger">
</clay-sticker>

<clay-sticker
	label="133"
	position="bottom-left"
	style="danger">
</clay-sticker>

<clay-sticker
	label="133"
	position="top-right"
	style="danger">
</clay-sticker>

<clay-sticker
	label="133"
	position="bottom-right"
	style="danger">
</clay-sticker>
<div class="aspect-ratio">
	<img alt="thumbnail" class="aspect-ratio-item-fluid" src="/images/thumbnail_hot_air_ballon.jpg" />
	<span class="sticker sticker-danger sticker-top-left">PDF</span>
</div>
<div class="aspect-ratio">
	<img alt="thumbnail" class="aspect-ratio-item-fluid" src="/images/thumbnail_hot_air_ballon.jpg" />
	<span class="sticker sticker-bottom-left sticker-danger">PDF</span>
</div>
<div class="aspect-ratio">
	<img alt="thumbnail" class="aspect-ratio-item-fluid" src="/images/thumbnail_hot_air_ballon.jpg" />
	<span class="sticker sticker-danger sticker-top-right">PDF</span>
</div>
<div class="aspect-ratio">
	<img alt="thumbnail" class="aspect-ratio-item-fluid" src="/images/thumbnail_hot_air_ballon.jpg" />
	<span class="sticker sticker-bottom-right sticker-danger">PDF</span>
</div>

API

Property Description Type Required Default
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
icon
Render ClayIcon in the ClaySticker element. string|undefined false undefined
id
Id to be applied to the sticker element. string|undefined false undefined
imageAlt
Alternate text of the image. string|undefined false undefined
imageSrc
Source of the image to be rendered inside the sticker. string|undefined false undefined
label
Sets the text or HTML to be rendered inside sticker. html|string|undefined false undefined
outside
Flag to indicate if the sticker should be positioned on the outside corners when position is defined. bool false false
position
Position of the sticker in relation to the contents. Available positions are string|undefined false undefined
size
Sticker size. Available sizes are string|undefined false undefined
shape
Shape of the sticker. Available shapes are string false rounded
spritemap
The path to the SVG spritemap file containing the icons. string|undefined false undefined
style
Sticker style. Available sizes are: string false primary
title
Title to be applied to the sticker element. string|undefined false undefined

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.