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
Switch component view

GitHub Repository

Install o-teaser-collection

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-teaser-collection@^4.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: #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