Hero Title Block

The title block is a navigation item to identify a section home and an optional related "umbrella" section. For example, for a School, the section title would be the name of the School and the umbrella section title would be a link to the College.

Although this is a navigation item, it is not a navigation landmark region and should not be marked up with <nav> or role="navigation"

The title block is required if there is a hero banner image, otherwise it can be omitted.

The title block should not be used if the page h1 is elsewhere in the masthead.

The two links can either be <h1> and <h2> tags, or spans styled with classes .h1 and .h2. If you have a page heading in the main content region, this should use the <h1> tag, and so you should not have an <h1> in the title block, instead you should use spans and classes.

If there is no page title in the main content region, such as a panel layout for the section homepage, then the page's <h1> should be in the title block.

Both the section title and umbrella section title should be links, except for where the <h1> section title would link to the current page, in which case it would not be appropriate to include <a> tags.

Note, although semantically the section title needs to be <h1> with the umbrella section being a subtitle (<h2>) to this, the CSS will reverse the display order so the umbrella section title visually appears above the section title.

Hero Title

Hero Title Heading

Hero Title Headings

Hero Title Styling

Hero Title Stylings