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 o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-date" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
</div>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-date" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
</div>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
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__duration" datetime="PT3M07S">3:07min</time>
</div>
<h2 class="o-teaser__heading">
<a href="#">Future energy in Scottish mountains</a>
</h2>
<div class="o-teaser__timestamp o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-date" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
</div>
</div>
</div>
</div>
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__duration" datetime="PT3M07S">3:07min</time>
</div>
<h2 class="o-teaser__heading">
<a href="#">Future energy in Scottish mountains</a>
</h2>
<div class="o-teaser__timestamp o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
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__duration" 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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
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 o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-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&width=75&tint=054593,fff1e0" alt=" " class="o-teaser__headshot">
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp ">
<time data-o-component="o-date" class="o-date o-teaser__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
</div>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp ">
<time data-o-component="o-date" class="o-date o-teaser__timestamp" 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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp ">
<time data-o-component="o-date" class="o-date o-teaser__timestamp" 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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<time data-o-component="o-date" class="o-date 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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</a>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</a>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</a>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</a>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
Hero image teaser
<div class="demo-container demo-container--large demo-container--hero-image ">
<div class="o-teaser o-teaser--hero o-teaser--hero-image 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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</a>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<time data-o-component="o-date" class="o-date o-teaser__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
</div>
</div>
</div>
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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</a>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</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 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">Bondholders pay government for the privilege of lending it money</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&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 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">Bondholders pay government for the privilege of lending it money</p>
<time data-o-component="o-date" class="o-date 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&source=o-teaser-demo&width=400&height=400&fit=cover&format=auto&quality=medium" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp ">
<time data-o-component="o-date" class="o-date o-teaser__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
</div>
</div>
</div>
</div>
Paid Post teaser
<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">
<a href="#" class="o-teaser__tag"></a>
<span class="o-teaser__promoted-prefix">Paid Post</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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-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&source=o-teaser-demo" class="o-teaser__image" alt="demo image">
</div>
</div>
</div>
</div>
Small teaser for content by external advertisers
<div class="demo-container demo-container--promoted-content ">
<div class="o-teaser o-teaser--small o-teaser--promoted-content " data-o-component="o-teaser">
<div class="o-teaser__content">
<div class="o-teaser__meta">
<a href="#" class="o-teaser__tag"></a>
<span class="o-teaser__promoted-prefix">Promoted</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">Bondholders pay government for the privilege of lending it money</p>
<div class="o-teaser__timestamp o-teaser__timestamp--inprogress">
<span class="o-teaser__timestamp-prefix">Live</span>
<time data-o-component="o-date" class="o-date" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
</div>
</div>
</div>
</div>
Package teaser without List basic theme
Package teaser with list basic theme
Special Report Package teaser without List
Special Report Package teaser with list
Package teaser without List extra theme
Package teaser with list extra theme
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__duration" 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&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>
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__duration" 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&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>