Label size modifiers are used to change the prominence of labels.
<span class="o-labels">Standard Label</span>
<span class="o-labels o-labels--big">Big Label</span>
<span class="o-labels o-labels--small">Small Label</span>States used to differentiate between types of content.
<span class="o-labels o-labels--content-commercial">Commercial</span>
<span class="o-labels o-labels--content-commercial">Paid Post</span>
<span class="o-labels o-labels--content-commercial">Promoted Content</span>
<span class="o-labels o-labels--content-premium">Premium</span>States used to represent stages in the product lifecycle.
<span class="o-labels o-labels--lifecycle-beta">Beta</span>Labels sitting in line with text that's styled with o-typography.
<div class="o-typography-wrapper">
<p>
This is a <span class="o-labels">Standard Label</span> inside a paragraph.
</p>
<p>
This is a <span class="o-labels o-labels--big">Big Label</span> inside a paragraph.
</p>
<p>
This is a <span class="o-labels o-labels--small">Small Label</span> inside a paragraph.
</p>
</div>