Grid

Arrange a number of components into a responsive grid pattern.

Props

gap

Spacing

Gap between child items.

Defaults to m.

minchildwidth

string

Minimum width of the child elements

testId

string

Sets a data-testid attribute for automated testing.

mt, mr, mb, ml

none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Examples

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-one-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-one-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>

Card grid

<GoabGrid gap="xl" minChildWidth="320px">
      <GoabContainer accent="thin" mb="none">
        <GoabLink size="large" mb="m">
          <a href="#">Waitlist submission</a>
        </GoabLink>
        <GoabText mt="none" mb="none">
          Enter and maintain information about the households waiting for affordable housing
          with your organization.
        </GoabText>
      </GoabContainer>

      <GoabContainer accent="thin" mb="none">
        <GoabLink size="large" mb="m">
          <a href="#">Lodge assistance program</a>
        </GoabLink>
        <GoabText mt="none" mb="none">
          Keep track of the individuals who are placed in lodges and may qualify for the Lodge
          Assistance Program subsidy.
        </GoabText>
      </GoabContainer>

      <GoabContainer accent="thin" mb="none">
        <GoabLink size="large" mb="m">
          <a href="#">Education Support</a>
        </GoabLink>
        <GoabText mt="none" mb="none">
          Explore educational resources, enroll in courses, and track your academic progress
          effortlessly.
        </GoabText>
      </GoabContainer>

      <GoabContainer accent="thin" mb="none">
        <GoabLink size="large" mb="m">
          <a href="#">Social Assistance</a>
        </GoabLink>
        <GoabText mt="none" mb="none">
          Learn about available support programs, apply for financial aid, and access community
          resources.
        </GoabText>
      </GoabContainer>

      <GoabContainer accent="thin" mb="none">
        <GoabLink size="large" mb="m">
          <a href="#">Employment Opportunity</a>
        </GoabLink>
        <GoabText mt="none" mb="none">
          Search for job openings, access career development tools, and receive
          employment-related updates.
        </GoabText>
      </GoabContainer>

      <GoabContainer accent="thin" mb="none">
        <GoabLink size="large" mb="m">
          <a href="#">Housing Assistance</a>
        </GoabLink>
        <GoabText mt="none" mb="none">
          Find affordable housing options, apply for housing subsidies, and report maintenance
          issues seamlessly.
        </GoabText>
      </GoabContainer>
    </GoabGrid>

<goab-grid gap="xl" minChildWidth="320px">
  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Waitlist submission</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Enter and maintain information about the households waiting for affordable housing
      with your organization.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Lodge assistance program</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Keep track of the individuals who are placed in lodges and may qualify for the Lodge
      Assistance Program subsidy.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Education Support</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Explore educational resources, enroll in courses, and track your academic progress
      effortlessly.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Social Assistance</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Learn about available support programs, apply for financial aid, and access community
      resources.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Employment Opportunity</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Search for job openings, access career development tools, and receive
      employment-related updates.
    </goab-text>
  </goab-container>

  <goab-container accent="thin" mb="none">
    <goab-link size="large" mb="m">
      <a href="#">Housing Assistance</a>
    </goab-link>
    <goab-text mt="none" mb="none">
      Find affordable housing options, apply for housing subsidies, and report maintenance
      issues seamlessly.
    </goab-text>
  </goab-container>
</goab-grid>

<goa-grid gap="xl" minchildwidth="320px">
  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Waitlist submission</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Enter and maintain information about the households waiting for affordable housing
      with your organization.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Lodge assistance program</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Keep track of the individuals who are placed in lodges and may qualify for the Lodge
      Assistance Program subsidy.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Education Support</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Explore educational resources, enroll in courses, and track your academic progress
      effortlessly.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Social Assistance</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Learn about available support programs, apply for financial aid, and access community
      resources.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Employment Opportunity</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Search for job openings, access career development tools, and receive
      employment-related updates.
    </goa-text>
  </goa-container>

  <goa-container accent="thin" mb="none">
    <goa-link size="large" mb="m">
      <a href="#">Housing Assistance</a>
    </goa-link>
    <goa-text mt="none" mb="none">
      Find affordable housing options, apply for housing subsidies, and report maintenance
      issues seamlessly.
    </goa-text>
  </goa-container>
</goa-grid>

Review and action

