Origami Frontend Components & Services

Demos: o-teaser-collection

Basic

Standard teaser collection

<div class="o-teaser-collection ">
	<h2 class="o-teaser-collection__heading">
			Collection Heading
	</h2>

	<!-- o-grid included in the demo as an example -->
	<!-- `o-teaser-collection__items` or a custom container could also be used -->
	<!-- see the readme for details -->
	<div class="o-grid-container">
		<div class="o-grid-row">
			<p class="demo-paragraph">teasers go here</p>
		</div>
	</div>

</div>

Linked Heading

Standard teaser collection with a linked heading. A linked heading may be applied to any teaser theme.

<div class="o-teaser-collection ">
	<h2 class="o-teaser-collection__heading">
			<a class="o-teaser-collection__heading-link" href="#">Collection Heading</a>
	</h2>

	<!-- o-grid included in the demo as an example -->
	<!-- `o-teaser-collection__items` or a custom container could also be used -->
	<!-- see the readme for details -->
	<div class="o-grid-container">
		<div class="o-grid-row">
			<p class="demo-paragraph">teasers go here</p>
		</div>
	</div>

</div>

Responsive Heading (full-width on desktop)

The heading border is reduced in size responsively. This can be changed with modifier classes. See the readme for more options.

<div class="o-teaser-collection ">
	<h2 class="o-teaser-collection__heading o-teaser-collection__heading--full-width">
			<a class="o-teaser-collection__heading-link" href="#">Collection Heading</a>
	</h2>

	<!-- o-grid included in the demo as an example -->
	<!-- `o-teaser-collection__items` or a custom container could also be used -->
	<!-- see the readme for details -->
	<div class="o-grid-container">
		<div class="o-grid-row">
			<p class="demo-paragraph">teasers go here</p>
		</div>
	</div>

</div>

Inverse Heading

The heading colour may be inversed for use on a slate (or other dark) background.

<div class="o-teaser-collection ">
	<h2 class="o-teaser-collection__heading o-teaser-collection__heading--inverse">
			<a class="o-teaser-collection__heading-link" href="#">Collection Heading</a>
	</h2>

	<!-- o-grid included in the demo as an example -->
	<!-- `o-teaser-collection__items` or a custom container could also be used -->
	<!-- see the readme for details -->
	<div class="o-grid-container">
		<div class="o-grid-row">
			<p class="demo-paragraph">teasers go here</p>
		</div>
	</div>

</div>

Collection: horizontal

Teasers in horizontal rather than standard column layout

<div class="o-teaser-collection  o-teaser-collection--horizontal">
	<h2 class="o-teaser-collection__heading">
			Collection Heading
	</h2>

	<!-- o-grid included in the demo as an example -->
	<!-- `o-teaser-collection__items` or a custom container could also be used -->
	<!-- see the readme for details -->
	<div class="o-grid-container">
		<div class="o-grid-row">
			<p class="demo-paragraph">teasers go here</p>
		</div>
	</div>

</div>

Collection: special

<div class="o-teaser-collection  o-teaser-collection--special">
	<h2 class="o-teaser-collection__heading">
			Collection Heading
	</h2>

	<!-- o-grid included in the demo as an example -->
	<!-- `o-teaser-collection__items` or a custom container could also be used -->
	<!-- see the readme for details -->
	<div class="o-grid-container">
		<div class="o-grid-row">
			<p class="demo-paragraph">teasers go here</p>
		</div>
	</div>

</div>

Collection: numbered and special

<div class="o-teaser-collection  o-teaser-collection--numbered o-teaser-collection--special">
	<h2 class="o-teaser-collection__heading">
			Collection Heading
	</h2>


	<ol class="o-teaser-collection__items">
		<li class="o-teaser-collection__item">
			<p class="demo-paragraph">teasers go here</p>
		</li>
		<li class="o-teaser-collection__item">
			<p class="demo-paragraph">teasers go here</p>
		</li>
		<li class="o-teaser-collection__item">
			<p class="demo-paragraph">teasers go here</p>
		</li>
		<li class="o-teaser-collection__item">
			<p class="demo-paragraph">teasers go here</p>
		</li>
		<li class="o-teaser-collection__item">
			<p class="demo-paragraph">teasers go here</p>
		</li>
		<li class="o-teaser-collection__item">
			<p class="demo-paragraph">teasers go here</p>
		</li>
	</ol>
</div>

Collection: mid slice

<div class="o-teaser-collection  o-teaser-collection--mid-slice">
	<h2 class="o-teaser-collection__heading">
			Collection Heading
	</h2>

	<!-- o-grid included in the demo as an example -->
	<!-- `o-teaser-collection__items` or a custom container could also be used -->
	<!-- see the readme for details -->
	<div class="o-grid-container">
		<div class="o-grid-row">
			<p class="demo-paragraph">teasers go here</p>
		</div>
	</div>

</div>
Switch component view

GitHub Repository

Install o-teaser-collection

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

If running a Manual Build, run bower install --save "o-teaser-collection@^3.0.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