- Primitives
- o-colors
- o-fonts
- o-grid
- o-loading
- o-typography
- o-visual-effects
- Components
- o-ads
- o-aside-panel
- o-banner
- o-buttons
- o-comments
- o-comment-ui
- o-cookie-message
- o-footer
- o-footer-services
- o-forms
- o-ft-affiliate-ribbon
- o-gallery
- o-header
- o-header-services
- o-hierarchical-nav
- o-labels
- o-layout
- o-load
- o-message
- o-overlay
- o-quote
- o-share
- o-squishy-list
- o-subs-card
- o-syntax-highlight
- o-table
- o-tabs
- o-teaser
- o-teaser-collection
- o-tooltip
- o-tracking
- o-video
- Layouts
- o-techdocs
- Utilities
- o-ads-embed
- o-assets
- o-autoinit
- o-comment-count
- o-date
- o-dom
- o-element-visibility
- o-errors
- o-expander
- o-fetch-jsonp
- o-fonts-assets
- o-hoverable
- o-icons
- o-layers
- o-normalise
- o-toggle
- o-utils
- o-viewport
- Imagesets
- fticons
- headshot-images
- logo-images
- origami-brand-images
- origami-flag-images
- origami-specialist-title-logos
- social-images
- Services
- origami-bower-registry
- origami-build-service
- origami-image-service
- origami-navigation-service
- origami-registry-ui
- origami-repo-data
- polyfill-service
- polyfill-service-serverless
- Uncategorised
- eslint-config-origami-component
- express-web-service
- ftheadshots
- ft-origami
- get-github-public-organisation-repositories
- get-origami-repos
- github-label-sync
- grafana-tools
- node-health-check
- o-chat
- origami-build-tools
- origami-image-set-tools
- origami-navigation-data
- origami-react
- origami-repo-data-client-node
- origami-service
- origami-service-makefile
- release-log
- source-param-middleware
- streamcat
- svg-tint-stream
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 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&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&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">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
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&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&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&width=75&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 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&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&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&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&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&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&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&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&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&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&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&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>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
<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>Promoted Content
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>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&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&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.7.3 |
| 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.2.7
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.2.7"
For more information see the Origami build process.