Origami Frontend Components & Services

Demos: o-typography

This version of o-typography hasn't been branded yet. Please check the latest version, 7.0.0-beta.0, as branding is a relatively new addition to our components.

Article

<article class="o-grid-row demo demo-article">
  <div data-o-grid-colspan="12 S11 Scenter M9 L8 XL7">
    <div>
      <a href="#" class="o-typography-topic">Standard Chartered PLC</a>
    </div>
    <h1 class="o-typography-headline">
      A &#x2018;Rosetta stone&#x2019; that may unlock the mystery of life on
      Earth
    </h1>
    <p class="o-typography-standfirst">
      Belgian-Brazilian brewer ups the stakes in beer takeover battle
    </p>

    <span class="o-typography-timestamp">Today</span>
    <div class="o-typography-author">
      <span>by</span> <a href="#">Peggy Hollinger</a>
    </div>

    <div class="demo-article__body">
      <p class="o-typography-body">
        Anheuser-Busch InBev raised its proposed takeover offer for SABMiller to
        &#xA3;43.50 a share on Monday, upping the stakes in a takeover battle to
        create the world&#x2019;s dominant brewing company, according to people
        familiar with the latest bid.
      </p>
      <p class="o-typography-body">
        News of the fourth proposal by
        <a href="#" class="o-typography-link">AB InBev</a> for its London-listed
        rival, which values SABMiller&#x2019;s equity at $70bn, came with less
        than 52 hours before a UK bid deadline.
      </p>
      <h2 class="o-typography-heading-level-2">
        Heading 2 Lorem ipsum dolor sit amet.
      </h2>
      <p class="o-typography-body">
        Glencore has fired the starting gun on a sales process for two copper
        assets after the miner-cum-trader was approached by several suitors.
      </p>

      <h3 class="o-typography-heading-level-3">
        Heading 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Numquam!
      </h3>
      <p class="o-typography-body">
        People close to the company said there was no guarantee that Glencore
        would sell either the Cobar mine in Australia or Lomas Bayas in Chile,
        which analysts said could be worth between $500m to $1bn.
      </p>

      <h4 class="o-typography-heading-level-4">
        Heading 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Numquam!
      </h4>
      <p class="o-typography-body">
        Nemo, aspernatur. Quae delectus necessitatibus recusandae corporis,
        dolorem, molestiae vel pariatur, perspiciatis nisi in saepe non
        asperiores iure quo, blanditiis.
      </p>
      <ul class="o-typography-list o-typography-list--unordered">
        <li>
          <p>
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Molestiae natus totam necessitatibus, sequi
            placeat atque debitis eligendi saepe, perferendis incidunt et in,
            ducimus aspernatur. Quasi consequuntur iste consectetur, assumenda
            laboriosam!
          </p>
          <p>
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur
            adipisicing elit. Molestiae natus totam necessitatibus, sequi
            placeat atque debitis eligendi saepe, perferendis incidunt et in,
            ducimus aspernatur. Quasi consequuntur iste consectetur, assumenda
            laboriosam!
          </p>
        </li>
        <li>Officia sequi autem in explicabo.</li>
        <li>
          Dolores placeat,
          <a class="o-typography-link" href="#void">at distinctio</a> non!
        </li>
        <li>Quo totam numquam, molestias consequatur.</li>
        <li>Quasi libero fuga soluta quisquam!</li>
      </ul>
      <ol class="o-typography-list o-typography-list--ordered">
        <li>Article ordered list item</li>
        <li>Officia sequi autem in explicabo.</li>
        <li>
          Dolores placeat,
          <a class="o-typography-link" href="#void">at distinctio</a> non!
        </li>
        <li>Quo totam numquam, molestias consequatur.</li>
        <li>Quasi libero fuga soluta quisquam!</li>
      </ol>
      <p class="o-typography-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aperiam
        magni, sint ut minus omnis eligendi velit non dolor odio optio quaerat
        dignissimos assumenda excepturi impedit, modi molestias iste. Suscipit
        tempora nemo, id ducimus vero voluptates omnis cumque provident. Eum
        velit temporibus consectetur officia! Sit saepe deserunt at nisi
        necessitatibus!
      </p>
      <h4 class="o-typography-heading-level-4">Heading 4 above an image!</h4>
      <figure>
        <img
          alt
          src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fim.ft-static.com%2Fcontent%2Fimages%2Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img?source=otype"
        />
        <figcaption class="o-typography-caption">
          <a class="o-typography-link" href="#void">&#xA9;Lorem</a> John Doe
        </figcaption>
      </figure>
      <p class="o-typography-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aperiam
        magni, sint ut minus omnis eligendi velit non dolor odio optio quaerat
        dignissimos assumenda excepturi impedit, modi molestias iste. Suscipit
        tempora nemo, id ducimus vero voluptates omnis cumque provident. Eum
        velit temporibus consectetur officia! Sit saepe deserunt at nisi
        necessitatibus!
      </p>

      <p class="o-typography-body">
        <em
          ><a class="o-typography-link" href="#void"
            >Spending &#x20AC;1.4bn for the &#x2018;Rosetta stone&#x2019; is a
            tragic misappropriation of resources / From J Antoni Rafalski</a
          ></em
        >
      </p>
      <footer class="o-typography-footer">
        Footer such as copyright notice.
      </footer>
    </div>
  </div>
</article>

Headings

<h1 class="o-typography-headline--large">
  Headline large &#x2014; Don&#x2019;t settle for black and white
</h1>

<h1 class="o-typography-headline">
  Headline &#x2014; Don&#x2019;t settle for black and white
</h1>

<h2 class="o-typography-heading-level-2">
  Heading level 2 &#x2014; Don&#x2019;t settle for black and white
</h2>
<h3 class="o-typography-heading-level-3">
  Heading level 3 &#x2014; Don&#x2019;t settle for black and white
</h3>
<h4 class="o-typography-heading-level-4">
  Heading level 4 &#x2014; Don&#x2019;t settle for black and white
</h4>
<h5 class="o-typography-heading-level-5">
  Heading level 5 &#x2014; Don&#x2019;t settle for black and white
</h5>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-typography

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

If running a Manual Build, run npm install "o-typography@^5.4.2".

Help & Support

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

Slack: #ft-origami
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: #ft-origami
Email: origami.support@ft.com