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

State | Major Version | Last Minor Release | Migration guide | :---: | :---: | :---: | :---: ✨ active | 1 | 1.0 | N/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 [email protected].

Licence

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