Origami Frontend Components & Services

Demos: o-teaser

o-teaser hasn't been branded yet, it only supports the master brand. If you would like to discuss having it branded please get in touch with the Origami team.

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  demo-container--live ">

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

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 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">
					<a href="#">
						Bondholders pay government for the privilege of lending it money
					</a>
				</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">
					<a href="#">
						Bondholders pay government for the privilege of lending it money
					</a>
				</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

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

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

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

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__duration" 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 o-teaser__timestamp--inprogress">
					<span class="o-teaser__timestamp-prefix">Live</span>
					<time data-o-component="o-date" class="o-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__duration" 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 o-teaser__timestamp--inprogress">
					<span class="o-teaser__timestamp-prefix">Live</span>
					<time data-o-component="o-date" class="o-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__duration" 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 o-teaser__timestamp--inprogress">
					<span class="o-teaser__timestamp-prefix">Live</span>
					<time data-o-component="o-date" class="o-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 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">
					<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-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">
					<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-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">
					<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-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">
					<a href="#">
						Bondholders pay government for the privilege of lending it money
					</a>
				</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">
					<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 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">
					<a href="#">
						Bondholders pay government for the privilege of lending it money
					</a>
				</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">
					<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-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">
					<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-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 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__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--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&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__duration" 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__duration" 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>
Switch component view

GitHub Repository

Install o-teaser

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

If running a Manual Build, run bower install --save "o-teaser@^3.5.6".

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

Feedback / Issues

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

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