Origami Frontend Components & Services

Demos: o-teaser-collection

o-teaser-collection 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.

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.3.2 to your link tag.

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

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