Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncCode/Content Licenses

Stickers

Sign In
View in FigmaView in ClayDocumentation

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

sticker types

Usage

Use stickers to visually identify elements in a dataset that are part of the same group. Stickers can be any color.

Sizes

24px

sticker 24x squared and rounded

Use the 24px size sticker in smaller context when you only require visual identification for the element and don't need the user to interact with it.

metrics sticker 24x squared and rounded

32px

sticker 32x squared and rounded

Use the 32px size sticker in image cards, so you can see more parts of the image.

metrics for sticker 32x squared and rounded

40px

sticker 40x rounded

Use the 40px size sticker to identify the user in a comment in the comments portlet in sites. This size is only rounded.

metrics for sticker 40x rounded

48px

sticker 48x rounded

Use the 48px size sticker to identify the user in a blog entry or article in sites. This size is only rounded.

metrics for sticker 48x rounded

Colors

Stickers can be any color, and the default color for stickers is #6B6C7E, which corresponds to Main Lighten 28% desat 5%.

sticker color legend

For Documents and Media please follow the following specification of colors and icons.

sticker default colors

Variations

Square

Use a square sticker to identify files and folders. You can place up to three characters or an icon inside it. Always use uppercase letters.

squared sticker

Round

Only use the circle sticker to identify people. You can places up to two characters or an image inside it. Always use uppercase letters.

rounded sticker

Position

You can place a sticker of any type in an Card. Its position is always bottom left, as shown in the example below:

sticker position example in Card Image

user sticker position example in web content card

Something to improve? Report an issue!
Menu