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>

Display multiple cards in a grid layout, each containing related content or actions.

When to use

Use this pattern when:

Presenting multiple related items in a scannable format
Creating a dashboard or landing page with navigable sections
Users need to choose between several options or services
Content can be grouped into discrete, equally-weighted items

Considerations

Use consistent card heights where possible for visual alignment
Link titles should clearly describe where the user will navigate
Keep descriptions concise to maintain scannability
Use the grid’s minChildWidth to ensure cards wrap appropriately on smaller screens

View old example docs