Back to all examples

Basic page layout

ReactAngularWeb Components
<GoabOneColumnLayout>
      <section slot="header">
        <GoabMicrositeHeader type="alpha" version="UAT" />
        <GoabAppHeader url="/" heading="Design System">
          <a href="/login">Sign in</a>
        </GoabAppHeader>
      </section>
      <GoabPageBlock width="704px">
        <p>
          <GoabSkeleton type="header" size="4" />
          <GoabSkeleton type="text" size="1" />
        </p>
        <p>
          <GoabSkeleton type="header" size="4" />
          <GoabSkeleton type="text" size="1" />
        </p>
        <GoabGrid minChildWidth="30ch">
          <GoabSkeleton type="card" size="2" />
          <GoabSkeleton type="card" size="2" />
        </GoabGrid>
      </GoabPageBlock>
      <section slot="footer">
        <GoabAppFooter />
      </section>
    </GoabOneColumnLayout>

A basic page template to use as a starting point.

When to use

Use this pattern when:

  • Starting a new government service or application
  • You need a standard page structure with header and footer
  • Building pages that need consistent layout across your service

Considerations

  • Include both microsite header and app header for proper government branding
  • Use page-block to constrain content width appropriately
  • The skeleton loaders show content areas during loading states
  • Always include an app footer for consistent navigation and required links