Origami Frontend Components & Services

Demos: o-teaser-collection

This version of o-teaser-collection hasn't been branded yet. Please check the latest version, 2.3.3, as branding is a relatively new addition to our components.

Standard

Standard teaser collection

<div class="demo-container">
	<div class="o-teaser-collection ">
		<h2 class="o-teaser-collection__heading"><a class="o-teaser-collection__heading-link" href="#">Brexit</a></h2>
		<p>teasers go here</p>
	</div>
</div>

<div class="demo-container">
	<div class="demo-assassination">
		<h2 class="o-teaser-collection__heading"><a class="o-teaser-collection__heading-link" href="#">Brexit</a></h2>
		<p>teasers go here</p>
	</div>
</div>

Special

Special teaser collection with highlighted background

<div class="demo-container">
	<div class="o-teaser-collection o-teaser-collection--special">
		<h2 class="o-teaser-collection__heading">Brexit</h2>
		<p>teasers go here</p>
	</div>
</div>

Numbered

Numbered teaser collection

<div class="demo-container">
	<div class="o-teaser-collection o-teaser-collection--numbered demo-slim-collection">
		<h2 class="o-teaser-collection__heading o-teaser-collection__heading--full-width">Most Popular of a really long topic that goes on two lines</h2>
		<ol class="o-teaser-collection__items">
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
		</ol>
	</div>
</div>

Horizontal

Teasers in horizontal rather than standard column layout

<div class="demo-container">
	<div class="o-teaser-collection o-teaser-collection--horizontal demo-slim-collection">
		<h2 class="o-teaser-collection__heading">Recent News</h2>
		<ul class="o-teaser-collection__items">
			<li class="o-teaser-collection__item">
				<p style="padding-right:16px;">First teaser goes here</p>
			</li>
			<li class="o-teaser-collection__item">
				<p style="padding-right:16px;">Second teaser goes here</p>
			</li>
			<li class="o-teaser-collection__item">
				<p style="padding-right:16px;">Third teaser goes here</p>
			</li>
			<li class="o-teaser-collection__item">
				<p style="padding-right:16px;">Fourth teaser goes here</p>
			</li>
			<li class="o-teaser-collection__item">
				<p style="padding-right:16px;">Fifth teaser goes here</p>
			</li>
			<li class="o-teaser-collection__item">
				<p style="padding-right:16px;">Sixth teaser goes here</p>
			</li>
		</ul>
	</div>
</div>

Horizontal Numbered

Numbered teasers in horizontal rather than standard column layout

<div class="demo-container">
	<div class="o-teaser-collection o-teaser-collection--numbered o-teaser-collection--horizontal demo-slim-collection">
		<h2 class="o-teaser-collection__heading o-teaser-collection__heading">Most Popular</h2>
		<ol class="o-teaser-collection__items">
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
			<li class="o-teaser-collection__item">
				teaser goes here<br><br><br>
			</li>
		</ol>
	</div>
</div>

Narrow

Standard teaser at narrow width collection

<div class="demo-container">
	<div class="o-teaser-collection demo-slim-collection">
		<h2 class="o-teaser-collection__heading o-teaser-collection__heading--small"><a class="o-teaser-collection__heading-link" href="#">Brexit</a></h2>
		<p>teasers go here</p>
	</div>
</div>
Switch component view

GitHub Repository

Install o-teaser-collection

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

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

Help & Support

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