Card view of case files

.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="default" 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>
<goab-container mt="l">
  <div class="case-file-row">
    <goab-block direction="column" gap="2xs">
      <goab-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2021/2022</goab-text>
      <goab-text size="body-s" mt="none" mb="none">Submitted: April 23, 2023</goab-text>
    </goab-block>
    <goab-block direction="row" gap="l" alignment="center">
      <goab-badge type="default" content="Not started"></goab-badge>
      <goab-button type="tertiary" size="compact">Start</goab-button>
    </goab-block>
  </div>
</goab-container>

<goab-container>
  <div class="case-file-row">
    <goab-block direction="column" gap="2xs">
      <goab-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2020/2021</goab-text>
      <goab-text size="body-s" mt="none" mb="none">Submitted: April 9, 2022</goab-text>
    </goab-block>
    <goab-block direction="row" gap="l" alignment="center">
      <goab-badge type="important" content="Information needed"></goab-badge>
      <goab-button type="tertiary" size="compact">Edit</goab-button>
    </goab-block>
  </div>
</goab-container>

<goab-container>
  <div class="case-file-row">
    <goab-block direction="column" gap="2xs">
      <goab-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2019/2020</goab-text>
      <goab-text size="body-s" mt="none" mb="none">Submitted: April 14, 2021</goab-text>
    </goab-block>
    <goab-block direction="row" gap="l" alignment="center">
      <goab-badge type="success" content="Approved"></goab-badge>
      <goab-button type="tertiary" size="compact">View</goab-button>
    </goab-block>
  </div>
</goab-container>
.case-file-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--goa-space-m);
}
<goa-container mt="l">
  <div class="case-file-row">
    <goa-block direction="column" gap="2xs">
      <goa-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2021/2022</goa-text>
      <goa-text size="body-s" mt="none" mb="none">Submitted: April 23, 2023</goa-text>
    </goa-block>
    <goa-block direction="row" gap="l" alignment="center">
      <goa-badge version="2" type="default" content="Not started"></goa-badge>
      <goa-button version="2" type="tertiary" size="compact">Start</goa-button>
    </goa-block>
  </div>
</goa-container>

<goa-container>
  <div class="case-file-row">
    <goa-block direction="column" gap="2xs">
      <goa-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2020/2021</goa-text>
      <goa-text size="body-s" mt="none" mb="none">Submitted: April 9, 2022</goa-text>
    </goa-block>
    <goa-block direction="row" gap="l" alignment="center">
      <goa-badge version="2" type="important" content="Information needed"></goa-badge>
      <goa-button version="2" type="tertiary" size="compact">Edit</goa-button>
    </goa-block>
  </div>
</goa-container>

<goa-container>
  <div class="case-file-row">
    <goa-block direction="column" gap="2xs">
      <goa-text size="heading-xs" mt="none" mb="2xs">Fiscal year: 2019/2020</goa-text>
      <goa-text size="body-s" mt="none" mb="none">Submitted: April 14, 2021</goa-text>
    </goa-block>
    <goa-block direction="row" gap="l" alignment="center">
      <goa-badge version="2" type="success" content="Approved"></goa-badge>
      <goa-button version="2" type="tertiary" size="compact">View</goa-button>
    </goa-block>
  </div>
</goa-container>

Present a visual overview of individual case files in a card format for scanning and access.

When to use

Use this pattern when:

  • Displaying a list of case files or records that workers need to manage
  • Each record has a status that needs to be clearly visible
  • Users need quick access to view or edit individual records
  • Showing summary information with actions for each item

Considerations

  • Use badges to clearly indicate the status of each case
  • Provide consistent action buttons (Edit, View) based on the case status
  • Include key identifying information like dates and fiscal years
  • Consider responsive layout for smaller screens
View old example docs