Structure

<Site>
  <Layout>
    <SkipLink />
    <Header>
      <Search />
      <Menu />
    </Header>
    <Breadcrumbs />
    <Main>..</Main>
    <Footer />
  </Layout>
</Site>

The relationship between the structure components

Site

Use this component to:

set the page title and description
load the brand font
import the viewport scale
normalise CSS styles

View Site code on GitHub.

Layout

Use this component to:

add space around the page
limit the width of the page

View Layout code on GitHub.

Use this component to skip to the main content.

Focus component to reveal.

View Skip Link code and Skip Link research on GitHub.

Use this component to navigate to top and secondary level items.

You should:

aim to have the items visible on all viewport sizes

View Menu code and Menu research on GitHub.

Search

Use this component for searches.

View Search code and Search research on GitHub.

Use this component to display the Barnardo’s logo and optional Search and Menu.

View Header code and Header research on GitHub.

Breadcrumbs

Use this component to help a user identify their current location.

You should:

only represent individual pages

You should avoid:

displaying the current page

View Breadcrumbs code and Breadcrumbs research on GitHub.

Main

Use this component for the main content of a page.

View Main code on GitHub.

Use this component for the copyright notice and optional links.

View Footer code and Footer research on GitHub.