active
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>| Bower Dependencies | |
|---|---|
| o-colors | ^4 |
| o-typography | ^5 |
| o-icons | >=4.4.2 <6 |
| o-grid | ^4.2.3 |
GitHub Repository
Quickstart
Build Service
Add the following to your
<link> tag
o-teaser-collection@^2.2.0
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-collection"@"^2.2.0"
For more information see the Origami build process.