Submit Feedback

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.