Skip to main content

Catalog · Site-wide

Announcement

Tells every visitor one short thing at the top of the page, such as a sale, an event or planned maintenance.

Fits best: any site — a short notice for every visitor, such as a sale or planned maintenance

Example

Two announcements: an invitation to an open day and a notice of planned maintenance.

Open day. Visit the winery on Saturday 25 October, from 11:00 to 18:00. Book a visit

Planned maintenance. The shop will be closed on Monday 3 November from 07:00 to 09:00. See what still works

On a site the announcement goes above the header, as wide as the window, and its text starts where the header’s row starts. Here it is as wide as the example.

Known issues

It cannot be closed: a close button needs a script, and a choice that lasts from page to page needs storage. Keep the announcement short and remove it from the markup when it ends.

In a browser without CSS anchor positioning (before Chrome and Edge 125, Safari 26, Firefox 147), the header’s menu at 768 px and below opens at the top of the window, so before the page scrolls it covers part of the header under an announcement; Escape or a click outside closes it.

Code

Copy the markup

Bundler 
import "@luz-ds/catalog/components/announcement.css";
HTML 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/announcement.min.css" integrity="sha384-q0dIp3JUb6xhG3u2VrEi+FU6Pgte4vL+70kh9fakM9rl9ARR/E8M/OilkMZiaNbC" crossorigin="anonymous">

A <luz-announcement> around one <section> named by its first words, after the skip link and the cookie consent, before the header of the page (the site header or the masthead).

HTML 
<a class="luz-skip-link" href="#main">Skip to main content</a>
<luz-announcement>
  <section aria-labelledby="announcement-label">
    <p><strong id="announcement-label">Open day.</strong> Visit the winery on Saturday 25 October,
      from 11:00 to 18:00. <a href="/visits/">Book a visit</a></p>
  </section>
</luz-announcement>
<header>…</header>

Variants and options

Tag or attributeEffect
<luz-announcement>
Around one <section>, which becomes a band as wide as its container, on a muted surface with a rule under it, in small sans text. Its text starts where the header’s row starts. A tag that no script defines: no class, no role of its own
tone="warning"
On the tag, the one tone: The warning colours: for something that stops the visitor doing what they came to do, such as maintenance. Say it in the words too: “Planned maintenance.” Any other value leaves the plain band

How it works

CSS from @luz-ds/catalog. No JavaScript: <luz-announcement> is a tag that no script ever defines.

  • It is a band of the page, in the flow: it scrolls away with the page, and an .o-sticky header stays at the top under it. Nothing covers the page.
  • Its inline padding lines its text up with the header’s row, up to --luz-content-max wide, in either direction of text.
  • There is no close button. Closing it for good needs a script and a value stored in the browser, and a button that does nothing without a script is never shown. An announcement is short-lived: remove it from the markup when the event is over.
  • There is no success or error tone: an announcement is not the answer to something the visitor did. For that use an alert in the page.

Without JavaScript

Nothing changes: there is no script.

Keyboard and ARIA

  • Order: its link comes after the skip link and before the header.
  • Landmark: it is not the banner landmark, which is the page’s <header>; that is why it is called an announcement. A <section> with a name is a region, so a screen reader lists it among the landmarks; name it with aria-labelledby pointing at its first words. If it says nothing more than its sentence, a <div> with no name is fine.
  • Not a live region: it is there when the page loads, so it needs no role="status" or role="alert"; a screen reader reads it with the rest of the page.

Contrast and focus are in the Design tab.

Design

When to use

Use it for one short, timely thing every visitor of the site should know, on every page, for a few days: a sale, an event, planned maintenance, a change of opening hours.

When not to use

Do not use it for something that belongs to one page or to one visitor: put that in the page, or answer with an alert or a toast.

  • Do not show two announcements at once, and do not leave one up for months: a band that never changes is no longer read.
  • Do not use it to ask for cookies: use the cookie consent banner.
  • Do not put a form or more than one link in it.

It replaces the announcement bars a site builds with its own CSS. Nothing in LUZ is removed.

Do and don't

Do Start with what it is about, in bold, say when, and end with one link that says where it goes.
Don't Rely on the yellow to say it is a warning, shout in capitals, or leave out the date: the words alone must carry the message, and “soon” is wrong a day later.

Writing the content

One sentence, two at most. Start with what it is about, in bold, ending with a full stop: “Open day.”, “Planned maintenance.”.

  • Give the date and the time, with the day of the week, so it is still true when read late.
  • End with one link that says where it goes: “Book a visit”, not “More information”.
  • Write in sentence case, with no exclamation marks.

Contrast and focus

The text and its link sit on the band’s surface.

PartColour on backgroundLightDarkHigh contrastNeeds
Text
--luz-text-primary on --luz-surface-muted
15.8:1
15.1:1
20.1:1
4.5:1
Link
--luz-brand-primary on --luz-surface-muted
5.6:1
7.7:1
13.5:1
4.5:1
Text, warning
--luz-text-primary on --luz-color-warning-bg over --luz-surface-page
16.0:1
11.5:1
20.0:1
4.5:1
Link, warning
--luz-brand-primary on --luz-color-warning-bg over --luz-surface-page
5.7:1
5.9:1
13.5:1
4.5:1
Focus ring on the link
--luz-focus-ring on --luz-surface-muted
5.6:1
7.7:1
20.1:1
3:1
Focus ring on the link, warning
--luz-focus-ring on --luz-color-warning-bg over --luz-surface-page
5.7:1
5.9:1
20.0:1
3:1

Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings.

  • Focus: core’s 2 px --luz-focus-ring outline around the link.
  • The link is underlined, as every link in text is: not only a colour.
  • The warning’s yellow is never the only signal: its first words say what it is.

Tokens it uses

The 11 tokens that the rules of catalog’s components/announcement.css read, by family. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.

Spacing and sizing
--luz-space-xs, --luz-space-md, --luz-space-xl
Typography
--luz-font-sans, --luz-text-sm
Layout and breakpoints
--luz-content-max

Keyboard and ARIA are in the Code tab.

Last updated · Edit this page · Report a problem