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><span class="o-labels-indicator o-labels-indicator--live">
<span class="o-labels-indicator__status">
live
</span>
</span>
<br>
<span class="o-labels-indicator o-labels-indicator--closed">
<span class="o-labels-indicator__status">
closed
</span>
</span>
<br>
<span class="o-labels-indicator o-labels-indicator--new">
<span class="o-labels-indicator__status">
new
</span>
<time class="o-labels-indicator__timestamp">
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
</time>
</span>
<br>
<span class="o-labels-indicator o-labels-indicator--updated">
<span class="o-labels-indicator__status">
updated
</span>
<time class="o-labels-indicator__timestamp">
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
</time>
</span><span class="o-labels-indicator o-labels-indicator--live o-labels-indicator--inverse">
<span class="o-labels-indicator__status">
live
</span>
</span>
<br>
<span class="o-labels-indicator o-labels-indicator--closed o-labels-indicator--inverse">
<span class="o-labels-indicator__status">
closed
</span>
</span>
<br>
<span class="o-labels-indicator o-labels-indicator--new o-labels-indicator--inverse">
<span class="o-labels-indicator__status">
new
</span>
<time class="o-labels-indicator__timestamp">
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
</time>
</span>
<br>
<span class="o-labels-indicator o-labels-indicator--updated o-labels-indicator--inverse">
<span class="o-labels-indicator__status">
updated
</span>
<time class="o-labels-indicator__timestamp">
<!-- demo time element only (the datetime is not 1 hour ago): use o-date for dynamic datetime formatting -->
<time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm" aria-label="1 hours ago">1 hour ago</time>
</time>
</span><time class="o-labels-timestamp">
<!-- demo datetime: see o-date for formatting -->
<time datetime="2016-02-29T12:35:48Z" title="February 29 2016 12:35 pm" aria-label="February 29 2016">February 29 2016</time>
</time><time class="o-labels-timestamp o-labels-timestamp--inverse">
<!-- demo datetime: see o-date for formatting -->
<time datetime="2016-02-29T12:35:48Z" title="February 29 2016 12:35 pm" aria-label="February 29 2016">February 29 2016</time>
</time>