Origami Frontend Components & Services

Demos: o-teaser

Small

Small teaser

<div class="demo-container">
  <div class="o-teaser o-teaser--small" data-o-component="o-teaser">
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
  </div>
</div>

Small Live

Small live teaser

<div class="demo-container demo-container--live">
  <div
    class="o-teaser o-teaser--small o-teaser--stacked o-teaser--live o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <div class="o-teaser__timestamp o-teaser__timestamp--live">
        <span class="o-teaser__timestamp-prefix">Live</span>
      </div>
    </div>
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=180&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Small Full Fat

Small (full-fat) teaser

<div class="demo-container">
  <div class="o-teaser o-teaser--small" data-o-component="o-teaser">
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
  </div>
</div>

Small Image

Small teaser with image

<div class="demo-container">
  <div
    class="o-teaser o-teaser--small o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=180&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Small Image Right

Small teaser with image positioned to the right

<div class="demo-container demo-container--image-position-right">
  <div
    class="o-teaser o-teaser--small o-teaser--image-position-right o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=180&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Small Image Stacked

Small teaser with stacked image

<div class="demo-container demo-container--stacked">
  <div
    class="o-teaser o-teaser--small o-teaser--stacked o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=180&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Small Video

Small video teaser

<div class="demo-container demo-container--video">
  <div
    class="o-teaser o-teaser--small o-teaser--video"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">Video</span>
        <a href="#" class="o-teaser__tag">New York Minute</a>
        <time class="o-teaser__tag-suffix" datetime="PT3M07S">3:07min</time>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Future energy in Scottish mountains</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
  </div>
</div>

Small Video Image

Small video teaser with image

<div class="demo-container demo-container--video">
  <div
    class="o-teaser o-teaser--small o-teaser--video o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">Video</span>
        <a href="#" class="o-teaser__tag">New York Minute</a>
        <time class="o-teaser__tag-suffix" datetime="PT3M07S">3:07min</time>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Future energy in Scottish mountains</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=180&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Small Video Stacked

Small video teaser with stacked image

<div class="demo-container demo-container--video demo-container--stacked">
  <div
    class="o-teaser o-teaser--small o-teaser--video o-teaser--stacked o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">Video</span>
        <a href="#" class="o-teaser__tag">World</a>
        <time class="o-teaser__tag-suffix" datetime="PT3M07S">3:07min</time>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Small Audio

Small audio teaser

<div class="demo-container demo-container--audio">
  <div
    class="o-teaser o-teaser--small o-teaser--audio"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Tech Tonic Podcast</a>
        <time class="o-teaser__tag-suffix" datetime="PT3M07S">3:07min</time>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Shoshana Zuboff on surveillance capitalism</a>
      </h2>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2019-02-13T12:35:48Z"
          >2019-02-13T12:35:48Z</time
        >
      </div>
    </div>
  </div>
</div>

Small Audio Image

Small audio teaser with image

<div class="demo-container demo-container--audio">
  <div
    class="o-teaser o-teaser--small o-teaser--audio o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Tech Tonic Podcast</a>
        <time class="o-teaser__tag-suffix" datetime="PT3M07S">3:07min</time>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Shoshana Zuboff on surveillance capitalism</a>
      </h2>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2019-02-13T12:35:48Z"
          >2019-02-13T12:35:48Z</time
        >
      </div>
    </div>
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F5d1a54aa-f49b-11e8-ae55-df4bf40f9d0d?width=240&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Small Audio Stacked

Small audio teaser with stacked image

<div class="demo-container demo-container--audio demo-container--stacked">
  <div
    class="o-teaser o-teaser--small o-teaser--audio o-teaser--stacked o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
        <time class="o-teaser__tag-suffix" datetime="PT3M07S">3:07min</time>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Shoshana Zuboff on surveillance capitalism</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          John Thornhill talks to the social scientist Shoshana Zuboff about her
          book, The Age&#x2026;
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2019-02-13T12:35:48Z"
          >2019-02-13T12:35:48Z</time
        >
      </div>
    </div>
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F5d1a54aa-f49b-11e8-ae55-df4bf40f9d0d?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Opinion

Opinion teaser with no image

<div class="demo-container demo-container--opinion o-teaser--has-headshot">
  <div
    class="o-teaser o-teaser--small o-teaser--opinion o-teaser--has-headshot"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Mrs Moneypenny</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>

      <img
        src="https://www.ft.com/__origami/service/image/v2/images/raw/fthead:martin-wolf?source=origami&amp;width=75&amp;tint=054593,fff1e0"
        alt="example article headshot image"
        class="o-teaser__headshot"
      />
    </div>
  </div>
</div>

Large

Large teaser default theme

<div class="demo-container demo-container--large">
  <div class="o-teaser o-teaser--large" data-o-component="o-teaser">
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
  </div>
