Layout

A structural template that supports consistency across applications by defining visual grids, spacing, and sections.

Code examples

Basic page layout

<GoAOneColumnLayout>
  <section slot="header">
    <GoAMicrositeHeader type="alpha" version="UAT"></GoAMicrositeHeader>
    <GoAAppHeader url="/" heading="Design System">
      <a href="/login">
        Sign in
      </a>
    </GoAAppHeader>
  </section>
  <GoAPageBlock width="704px">
    <p>
      <GoASkeleton type="header" size="4"></GoASkeleton>
      <GoASkeleton type="text" size="1"></GoASkeleton>
    </p>
    <p>
      <GoASkeleton type="header" size="4"></GoASkeleton>
      <GoASkeleton type="text" size="1"></GoASkeleton>
    </p>
    <GoAGrid minChildWidth="30ch">
      <GoASkeleton type="card" size="2"></GoASkeleton>
      <GoASkeleton type="card" size="2"></GoASkeleton>
    </GoAGrid>
  </GoAPageBlock>
  <section slot="footer">
    <GoAAppFooter></GoAAppFooter>
  </section>
</GoAOneColumnLayout>

Design guidelines

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours