Origami Frontend Components & Services

SassDoc: o-banner

oBanner(opts)

Output o-banner CSS.

parameter type default description
opts The o-banner features to output. See the [readme](https://registry.origami.ft.com/components/o-banner) for a full list of options.

Examples

Example #1

all o-banner styles.

@include oBanner();

Example #2

only the small layout

@include oBanner($opts: (
	'layouts': ('small')
));

Example #3

the small layout and marketing theme

@include oBanner($opts: (
	'layouts': ('small'),
	'themes': ('marketing'),
));

Links

oBannerAddTheme(theme-name, opts)

Add a theme modifier for banners.

The output includes the .o-banner--THEME modifier class definition, which includes all overrides.

parameter type default description
theme-name The banner theme to output styles for. See README for available themes, or specify a custom one if providing $opts.
opts (optional) null A brand configuration which can be used to create a custom banner theme. See README for more examples.

Examples

Example #1

Existing banner theme

@include oBannerAddTheme('marketing');

Example #2

Custom banner theme

@include oBannerAddTheme('bubblegum', (
    background-color: oColorsMix('candy', 'white', 75),
    text-color: oColorsByName('oxford-90')
));

Links

oBanner(opts)

Output o-banner CSS.

parameter type default description
opts The o-banner features to output. See the [readme](https://registry.origami.ft.com/components/o-banner) for a full list of options.

Examples

Example #1

all o-banner styles.

@include oBanner();

Example #2

only the small layout

@include oBanner($opts: (
	'layouts': ('small')
));

Example #3

the small layout and marketing theme

@include oBanner($opts: (
	'layouts': ('small'),
	'themes': ('marketing'),
));

Links

Support Status
active
Switch component view

GitHub Repository

Install o-banner

If using the Build Service, add o-banner@^3.3.3 to your script and link tags.

If running a Manual Build, run bower install --save "o-banner@^3.3.3".

Help & Support

o-banner is maintained directly by the Origami team. If you have any questions about o-banner 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