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.

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

• "oTeaserCollection" mixin on Github

oTeaserCollectionContentHeading(opts)

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

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

• "oTeaserCollectionContentHeading" mixin on Github