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>
Status
active Origami v1 (Bower)
Switch component view

GitHub Repository

Install o-teaser-collection

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-teaser-collection@^3.0.8".

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: #origami-support
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: #origami-support
Email: origami.support@ft.com