Socket
Socket
Sign inDemoInstall

@financial-times/o-teaser-collection

Package Overview
Dependencies
12
Maintainers
12
Versions
23
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@financial-times/o-teaser-collection

Provides styles to layout out multiple teasers in one section.


Version published
Maintainers
12
Weekly downloads
347
decreased by-35.98%

Weekly downloads

Readme

Source

o-teaser-collection

This component is for displaying collections of o-teasers.

Usage

Check out how to include Origami components in your project to get started with o-teaser-collection.

Markup

The basic markup structure for a teaser collection will look something like this:

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

	<!-- Teasers go here -->
</div>

Teaser collections can be arranged using o-grid, or by using the o-teaser-collection__items and o-teaser-collection__item classes. These classes are designed to work on list elements, as seen in the o-teaser-collection--numbered example:

<div class="o-teaser-collection o-teaser-collection--numbered">
	<h2 class="o-teaser-collection__heading o-teaser-collection__heading--full-width">Most read</h2>
	<ol class="o-teaser-collection__items">
		<li class="o-teaser-collection__item">
			teaser goes here
		</li>
		<li class="o-teaser-collection__item">
			teaser goes here
		</li>
	</ol>
</div>

Teaser Collections can be customised using several modifier classes.

Sass

To include all styles call the oTeaserCollection mixin.

@include oTeaserCollection();

Options

o-teaser-collection css may be included granularly by passing options to the oTeaserCollection mixin.

@include oTeaserCollection($opts: (
	'collections': ('special'), // o-teaser-collection--special
	'headings': ('inverse'), // o-teaser-collection__heading--inverse
	'items': ('stretched') // o-teaser-collection__item--stretched
));

Options include:

KeyPossible ValuesClasses Output
collections'horizontal', 'special', 'numbered', 'big-story', 'assassination', 'assassination-related', 'mid-slice', 'stream', 'top-standalone'o-teaser-collection--[option]. Apply to o-teaser-collection, e.g. class="o-teaser-collection o-teaser-collection--horizontal"
headings'inverse', 'full-width', 'half-width', 'small'o-teaser-collection__heading--[option]. Apply to o-teaser-collection__heading, e.g. class="o-teaser-collection__heading o-teaser-collection__heading--inverse"
items'stretched'o-teaser-collection__item--[option]. Apply to o-teaser-collection__item, e.g. o-teaser-collection__item o-teaser-collection__item--stretched

Use o-teaser-collection--numbered to number the list of teasers in the collection, see an example in the registry.

Use o-teaser-collection--special to add a darker background across the full width of the containing relative element, see an example in the registry.

Headings

To include heading styles output o-teaser-collection__heading classes using the oTeaserCollection mixin as described above. If your component or project would like to replicate only some parts of the heading style use oTeaserCollectionContentHeading.

For example, to replicate only the basic heading style pass an empty map:

.my-heading {
	@include oTeaserCollectionContentHeading($opts: ());
}

To replicate the header fully, but without the size modifiers such as o-teaser-collection__heading--full-width:

.my-heading {
	@include oTeaserCollectionContentHeading($opts: (
		'anchor': true, // Include child anchor styles `.my-heading > a`
		'divider': true, // Include the top border styles.
		'sizes': () // Do not output size modifiers such as `.my-heading--small`.
	));
}

oTeaserCollectionContentHeading options include:

KeyPossible ValuesDescription
anchorBooleanOutput styles for a nested anchor tag, for a collection heading with a link.
dividerBooleanOutput styles for a divider (border) above the collection heading.
sizes'inverse', 'full-width', 'half-width', 'small'Output modifier classes for different sizes headings e.g. my-heading--small.

Migration guide

StateMajor VersionLast Minor ReleaseMigration guide
✨ active4N/Amigrate to v4
⚠ maintained33.0migrate to v3
╳ deprecated22.3migrate to v2
╳ deprecated11.2N/A

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Keywords

FAQs

Last updated on 21 Dec 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc