Display user information

const handleAddToCalendar = () => {
  console.log("Add to calendar clicked");
};
<GoabContainer>
  <GoabText tag="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 tag="span" size="heading-xs" mt="none" mb="none">
        Email
      </GoabText>
      <GoabText tag="span" size="heading-xs" mt="none" mb="none">
        Phone
      </GoabText>
    </GoabBlock>
    <GoabBlock direction="column" gap="m">
      <GoabText tag="span" size="body-m" mt="none" mb="none">
        tracyhero@email.com
      </GoabText>
      <GoabText tag="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>
onAddToCalendar(): void {
  console.log("Add to calendar clicked");
}
<goab-container>
  <goab-text tag="span" size="body-m" color="secondary" mt="none" mb="none"
    >Housing Advisor</goab-text
  >
  <goab-text size="heading-m" mt="none" mb="s">Tracy Hero</goab-text>
  <goab-block direction="row" gap="s">
    <goab-block direction="column" gap="m">
      <goab-text tag="span" size="heading-xs" mt="none" mb="none">Email</goab-text>
      <goab-text tag="span" size="heading-xs" mt="none" mb="none">Phone</goab-text>
    </goab-block>
    <goab-block direction="column" gap="m">
      <goab-text tag="span" size="body-m" mt="none" mb="none"
        >tracyhero&#64;email.com</goab-text
      >
      <goab-text tag="span" size="body-m" mt="none" mb="none">283-203-4921</goab-text>
    </goab-block>
  </goab-block>
</goab-container>

<goab-container type="non-interactive" accent="thick">
  <div slot="title">Upcoming important due dates</div>
  <div slot="actions">
    <goab-button
      type="tertiary"
      size="compact"
      leadingIcon="calendar"
      (onClick)="onAddToCalendar()"
    >
      Add to calendar
    </goab-button>
  </div>
  <goab-table width="100%" [striped]="true">
    <tbody>
      <tr>
        <td>Business plan submission</td>
        <td style="text-align: right">June 30, 2024</td>
      </tr>
      <tr>
        <td>Annual review</td>
        <td style="text-align: right">October 3, 2024</td>
      </tr>
      <tr>
        <td>Application submission</td>
        <td style="text-align: right">December 20, 2024</td>
      </tr>
      <tr>
        <td>Application review</td>
        <td style="text-align: right">January 3, 2025</td>
      </tr>
    </tbody>
  </goab-table>
</goab-container>
const calendarBtn = document.getElementById("calendar-btn");
calendarBtn.addEventListener("_click", () => {
  console.log("Add to calendar clicked");
});
<goa-container>
  <goa-text as="span" size="body-m" color="secondary" mt="none" mb="none"
    >Housing Advisor</goa-text
  >
  <goa-text size="heading-m" mt="none" mb="s">Tracy Hero</goa-text>
  <goa-block direction="row" gap="s">
    <goa-block direction="column" gap="m">
      <goa-text as="span" size="heading-xs" mt="none" mb="none">Email</goa-text>
      <goa-text as="span" size="heading-xs" mt="none" mb="none">Phone</goa-text>
    </goa-block>
    <goa-block direction="column" gap="m">
      <goa-text as="span" size="body-m" mt="none" mb="none">tracyhero@email.com</goa-text>
      <goa-text as="span" size="body-m" mt="none" mb="none">283-203-4921</goa-text>
    </goa-block>
  </goa-block>
</goa-container>

<goa-container type="non-interactive" accent="thick">
  <div slot="title">Upcoming important due dates</div>
  <div slot="actions">
    <goa-button
      version="2"
      id="calendar-btn"
      type="tertiary"
      size="compact"
      leadingicon="calendar"
    >
      Add to calendar
    </goa-button>
  </div>
  <goa-table version="2" width="100%" striped="true">
    <table style="width: 100%">
      <tbody>
        <tr>
          <td>Business plan submission</td>
          <td style="text-align: right">June 30, 2024</td>
        </tr>
        <tr>
          <td>Annual review</td>
          <td style="text-align: right">October 3, 2024</td>
        </tr>
        <tr>
          <td>Application submission</td>
          <td style="text-align: right">December 20, 2024</td>
        </tr>
        <tr>
          <td>Application review</td>
          <td style="text-align: right">January 3, 2025</td>
        </tr>
      </tbody>
    </table>
  </goa-table>
</goa-container>

Display user contact information and related data using containers with clear visual hierarchy.

When to use

Use this pattern when:

  • Showing user profile or contact information
  • Displaying assigned advisor or representative details
  • Presenting upcoming dates or deadlines in a structured format
  • Creating summary views of user-related data

Considerations

  • Use containers to group related information
  • Apply consistent typography for labels and values
  • Use the accent="thick" variant for important information sections
  • Include actions (like “Add to calendar”) when relevant
  • Use tables with striped rows for date lists to improve scanability
View old example docs