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" />
Square sticker with icon:
<clay:sticker icon="picture" />
Circle sticker:
<clay:sticker label="JPG" shape="circle" />
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>
Now you know how to use Clay stickers in your app!