Demos: o-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>

<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>

<span class="o-labels o-labels--lifecycle-beta">Beta</span>

<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>