Basic page layout

<GoabOneColumnLayout>
  <section slot="header">
    <GoabAppHeader url="/" heading="Service name">
      <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>

<goab-column-layout>
  <section slot="header">
    <goab-app-header url="/" heading="Service name">
      <a href="/login">Sign in</a>
    </goab-app-header>
  </section>
  <goab-page-block width="704px">
    <p>
      <goab-skeleton type="header" size="4"></goab-skeleton>
      <goab-skeleton type="text" size="1"></goab-skeleton>
    </p>
    <p>
      <goab-skeleton type="header" size="4"></goab-skeleton>
      <goab-skeleton type="text" size="1"></goab-skeleton>
    </p>
    <goab-grid minChildWidth="30ch">
      <goab-skeleton type="card" size="2"></goab-skeleton>
      <goab-skeleton type="card" size="2"></goab-skeleton>
    </goab-grid>
  </goab-page-block>
  <section slot="footer">
    <goab-app-footer></goab-app-footer>
  </section>
</goab-column-layout>

<goa-one-column-layout>
  <section slot="header">
    <goa-app-header version="2" url="/" heading="Service name">
      <a href="/login">Sign in</a>
    </goa-app-header>
  </section>
  <goa-page-block width="704px">
    <p>
      <goa-skeleton type="header" size="4"></goa-skeleton>
      <goa-skeleton type="text" size="1"></goa-skeleton>
    </p>
    <p>
      <goa-skeleton type="header" size="4"></goa-skeleton>
      <goa-skeleton type="text" size="1"></goa-skeleton>
    </p>
    <goa-grid min-child-width="30ch">
      <goa-skeleton type="card" size="2"></goa-skeleton>
      <goa-skeleton type="card" size="2"></goa-skeleton>
    </goa-grid>
  </goa-page-block>
  <section slot="footer">
    <goa-app-footer version="2"></goa-app-footer>
  </section>
</goa-one-column-layout>

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

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

View old example docs