Clay Stickers

Documentation Menu
Go Back

Clay Stickers

Whereas badges display numbers and labels display short information, stickers are small visual indicators of the content (usually the content type). They can include a small label or a Liferay icon, and they come in two shapes: circle and square.

Square sticker with label:

<clay:sticker label="JPG" />

You can include stickers in your apps.

Square sticker with icon:

<clay:sticker icon="picture" />

Stickers can include icons.

Circle sticker:

<clay:sticker label="JPG" shape="circle" />

You can also have circle stickers.

Stickers can be positioned in any corner of a div. Indicate their position with the position attribute: top-left, bottom-left, top-right, or bottom-right:

<div class="aspect-ratio">

	<img class="aspect-ratio-item-fluid" src="/images/thumbnail_hot_air_ballon.jpg" />

	<clay:sticker displayType="danger" label="PDF" position="top-left" />
</div>

You can specify the position of the sticker within a container.

Now you know how to use Clay stickers in your app!

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center