</div>

Large Image

Large teaser default theme with image

<div class="demo-container demo-container--large">
  <div
    class="o-teaser o-teaser--large o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>

    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Large Opinion

Large teaser opinion theme

<div
  class="demo-container demo-container--large demo-container--opinion o-teaser--opinion-background"
>
  <div
    class="o-teaser o-teaser--large o-teaser--opinion o-teaser--opinion-background o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>

    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Hero

Hero teaser default theme

<div class="demo-container demo-container--large">
  <div
    class="o-teaser o-teaser--hero o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <time
        data-o-component="o-date"
        class="o-teaser__timestamp"
        datetime="2016-02-29T12:35:48Z"
        >2016-02-29T12:35:48Z</time
      >
    </div>

    <div class="o-teaser__image-container">
      <a href="#">
        <div class="o-teaser__image-placeholder image-placeholder">
          <img
            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?width=280&amp;source=o-teaser-demo"
            class="o-teaser__image"
            alt="demo image"
          />
        </div>
      </a>
    </div>
  </div>
</div>

Hero Highlight

Hero teaser highlight theme

<div class="demo-container demo-container--large demo-container--highlight">
  <div
    class="o-teaser o-teaser--hero o-teaser--highlight o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Brexit</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>
    </div>

    <div class="o-teaser__image-container">
      <a href="#">
        <div class="o-teaser__image-placeholder image-placeholder">
          <img
            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?width=280&amp;source=o-teaser-demo"
            class="o-teaser__image"
            alt="demo image"
          />
        </div>
      </a>
    </div>
  </div>
</div>

Hero Opinion

Hero teaser opinion theme

<div class="demo-container demo-container--large demo-container--opinion">
  <div
    class="o-teaser o-teaser--hero o-teaser--opinion o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Brexit</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>
    </div>

    <div class="o-teaser__image-container">
      <a href="#">
        <div class="o-teaser__image-placeholder image-placeholder">
          <img
            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?width=280&amp;source=o-teaser-demo"
            class="o-teaser__image"
            alt="demo image"
          />
        </div>
      </a>
    </div>
  </div>
</div>

Hero Centred

Hero teaser default theme centred

<div class="demo-container demo-container--large demo-container--centre">
  <div
    class="o-teaser o-teaser--hero o-teaser--centre o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Brexit</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>
    </div>

    <div class="o-teaser__image-container">
      <a href="#">
        <div class="o-teaser__image-placeholder image-placeholder">
          <img
            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?width=280&amp;source=o-teaser-demo"
            class="o-teaser__image"
            alt="demo image"
          />
        </div>
      </a>
    </div>
  </div>
</div>

Hero Extra

Hero teaser extra theme centred

<div
  class="demo-container demo-container--large demo-container--centre o-teaser--hero o-teaser--extra-article"
>
  <div
    class="o-teaser o-teaser--centre o-teaser--hero o-teaser--extra-article o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">Review</span>

        <a href="#" class="o-teaser__tag">World</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#" class="o-teaser__syndication-indicator"
          ><span>Syndication allowed</span></a
        >
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>
    </div>

    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Hero teaser with featured image. On large viewports the teaser title overlays the image. On smaller viewports the typical hero teaser is shown, including themes such as opinion and highlight.

Hero Stretched

Hero teaser default theme stretched

<div
  class="demo-container demo-container--large demo-container--stretched o-teaser--opinion"
>
  <div
    class="o-teaser o-teaser--hero o-teaser--stretched o-teaser--opinion"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Brexit</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <time
        data-o-component="o-date"
        class="o-teaser__timestamp"
        datetime="2016-02-29T12:35:48Z"
        >2016-02-29T12:35:48Z</time
      >
    </div>
  </div>
</div>

Top Story Hero

Top story teaser hero standalone theme

<div class="demo-container demo-container--large demo-container--standalone">
  <div
    class="o-teaser o-teaser--hero o-teaser--standalone o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Brexit</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>
    </div>

    <div class="o-teaser__image-container">
      <a href="#">
        <div class="o-teaser__image-placeholder image-placeholder">
          <img
            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?width=280&amp;source=o-teaser-demo"
            class="o-teaser__image"
            alt="demo image"
          />
        </div>
      </a>
    </div>
  </div>
</div>

Top Story Standalone

Top story teaser standalone theme

<div
  class="demo-container demo-container--large demo-container--top-story demo-container--standalone"
>
  <div
    class="o-teaser o-teaser--top-story o-teaser--standalone"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Brexit</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>
    </div>

    <ul class="o-teaser__related">
      <li class="o-teaser__related-item">
        <a href="#">Related story number one</a>
      </li>
      <li class="o-teaser__related-item">
        <a href="#">Related story number two with long title</a>
      </li>
      <li class="o-teaser__related-item">
        <a href="#">Final related story</a>
      </li>
    </ul>
  </div>
