Card grid
<GoabGrid gap="xl" minChildWidth="320px">
<GoabContainer accent="thin" mb="none">
<GoabxLink size="large" mb="m">
<a href="#">Waitlist submission</a>
</GoabxLink>
<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">
<GoabxLink size="large" mb="m">
<a href="#">Lodge assistance program</a>
</GoabxLink>
<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">
<GoabxLink size="large" mb="m">
<a href="#">Education Support</a>
</GoabxLink>
<GoabText mt="none" mb="none">
Explore educational resources, enroll in courses, and track your academic progress
effortlessly.
</GoabText>
</GoabContainer>
<GoabContainer accent="thin" mb="none">
<GoabxLink size="large" mb="m">
<a href="#">Social Assistance</a>
</GoabxLink>
<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">
<GoabxLink size="large" mb="m">
<a href="#">Employment Opportunity</a>
</GoabxLink>
<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">
<GoabxLink size="large" mb="m">
<a href="#">Housing Assistance</a>
</GoabxLink>
<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">
<goabx-link size="large" mb="m">
<a href="#">Waitlist submission</a>
</goabx-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">
<goabx-link size="large" mb="m">
<a href="#">Lodge assistance program</a>
</goabx-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">
<goabx-link size="large" mb="m">
<a href="#">Education Support</a>
</goabx-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">
<goabx-link size="large" mb="m">
<a href="#">Social Assistance</a>
</goabx-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">
<goabx-link size="large" mb="m">
<a href="#">Employment Opportunity</a>
</goabx-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">
<goabx-link size="large" mb="m">
<a href="#">Housing Assistance</a>
</goabx-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