# Masthead Starts the front page and the sections of a newspaper with the date, a search, the publication's name in large type and its sections, in three rows that scroll away with the page. ### Known issues The masthead's own issue, and those of the pieces it is made of. - **The masthead's menu without anchor positioning.** In browsers without CSS anchor positioning, the sections menu of the masthead header opens near the top of the window and covers the publication name and the menu button while it is open. Escape, or a click outside the menu, closes it and returns to the page. - **The menu panel.** If you keep pressing Tab after the last link of the open menu, focus moves on into the page and the menu stays open over it; Escape closes it. See the [navbar's known issues](https://nandovejer.github.io/luz/docs/catalog/navbar/#known-issues). ### Copy the markup With catalog's search in the top row: Masthead markup ```html ``` ### Variants and options No modifiers. The masthead is a class of catalog on a native `

`, laid out by core's objects in the markup. - `.luz-masthead`: On `

`: the newspaper's masthead. The page surface, three rows in an `.o-stack`, 16 px above and below, not sticky - `.luz-masthead__top`: On a `.o-row`: the date at the start and the actions at the end, on one row - `.luz-masthead__date`: Today's date in a ``, small and secondary; it wraps to give the actions their room - `.luz-masthead__actions`: On a `.o-row`: catalog's [search](https://nandovejer.github.io/luz/docs/catalog/search/), then its [language switch](https://nandovejer.github.io/luz/docs/catalog/lang-switch/) - `.luz-masthead__brand`: The publication's name as a link to the home page, in the heading font, large and centred, semibold, underlined on hover only. A logo `` inside it is 88 px tall - `.luz-masthead__sections`: On a `.o-row`: the menu button and the navbar between two rules, centred from 769 px; its panel opens under this row - `.o-container.o-container--inline.o-stack` (core): The width and gutters of the page, so the masthead starts where the content starts, and its three rows - `.luz-nav-toggle`, `.luz-navbar` (catalog): The menu button and the sections: see the [navbar](https://nandovejer.github.io/luz/docs/catalog/navbar/) ### How it works CSS from `components/masthead.css` of `@luz-ds/catalog` on core's objects and the catalog's navbar. No JavaScript. - The masthead adds the skin only: the page surface, the brand, the rules of the sections row and the date. Core gives the rest: `.o-container--inline` the gutters, `.o-row` and `.o-stack` the rows, and the navbar the links and their panel. - The masthead is not sticky: three rows stuck to the top would take a third of a phone's screen. Its brand is 49 px from 1024 px, 39 px below and 31 px at 640 px and below (`--luz-text-4xl`, `-3xl` and `-2xl`, the steps of the hero). - The masthead, and the sections row inside it, name themselves the anchor `--luz-bar`, scoped to themselves. Where the browser supports CSS anchor positioning, the navbar's panel opens under the sections row. Elsewhere it opens at `--luz-bar-h` from the top of the window (see Known issues). - With `@luz-ds/catalog`, the list of its `` opens under the masthead. Without it nothing changes: the rules that refine the catalog's elements match nothing. ### Without JavaScript Nothing changes: the menu is a popover opened by the button's `popovertarget`, with no script, the links are plain links, and catalog's search shows its link to the A–Z index. ### Keyboard and ARIA - **Order:** the order of the source: the actions of the top row, the brand, then the menu button and the sections. - **Keys:** Enter or Space on the menu button opens and closes the panel; Escape closes it and returns focus to the button. The panel is not modal: Tab after its last link moves on. - **Names:** the `

` and the menu button are both named "Sections"; the browser exposes the button's expanded state. The section of an article has `aria-current="true"`, the section's own index `aria-current="page"`; both are underlined. - **Brand:** a link, never a heading: the story's title is the page's one `h1`. A logo is an `` whose `alt` is the publication's name, with no text beside it. - **Landmarks:** a `

` that is a direct child of `` is the banner. Put the [skip link](https://nandovejer.github.io/luz/docs/components/skip-link/) before it. ### When to use Use the masthead at the top of a newspaper's front page and of its sections, where the name and the date set the tone and the reader reaches every section. ### When not to use Do not use it on every page of a blog: for one row that stays at the top, use the [site header](https://nandovejer.github.io/luz/docs/catalog/site-header/) with `--publication`. - One header per page, never inside a component or an article: it is the page's banner. - Do not make the masthead sticky, and do not put the date in a one-row bar: in one row it competes with the name.