Container

Group information, create hierarchy, and show related information.

Props

type

Sets the container and accent bar styling.

Defaults to interactive.

accent

thick | thin | filled

Sets the style of accent on the container.

Defaults to filled.

padding

relaxed | compact

Sets the amount of white space in the container.

Defaults to relaxed.

width

full | content

Sets the width of the container.

Defaults to full.

maxWidth

string

Sets the maximum width of the container.

Defaults to none.

testId

string

Sets the data-testid attribute. Used with ByTestId queries in tests.

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.

Slots

title

Named slot for content

actions

Named slot for content

Examples

Card grid

React

Angular

Web Components

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

Confirm a change

React

Angular

Web Components

const [open, setOpen] = useState(false);
  const [effectiveDate, setEffectiveDate] = useState<Date | undefined>(new Date());

  const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => {
    setEffectiveDate(detail.value as Date);
  };

<GoabButton onClick={() => setOpen(true)}>Save and continue</GoabButton>

      <GoabModal
        heading="Address has changed"
        open={open}
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup alignment="end">
            <GoabButton type="secondary" size="compact" onClick={() => setOpen(false)}>
              Undo address change
            </GoabButton>
            <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
              Confirm
            </GoabButton>
          </GoabButtonGroup>
        }>
        <GoabContainer type="non-interactive" accent="filled" padding="compact" width="full">
          <GoabText as="h4" mt="none" mb="s">Before</GoabText>
          <GoabText mt="none">123456 78 Ave NW, Edmonton, Alberta</GoabText>
          <GoabText as="h4" mt="none" mb="s">After</GoabText>
          <GoabText mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</GoabText>
        </GoabContainer>
        <GoabFormItem label="Effective date" mt="l">
          <GoabDatePicker
            onChange={onChangeEffectiveDate}
            name="effectiveDate"
            value={effectiveDate}
          />
        </GoabFormItem>
      </GoabModal>

Card view of case files

React

Angular

Web Components

.case-file-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--goa-space-m);
}

<GoabContainer mt="l">
        <div className="case-file-row">
          <GoabBlock direction="column" gap="2xs">
            <GoabText size="heading-xs" mt="none" mb="2xs">Fiscal year: 2021/2022</GoabText>
            <GoabText size="body-s" mt="none" mb="none">Submitted: April 23, 2023</GoabText>
          </GoabBlock>
          <GoabBlock direction="row" gap="l" alignment="center">
            <GoabBadge type="midtone" content="Not started" />
            <GoabButton type="tertiary" size="compact">Start</GoabButton>
          </GoabBlock>
        </div>
      </GoabContainer>

      <GoabContainer>
        <div className="case-file-row">
          <GoabBlock direction="column" gap="2xs">
            <GoabText size="heading-xs" mt="none" mb="2xs">Fiscal year: 2020/2021</GoabText>
            <GoabText size="body-s" mt="none" mb="none">Submitted: April 9, 2022</GoabText>
          </GoabBlock>
          <GoabBlock direction="row" gap="l" alignment="center">
            <GoabBadge type="important" content="Information needed" />
            <GoabButton type="tertiary" size="compact">Edit</GoabButton>
          </GoabBlock>
        </div>
      </GoabContainer>

      <GoabContainer>
        <div className="case-file-row">
          <GoabBlock direction="column" gap="2xs">
            <GoabText size="heading-xs" mt="none" mb="2xs">Fiscal year: 2019/2020</GoabText>
            <GoabText size="body-s" mt="none" mb="none">Submitted: April 14, 2021</GoabText>
          </GoabBlock>
          <GoabBlock direction="row" gap="l" alignment="center">
            <GoabBadge type="success" content="Approved" />
            <GoabButton type="tertiary" size="compact">View</GoabButton>
          </GoabBlock>
        </div>
      </GoabContainer>

Display user information

React

Angular

Web Components

const handleAddToCalendar = () => {
    console.log("Add to calendar clicked");
  };

