Origami Frontend Components & Services

Demos: o-labels

Sizes

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>

Content States

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>

Lifecycle States

States used to represent stages in the product lifecycle.

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

Typography

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>

Indicators

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

Inverse Indicators

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

Indicator Sizes

All indicator labels adapt to the set font size. This demo shows using custom CSS to set the font size of indicator labels.

<span class="demo-scale-m1 o-labels-indicator o-labels-indicator--live">
      <span class="o-labels-indicator__status"> live </span>
    </span>

    <br>

    <span class="demo-scale-m1 o-labels-indicator o-labels-indicator--closed">
      <span class="o-labels-indicator__status"> closed </span>
    </span>

    <br>

    <span class="demo-scale-m1 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="demo-scale-m1 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>

    <hr>

    <span class="demo-scale-0 o-labels-indicator o-labels-indicator--live">
      <span class="o-labels-indicator__status"> live </span>
    </span>

    <br>

    <span class="demo-scale-0 o-labels-indicator o-labels-indicator--closed">
      <span class="o-labels-indicator__status"> closed </span>
    </span>

    <br>

    <span class="demo-scale-0 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="demo-scale-0 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>

    <hr>

    <span class="demo-scale-1 o-labels-indicator o-labels-indicator--live">
      <span class="o-labels-indicator__status"> live </span>
    </span>

    <br>

    <span class="demo-scale-1 o-labels-indicator o-labels-indicator--closed">
      <span class="o-labels-indicator__status"> closed </span>
    </span>

    <br>

    <span class="demo-scale-1 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="demo-scale-1 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>

    <hr>

    <span class="demo-scale-2 o-labels-indicator o-labels-indicator--live">
      <span class="o-labels-indicator__status"> live </span>
    </span>

    <br>

    <span class="demo-scale-2 o-labels-indicator o-labels-indicator--closed">
      <span class="o-labels-indicator__status"> closed </span>
    </span>

    <br>

    <span class="demo-scale-2 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="demo-scale-2 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>

Timestamp

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

Inverse Timestamp

<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>
Status
active
Switch component view

GitHub Repository

Install o-labels

If using the Build Service, add o-labels@^6.0.0 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-labels@^6.0.0".

Help & Support

o-labels is maintained directly by the Origami team. If you have any questions about o-labels or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com