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" />
Figure 1: You can include stickers in your apps.
Square sticker with icon:
<clay:sticker icon="picture" />
Figure 2: Stickers can include icons.
Circle sticker:
<clay:sticker label="JPG" shape="circle" />
Figure 3: 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 label="PDF" position="top-left" style="danger" />
</div>
Figure 4: You can specify the position of the sticker within a container.
Now you know how to use Clay stickers in your app!