Skip to content

Simple Header Bar

A Simple Header Bar shows a short, high-priority announcement above the main navigation — a message, an optional call to action, and a close button.

  • CSS

Maintained by Platform

Usable — may still change

DesignCSSAccessibility

The Simple Header Bar is a slim, full-width strip that sits above the main navigation and carries a single high-priority announcement — a short message, an optional call to action, and a close button. It draws attention with a saturated surface (a flat solid on Toyota, a copper gradient on Lexus) and light text, then gets out of the way once the user dismisses it. Reach for it to surface something timely and relevant to everyone on the page, not to run generic marketing.

Anatomy

Section titled “Anatomy”
This is a small description This is a button
  1. Header bar
  2. Message
  3. Call to action
  4. Close

The Header bar is the surface that spans the top of the page and sets the announcement apart with its brand fill and contrast text. The Message carries the announcement in a short, scannable piece of text. The Call to action is an optional link that lets the user act on the message. The Close button lets the user dismiss the bar.

When to use it

Section titled “When to use it”

Use a Simple Header Bar when:

  • You have a single, high-priority message that is relevant to everyone on the page — a service notice, a deadline, an important update.
  • The message is short enough to scan at a glance and, at most, points to one action.
  • The announcement can be dismissed and should stay out of the way once it has been seen.

Avoid a Simple Header Bar when:

  • The message is generic marketing noise rather than timely, relevant information.
  • You need more than one call to action, or a long block of copy — keep it to one idea and one action.
  • The content belongs inline with the page rather than pinned above it — a header bar carries one page-level announcement, not a contextual, severity-coded message.
  • It would block or overshadow the main navigation, or you would stack several bars at once.

Properties

Section titled “Properties”

Message

The message is the heart of the bar — a single, short line set in the title-10 type so it reads clearly against the saturated surface. Keep it to one scannable idea; a long message truncates with an ellipsis rather than pushing the other elements around.

Call to action

An optional link (a tertiary button) that lets the user act on the announcement — “Learn more”, “Book now”. Use at most one, and drop it entirely when the message stands on its own; the layout re-centres the message when the CTA is absent.

Close

An icon-only close button, pinned to the trailing edge, dismisses the bar. Dismissal is always available so the announcement never traps the user.

Surface

The bar carries a saturated brand surface with contrast text: Toyota uses a flat solid background, while Lexus renders a copper gradient. The treatment is brand-driven — the markup is identical across brands.

Platform considerations

Section titled “Platform considerations”

Desktop

The message and its CTA sit together, centred across the bar, with the close button pinned to the trailing edge. There is room for the announcement to breathe, so the group reads as one balanced unit.

Tablet

The same centred layout holds. Keep the message short so it stays on one line as the bar narrows, and let the CTA sit comfortably beside it.

Mobile

Space is tight, so the message aligns to the leading edge and truncates with an ellipsis while the CTA and close move to the trailing edge — the announcement stays legible and the action stays reachable without wrapping the button.

Best practices

Section titled “Best practices”

The bar works best when it carries one timely message that everyone on the page benefits from, and disappears cleanly once it has been seen.

Do

Use it for high-priority, relevant information. Keep the content short and scannable, provide a single clear CTA, make it dismissible, and respect the user’s dismissal for the rest of the session. Make sure it works across every breakpoint.

Don't

Don’t overload it with text or multiple CTAs, or use it for generic marketing noise. Don’t stack several banners, and don’t let it block or overshadow the main navigation. Don’t re-show it after dismissal in the same session unless the message is critical, and never rely on colour alone to carry the meaning.

Content guidelines

Section titled “Content guidelines”

Keep the message to one short, scannable line in sentence case — name the announcement in plain language and lead with what matters. Pair it with at most one call to action, labelled with a clear verb (“Learn more”, “Book now”). If the message is time-sensitive, make the urgency clear in the words rather than leaning on the surface colour, and keep the whole bar to a single idea so it reads at a glance.