@financial-times/o-top-banner v2.0.0

o-top-banner

o-top-banner is used for marketing or enhancement messages along the top of the page. For similar messaging as an overlay, typically bottom left, see o-banner. For service messaging such as "success" or "error" see o-message.

• Usage
• Themes
• Markup
• Sass
• Migration
• Contact
• Licence

Usage

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

Themes

By default, o-top-banner supports 2 themes:

• professional-inverse – Exclusive used to advertise FT Professional.
• new-world

Markup

Use the following markup for o-top-banner. Replace o-top-banner--[theme] with your theme and include relevant copy for the heading, copy, and button elements.

<div class="o-top-banner o-top-banner--[theme]">
	<div class="o-top-banner__container">
		<div class="o-top-banner__content">
			<h2 class="o-top-banner__heading">Your heading</h2>
			<p class="o-top-banner__copy">You main copy goes here.</p>
		</div>

		<div class="o-top-banner__actions">
			<a href="#" class="o-top-banner__button">Your CTA</a>
		</div>
	</div>
</div>

Sass

Use @include oTopBanner() to include styles for all o-top-banner themes.

@import '@financial-times/o-top-banner';

@include oTopBanner();

Or use the $opts argument to output only the specific themes you need:

@import '@financial-times/o-top-banner';

@include oTopBanner(
	$opts: (
		'themes': (
			'new-world',
			'professional-inverse',
		),
	)
);

Migration

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@ft.com.

Licence

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