<GoabContainer>
        <GoabText as="span" size="body-m" color="secondary" mt="none" mb="none">Housing Advisor</GoabText>
        <GoabText size="heading-m" mt="none" mb="s">Tracy Hero</GoabText>
        <GoabBlock direction="row" gap="s">
          <GoabBlock direction="column" gap="m">
            <GoabText as="span" size="heading-xs" mt="none" mb="none">Email</GoabText>
            <GoabText as="span" size="heading-xs" mt="none" mb="none">Phone</GoabText>
          </GoabBlock>
          <GoabBlock direction="column" gap="m">
            <GoabText as="span" size="body-m" mt="none" mb="none">tracyhero@email.com</GoabText>
            <GoabText as="span" size="body-m" mt="none" mb="none">283-203-4921</GoabText>
          </GoabBlock>
        </GoabBlock>
      </GoabContainer>

      <GoabContainer
        type="non-interactive"
        accent="thick"
        heading="Upcoming important due dates"
        actions={
          <GoabButton
            type="tertiary"
            size="compact"
            leadingIcon="calendar"
            onClick={handleAddToCalendar}>
            Add to calendar
          </GoabButton>
        }>
        <GoabTable width="100%" striped>
          <tbody>
            <tr>
              <td>Business plan submission</td>
              <td style={{ textAlign: "right" }}>June 30, 2024</td>
            </tr>
            <tr>
              <td>Annual review</td>
              <td style={{ textAlign: "right" }}>October 3, 2024</td>
            </tr>
            <tr>
              <td>Application submission</td>
              <td style={{ textAlign: "right" }}>December 20, 2024</td>
            </tr>
            <tr>
              <td>Application review</td>
              <td style={{ textAlign: "right" }}>January 3, 2025</td>
            </tr>
          </tbody>
        </GoabTable>
      </GoabContainer>

Review and action

React

Angular

Web Components

<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

React

Angular

Web Components

<GoabContainer
      type="non-interactive"
      accent="thick"
      heading={
        <span>
          Joan Smith
          <GoabTooltip content="Nov 23, 2023 at 10:35 am">
            <span
              style={{
                color: "var(--goa-color-text-secondary)",
                font: "var(--goa-typography-body-xs)",
              }}
            >
              4 hours ago
            </span>
          </GoabTooltip>
        </span>
      }
    >
      <GoabText as="body-m" mt="none" mb="none">Hover on the time it was added to see the full date and time.</GoabText>
    </GoabContainer>

Show status on a card

React

Angular

Web Components

<GoabContainer
      type="non-interactive"
      accent="thick"
      heading="Heading"
      actions={<GoabBadge type="important" content="Priority" />}
    >
      Content
    </GoabContainer>

Type to create a new filter

React

Angular

Web Components

const [typedChips, setTypedChips] = useState<string[]>([]);
  const [inputValue, setInputValue] = useState("");

<GoabFormItem label="Type to create a chip" mb="m">
        <GoabInput
          name="chipInput"
          value={inputValue}
          onChange={(e) => setInputValue(e.value.trim())}
          onKeyPress={(e) => {
            if (e.key === "Enter" && e.value.trim()) {
              setTypedChips([...typedChips, e.value.trim()]);
              setTimeout(() => setInputValue(""), 0);
            } else if (e.key === "Backspace" && !e.value.trim() && typedChips.length > 0) {
              setTypedChips(typedChips.slice(0, -1));
            }
          }}
          width="100%"
        />
      </GoabFormItem>
      <div>
        {typedChips.map((chip, index) => (
          <GoabFilterChip
            key={index}
            content={chip}
            mb="xs"
            mr="xs"
            onClick={() => setTypedChips(typedChips.filter((c) => c !== chip))}
          />
        ))}
      </div>

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.

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.

Props

Slots

Card grid

Confirm a change

Card view of case files

Display user information

Review and action

Show full date in a tooltip

Show status on a card

Type to create a new filter

Other