The header for the front page of a Platform Manager module: a logo, a title and a subtitle. You choose the content. The look is fixed on purpose.

Platform Manager

An operational control plane built on top of the digital foundation.

Install

Requires @intility/bifrost-experimental, installed and set up. Then import the component:

import FrontpageHeader from "@intility/bifrost-experimental/FrontpageHeader";

Usage

<FrontpageHeader
  logo={<img src="/logo.svg" alt="" />}
  title="Platform Manager"
  subtitle="An operational control plane built on top of the digital foundation."
/>

The title is the h1 of the page, so use the component once per page, and don't add another h1. The subtitle and the logo are optional.

With the twinkle background

The header has no backdrop of its own. To keep the text readable on the twinkle background, wrap the title and the subtitle in a Backdrop:

<FrontpageHeader
  logo={<img src="/logo.svg" alt="" />}
  title={<Backdrop>Platform Manager</Backdrop>}
  subtitle={<Backdrop>An operational control plane ...</Backdrop>}
/>

Good to know

• It renders a div, not a header, so it adds no landmark and can go inside or outside <main>.
• The logo is shown 72px high, with its proportions kept, and is hidden on small screens.
• Use an empty alt on the logo when the title already names the app, so screen readers don't read the name twice.