Origami Frontend Components & Services

SassDoc: o-teaser-collection

oTeaserCollection(opts)

Output all o-teaser-collection styles. Accepts an options map to include features granularly. See the README for more details of all available options.

parameter type default description
opts (optional) ('collections': ('horizontal', 'special', 'numbered', 'big-story', 'assassination', 'assassination-related', 'mid-slice', 'stream', 'top-standalone'), 'headings': ('inverse', 'full-width', 'half-width', 'small'), 'items': ('stretched'))

Examples

Example #1

include all o-teaser-collection styles.

@include oTeaserCollection();

Example #2

include all o-teaser-collection styles with only the "big story" modifier.

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

Links

oTeaserCollectionContentHeading(opts)

Styles used witin o-teaser-collection__heading, including size modifiers.

parameter type default description
opts (optional) ('anchor': true,'divider': true,'sizes': ('full-width', 'half-width', 'small'))

Examples

Example #1

all heading styles.

.my-collection-heading {
	@include oTeaserCollectionContentHeading();
}

Example #2

the standard heading styles but do not style any child anchor element, and do not output modifier classes for different sized headings.

.my-collection-heading {
	@include oTeaserCollectionContentHeading($opts: (
		'anchor': false,
		'divider': true,
		'sizes': ()
	));
}

Example #3

a modifier class for a "small" collection heading.

.my-collection-heading {
	@include oTeaserCollectionContentHeading($opts: (
		'anchor': true,
		'divider': true,
		'sizes': ('small') // .my-collection-heading--small
	));
}

Links

Support Status
active
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