</div>

Top Story Landscape

Top story teaser landscape theme

<div
  class="demo-container demo-container--large demo-container--top-story demo-container--landscape"
>
  <div
    class="o-teaser o-teaser--top-story o-teaser--landscape o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Brexit</a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>
    </div>

    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>

    <ul class="o-teaser__related">
      <li class="o-teaser__related-item">
        <a href="#">Related story number one</a>
      </li>
      <li class="o-teaser__related-item">
        <a href="#">Related story number two with long title</a>
      </li>
      <li class="o-teaser__related-item">
        <a href="#">Final related story</a>
      </li>
    </ul>
  </div>
</div>

Top Story Big Story

Top story teaser big story theme

<div
  class="demo-container demo-container--large demo-container--top-story demo-container--big-story"
>
  <div
    class="o-teaser o-teaser--top-story o-teaser--big-story o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag"></a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <time
        data-o-component="o-date"
        class="o-teaser__timestamp"
        datetime="2016-02-29T12:35:48Z"
        >2016-02-29T12:35:48Z</time
      >
    </div>

    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?url=http%253A%252F%252Fim.ft-static.com%252Fcontent%252Fimages%252Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img&amp;source=o-teaser-demo&amp;width=400&amp;height=400&amp;fit=cover&amp;format=auto&amp;quality=medium"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Inverse

Top story teaser big story theme

<div class="demo-container demo-container--large demo-container--inverse">
  <div
    class="o-teaser o-teaser--large o-teaser--inverse"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag"></a>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
  </div>
</div>

Partner Content (Paid Post)

Partner content

<div class="demo-container demo-container--paid-post">
  <div
    class="o-teaser o-teaser--small o-teaser--paid-post o-teaser--has-image"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__promoted-prefix">Partner Content</span>
        by <span class="o-teaser__promoted-by">E.on</span>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <p class="o-teaser__standfirst">
        <a href="#">
          Bondholders pay government for the privilege of lending it money
        </a>
      </p>

      <div class="o-teaser__timestamp">
        <time
          data-o-component="o-date"
          class="o-teaser__timestamp-date"
          datetime="2016-02-29T12:35:48Z"
          >2016-02-29T12:35:48Z</time
        >
      </div>
    </div>
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=180&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>
  </div>
</div>

Promoted Content

Content by external advertisers

Basic Package Teaser

Package teaser without List basic theme

<div class="demo-container demo-container--large demo-container--basic-package">
  <div class="o-teaser o-teaser--basic-package" data-o-component="o-teaser">
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>

    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">FT Series</span>
      </div>
      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <ul class="package-teaser__list">
        <li class="package-teaser__list-item package-teaser__landing-link">
          <a href="#">Visit Series</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Basic Package Teaser List

Package teaser with list basic theme

<div class="demo-container demo-container--large demo-container--basic-package">
  <div class="o-teaser o-teaser--basic-package" data-o-component="o-teaser">
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>

    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">FT Series</span>
      </div>
      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <ul class="package-teaser__list">
        <li class="package-teaser__list-item">
          <a href="#">1st Article in Package</a>
        </li>
        <li class="package-teaser__list-item">
          <a href="#">2nd Article in Package</a>
        </li>
        <li class="package-teaser__list-item">
          <a href="#">3rd Article in Package</a>
        </li>
        <li class="package-teaser__list-item package-teaser__landing-link">
          <a href="#">Visit Series</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Special Report Package Teaser

Special Report Package teaser without List

<div
  class="demo-container demo-container--large demo-container--special-report-package"
>
  <div
    class="o-teaser o-teaser--special-report-package"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>

    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">Special Report</span>
      </div>
      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <ul class="package-teaser__list">
        <li class="package-teaser__list-item package-teaser__landing-link">
          <a href="#">Visit Series</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Special Report Package Teaser List

Special Report Package teaser with list

<div
  class="demo-container demo-container--large demo-container--special-report-package"
>
  <div
    class="o-teaser o-teaser--special-report-package"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>

    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">Special Report</span>
      </div>
      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <ul class="package-teaser__list">
        <li class="package-teaser__list-item">
          <a href="#">1st Article in Package</a>
        </li>
        <li class="package-teaser__list-item">
          <a href="#">2nd Article in Package</a>
        </li>
        <li class="package-teaser__list-item">
          <a href="#">3rd Article in Package</a>
        </li>
        <li class="package-teaser__list-item package-teaser__landing-link">
          <a href="#">Visit Series</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Extra Package Teaser

Package teaser without List extra theme

<div class="demo-container demo-container--large demo-container--extra-package">
  <div class="o-teaser o-teaser--extra-package" data-o-component="o-teaser">
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>

    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">FT Series</span>
      </div>
      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <ul class="package-teaser__list">
        <li class="package-teaser__list-item package-teaser__landing-link">
          <a href="#">Visit Series</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Extra Package Teaser List

Package teaser with list extra theme

<div class="demo-container demo-container--large demo-container--extra-package">
  <div class="o-teaser o-teaser--extra-package" data-o-component="o-teaser">
    <div class="o-teaser__image-container">
      <div class="o-teaser__image-placeholder image-placeholder">
        <img
          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?width=280&amp;source=o-teaser-demo"
          class="o-teaser__image"
          alt="demo image"
        />
      </div>
    </div>

    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">FT Series</span>
      </div>
      <h2 class="o-teaser__heading">
        <a href="#">Japan sells negative yield 10-year bonds</a>
      </h2>

      <ul class="package-teaser__list">
        <li class="package-teaser__list-item">
          <a href="#">1st Article in Package</a>
        </li>
        <li class="package-teaser__list-item">
          <a href="#">2nd Article in Package</a>
        </li>
        <li class="package-teaser__list-item">
          <a href="#">3rd Article in Package</a>
        </li>
        <li class="package-teaser__list-item package-teaser__landing-link">
          <a href="#">Visit Series</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Big Video Large

Large 'big video' teaser

<div class="demo-container demo-container--large demo-container--large">
  <div
    class="o-teaser o-teaser--video o-teaser--has-video o-teaser--large"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">Video</span>
        <a href="#" class="o-teaser__tag">New York Minute</a>
        <time class="o-teaser__tag-suffix" datetime="PT3M07S">3:07min</time>
      </div>

      <div class="o-teaser__image-container">
        <div class="o-teaser__image-placeholder image-placeholder">
          <img
            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?width=280&amp;source=o-teaser-demo"
            class="o-teaser__image"
            alt="demo image"
          />
        </div>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Future energy in Scottish mountains</a>
      </h2>
    </div>
  </div>
</div>

Big Video Hero

Hero 'big video' teaser

<div class="demo-container demo-container--large demo-container--hero">
  <div
    class="o-teaser o-teaser--video o-teaser--has-video o-teaser--hero"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <span class="o-teaser__tag-prefix">Video</span>
        <a href="#" class="o-teaser__tag">New York Minute</a>
        <time class="o-teaser__tag-suffix" datetime="PT3M07S">3:07min</time>
      </div>

      <div class="o-teaser__image-container">
        <div class="o-teaser__image-placeholder image-placeholder">
          <img
            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?width=280&amp;source=o-teaser-demo"
            class="o-teaser__image"
            alt="demo image"
          />
        </div>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Future energy in Scottish mountains</a>
      </h2>
    </div>
  </div>
</div>

Big Audio Large

Large 'big audio' teaser

<div class="demo-container demo-container--large demo-container--large">
  <div
    class="o-teaser o-teaser--audio o-teaser--large"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Tech Tonic Podcast</a>
        <time class="o-teaser__tag-suffix" datetime="PT4M07S">4 mins</time>
      </div>

      <div class="o-teaser__image-container">
        <div class="o-teaser__image-placeholder image-placeholder">
          <img
            src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F5d1a54aa-f49b-11e8-ae55-df4bf40f9d0d?width=280&amp;source=o-teaser-demo"
            class="o-teaser__image"
            alt="demo image"
          />
        </div>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Shoshana Zuboff on surveillance capitalism</a>
      </h2>
    </div>
  </div>
</div>

Big Audio Hero

Hero 'big audio' teaser

<div class="demo-container demo-container--large demo-container--hero">
  <div
    class="o-teaser o-teaser--audio o-teaser--hero"
    data-o-component="o-teaser"
  >
    <div class="o-teaser__content">
      <div class="o-teaser__meta">
        <a href="#" class="o-teaser__tag">Tech Tonic Podcast</a>
        <time class="o-teaser__tag-suffix" datetime="PT4M07S">4 mins</time>
      </div>

      <div class="o-teaser__image-container">
        <div class="o-teaser__image-placeholder image-placeholder">
          <img
            src="https://www.ft.com/__origami/service/image/v2/images/raw/http%3A%2F%2Fprod-upp-image-read.ft.com%2F5d1a54aa-f49b-11e8-ae55-df4bf40f9d0d?width=280&amp;source=o-teaser-demo"
            class="o-teaser__image"
            alt="demo image"
          />
        </div>
      </div>

      <h2 class="o-teaser__heading">
        <a href="#">Shoshana Zuboff on surveillance capitalism</a>
      </h2>
    </div>
  </div>
</div>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-teaser

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

If running a Manual Build, run npm install "o-teaser@^5.2.2".

Help & Support

o-teaser is maintained directly by the Origami team. If you have any questions about o-teaser 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