<GoabGrid minChildWidth="315px">
      <GoabContainer accent="thin" type="non-interactive">
        <GoabText size="heading-m" mt="none" mb="m">Appearance details</GoabText>
        <GoabGrid minChildWidth="200px" gap="m">
          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Accused name</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Doe, John Scott</GoabText>
          </GoabBlock>

          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Date of birth</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Mar 14, 2021</GoabText>
          </GoabBlock>

          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Court location</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Calgary</GoabText>
          </GoabBlock>

          <GoabBlock direction="column" gap="xs">
            <GoabText size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</GoabText>
            <GoabText size="body-m" mt="none" mb="none">Sep 20, 2021</GoabText>
          </GoabBlock>
        </GoabGrid>

        <GoabText size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</GoabText>
        <GoabContainer type="non-interactive" padding="compact">
          <GoabText size="heading-xs" mt="none" mb="xs">1

    h3.review-h3 {
      margin-bottom: var(--goa-space-m);
    }
    label.review-label {
      font: var(--goa-typography-body-s);
      color: var(--goa-color-text-secondary);
    }
    .review-content {
      font: var(--goa-typography-body-m);
    }
    p.review-content {
      margin-bottom: 0;
    }
    h5.review-h5 {
      font: var(--goa-typography-body-m);
      color: var(--goa-color-text-secondary);
      margin-top: var(--goa-space-m);
      margin-bottom: var(--goa-space-m);
    }
    h6.review-h6 {
      font: var(--goa-typography-heading-s);
      margin-top: 0;
      margin-bottom: 0;
    }
  `,
  ],
})
export class ReviewAndActionComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      case: ["

form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      case: [""],
      reason: [""],
      message: [""],
    });
  }

  onClick(): void {
    console.log("Confirm clicked!");
  }

<goab-grid minChildWidth="315px">
  <goab-container accent="thin" type="non-interactive">
    <goab-text size="heading-m" mt="none" mb="m">Appearance details</goab-text>
    <goab-grid minChildWidth="200px" gap="m">
      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Accused name</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Doe, John Scott</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Date of birth</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Mar 14, 2021</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Court location</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Calgary</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Sep 20, 2021</goab-text>
      </goab-block>
    </goab-grid>

    <goab-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goab-text>
    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">1) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goab-text>
    </goab-container>

    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">2) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goab-text>
    </goab-container>
  </goab-container>

  <goab-container accent="thin" width="content">
    <form [formGroup]="form">
      <goab-text size="heading-m" mt="none" mb="m">Adjournment request</goab-text>
      <goab-text size="body-m" mt="none" mb="none">
        Keep track of the individuals who are placed in lodges and may qualify for the Lodge
        Assistance Program subsidy.
      </goab-text>

      <goab-form-item label="Case history and new request" mt="l">
        <goab-radio-group name="case" orientation="horizontal" formControlName="case">
          <goab-radio-item value="grant" label="Grant"></goab-radio-item>
          <goab-radio-item value="deny" label="Deny"></goab-radio-item>
        </goab-radio-group>
      </goab-form-item>

      <goab-form-item label="Reason to deny" mt="l">
        <goab-dropdown name="reason" width="100%" formControlName="reason">
          <goab-dropdown-item value="1" label="Incomplete Application"></goab-dropdown-item>
          <goab-dropdown-item value="2" label="Eligibility Criteria Not Met"></goab-dropdown-item>
          <goab-dropdown-item value="3" label="Documentation Verification Failure"></goab-dropdown-item>
        </goab-dropdown>
      </goab-form-item>

      <goab-form-item label="Message" mt="l">
        <goab-textarea name="message" [rows]="5" width="100%" formControlName="message"></goab-textarea>
      </goab-form-item>

      <goab-button mt="xl" (onClick)="onClick()">Confirm adjournment</goab-button>
    </form>
  </goab-container>
</goab-grid>

document.getElementById("confirm-btn").addEventListener("_click", () => {
  console.log("Confirm clicked!");
});

<goa-grid minchildwidth="315px">
  <goa-container accent="thin" type="non-interactive">
    <goa-text size="heading-m" mt="none" mb="m">Appearance details</goa-text>
    <goa-grid minchildwidth="200px" gap="m">
      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Accused name</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Doe, John Scott</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Date of birth</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Mar 14, 2021</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Court location</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Calgary</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Sep 20, 2021</goa-text>
      </goa-block>
    </goa-grid>

    <goa-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goa-text>
    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">1) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goa-text>
    </goa-container>

    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">2) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goa-text>
    </goa-container>
  </goa-container>

  <goa-container accent="thin" width="content">
    <form>
      <goa-text size="heading-m" mt="none" mb="m">Adjournment request</goa-text>
      <goa-text size="body-m" mt="none" mb="none">
        Keep track of the individuals who are placed in lodges and may qualify for the Lodge
        Assistance Program subsidy.
      </goa-text>

      <goa-form-item version="2" label="Case history and new request" mt="l">
        <goa-radio-group version="2" name="case" orientation="horizontal">
          <goa-radio-item value="grant" label="Grant"></goa-radio-item>
          <goa-radio-item value="deny" label="Deny"></goa-radio-item>
        </goa-radio-group>
      </goa-form-item>

      <goa-form-item version="2" label="Reason to deny" mt="l">
        <goa-dropdown version="2" name="reason" width="100%">
          <goa-dropdown-item value="1" label="Incomplete Application"></goa-dropdown-item>
          <goa-dropdown-item value="2" label="Eligibility Criteria Not Met"></goa-dropdown-item>
          <goa-dropdown-item value="3" label="Documentation Verification Failure"></goa-dropdown-item>
        </goa-dropdown>
      </goa-form-item>

      <goa-form-item version="2" label="Message" mt="l">
        <goa-textarea version="2" name="message" rows="5" width="100%"></goa-textarea>
      </goa-form-item>

      <goa-button version="2" id="confirm-btn" mt="xl">Confirm adjournment</goa-button>
    </form>
  </goa-container>
</goa-grid>

Other

Header section

Main content area

Footer section

Don't

Don't use a container for general page layout. Containers are for visual emphasis and grouping content.

Sizing

Warning

minChildWidth is required on Grid. Set it based on the content's minimum readable width so items wrap properly.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.