This version of this component hasn't been branded yet.

Please check the latest version, 2.2.9, as branding is a relatively new addition to our components.

o-teaser

Teasers which link through to articles

active

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

Small live teaser

<div class="demo-container ">

	<div class="o-teaser o-teaser--small   o-teaser--live" 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>


				<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

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-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">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&amp;source=o-teaser-demo" class="o-teaser__image" alt="demo image">
				</div>
			</div>
	</div>

</div>

Small-image-live

Small live teaser with image

<div class="demo-container ">

	<div class="o-teaser o-teaser--small  o-teaser--has-image o-teaser--live" 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 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&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">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&amp;source=o-teaser-demo" class="o-teaser__image" alt="demo image">
				</div>
			</div>
	</div>

</div>

Small-headshot

Small teaser with headshot

<div class="demo-container  demo-container--has-headshot ">

	<div class="o-teaser o-teaser--small  o-teaser--has-headshot   " data-o-component="o-teaser">
		<div class="o-teaser__content">
			<div class="o-teaser__meta">
				<span class="o-teaser__tag-prefix">The Long View</span>
				<a href="#" class="o-teaser__tag">John Authers</a>

			</div>

			<h2 class="o-teaser__heading">
				<a href="#">There are better ways to boost an economy than war</a>
			</h2>

				<p class="o-teaser__standfirst">The longer a conflict lasts, the heavier the toll on GDP growth</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="2017-08-30T11:05:48Z">2017-08-30T11:05:48Z</time>
				</div>

				<img src="https://www.ft.com/__origami/service/image/v2/images/raw/fthead:john-authers?source=next&amp;width=150&amp;fit=scale-down&amp;compression=best&amp;tint=054593,d6d5d3" alt=" " class="o-teaser__headshot">
		</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">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&amp;source=o-teaser-demo" class="o-teaser__image" alt="demo image">
				</div>
			</div>
	</div>

</div>

Small-image-stacked-live

Small live 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 o-teaser--live" 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 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&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__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-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__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&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__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&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 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&amp;width=75&amp;tint=054593,fff1e0" alt=" " 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">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-live

Large live teaser default theme

<div class="demo-container demo-container--large ">

	<div class="o-teaser o-teaser--large o-teaser--live  " 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 o-teaser__timestamp--inprogress">
				<span class="o-teaser__timestamp-prefix">Live</span>
				<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-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">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&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">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&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">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&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">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&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">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&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">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&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">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&amp;source=o-teaser-demo" class="o-teaser__image" alt="demo image">
				</div>
			</div>
	</div>

</div>

Hero-image

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&amp;source=o-teaser-demo" class="o-teaser__image" alt="demo image">
					</div>
				</a>
			</div>
	</div>
</div>

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

Paid Post teaser

Promoted-content

Small teaser for 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>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>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>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>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>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>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--big-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&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--big-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&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>
Bower Dependencies
o-colors ^4.0.1
o-typography ^5.0.1
o-grid ^4.2.3
o-icons >=4.4.2 <6
o-labels ^3.0.0
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-teaser@^2.1.11

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-teaser"@"^2.1.11"

For more information see the Origami build process.