Review and action

<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

    h3.review-h3 {
      margin-bottom: var(--goa-space-m);
    }
    label.review-label {
      font: var(--goa-typography-body-s);
      color: var(--goa-color-text-secondary);
    }
    .review-content {
      font: var(--goa-typography-body-m);
    }
    p.review-content {
      margin-bottom: 0;
    }
    h5.review-h5 {
      font: var(--goa-typography-body-m);
      color: var(--goa-color-text-secondary);
      margin-top: var(--goa-space-m);
      margin-bottom: var(--goa-space-m);
    }
    h6.review-h6 {
      font: var(--goa-typography-heading-s);
      margin-top: 0;
      margin-bottom: 0;
    }
  `,
  ],
})
export class ReviewAndActionComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      case: ["

form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      case: [""],
      reason: [""],
      message: [""],
    });
  }

  onClick(): void {
    console.log("Confirm clicked!");
  }

<goab-grid minChildWidth="315px">
  <goab-container accent="thin" type="non-interactive">
    <goab-text size="heading-m" mt="none" mb="m">Appearance details</goab-text>
    <goab-grid minChildWidth="200px" gap="m">
      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Accused name</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Doe, John Scott</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Date of birth</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Mar 14, 2021</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Court location</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Calgary</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</goab-text>
        <goab-text size="body-m" mt="none" mb="none">Sep 20, 2021</goab-text>
      </goab-block>
    </goab-grid>

    <goab-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goab-text>
    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">1) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goab-text>
    </goab-container>

    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">2) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goab-text>
      <goab-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goab-text>
    </goab-container>
  </goab-container>

  <goab-container accent="thin" width="content">
    <form [formGroup]="form">
      <goab-text size="heading-m" mt="none" mb="m">Adjournment request</goab-text>
      <goab-text size="body-m" 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>

      <goabx-form-item label="Case history and new request" mt="l">
        <goabx-radio-group name="case" orientation="horizontal" formControlName="case">
          <goabx-radio-item value="grant" label="Grant"></goabx-radio-item>
          <goabx-radio-item value="deny" label="Deny"></goabx-radio-item>
        </goabx-radio-group>
      </goabx-form-item>

      <goabx-form-item label="Reason to deny" mt="l">
        <goabx-dropdown name="reason" width="100%" formControlName="reason">
          <goabx-dropdown-item value="1" label="Incomplete Application"></goabx-dropdown-item>
          <goabx-dropdown-item value="2" label="Eligibility Criteria Not Met"></goabx-dropdown-item>
          <goabx-dropdown-item value="3" label="Documentation Verification Failure"></goabx-dropdown-item>
        </goabx-dropdown>
      </goabx-form-item>

      <goabx-form-item label="Message" mt="l">
        <goabx-textarea name="message" [rows]="5" width="100%" formControlName="message"></goabx-textarea>
      </goabx-form-item>

      <goabx-button mt="xl" (onClick)="onClick()">Confirm adjournment</goabx-button>
    </form>
  </goab-container>
</goab-grid>

document.getElementById("confirm-btn").addEventListener("_click", () => {
  console.log("Confirm clicked!");
});

<goa-grid minchildwidth="315px">
  <goa-container accent="thin" type="non-interactive">
    <goa-text size="heading-m" mt="none" mb="m">Appearance details</goa-text>
    <goa-grid minchildwidth="200px" gap="m">
      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Accused name</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Doe, John Scott</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Date of birth</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Mar 14, 2021</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Court location</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Calgary</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none">Upcoming appearance date(s)</goa-text>
        <goa-text size="body-m" mt="none" mb="none">Sep 20, 2021</goa-text>
      </goa-block>
    </goa-grid>

    <goa-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goa-text>
    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">1) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goa-text>
    </goa-container>

    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">2) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 268(1) - Aggravated assault</goa-text>
    </goa-container>
  </goa-container>

  <goa-container accent="thin" width="content">
    <form>
      <goa-text size="heading-m" mt="none" mb="m">Adjournment request</goa-text>
      <goa-text size="body-m" 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-form-item version="2" label="Case history and new request" mt="l">
        <goa-radio-group version="2" name="case" orientation="horizontal">
          <goa-radio-item value="grant" label="Grant"></goa-radio-item>
          <goa-radio-item value="deny" label="Deny"></goa-radio-item>
        </goa-radio-group>
      </goa-form-item>

      <goa-form-item version="2" label="Reason to deny" mt="l">
        <goa-dropdown version="2" name="reason" width="100%">
          <goa-dropdown-item value="1" label="Incomplete Application"></goa-dropdown-item>
          <goa-dropdown-item value="2" label="Eligibility Criteria Not Met"></goa-dropdown-item>
          <goa-dropdown-item value="3" label="Documentation Verification Failure"></goa-dropdown-item>
        </goa-dropdown>
      </goa-form-item>

      <goa-form-item version="2" label="Message" mt="l">
        <goa-textarea version="2" name="message" rows="5" width="100%"></goa-textarea>
      </goa-form-item>

      <goa-button version="2" id="confirm-btn" mt="xl">Confirm adjournment</goa-button>
    </form>
  </goa-container>
</goa-grid>

A side-by-side layout for workers to review case details while taking an action, commonly used in case management and approval workflows.

When to use

Use this pattern when:

Workers need to review information while making decisions
Processing applications, requests, or case files
The decision requires context from existing case data
Actions like approve, deny, or escalate are needed

Considerations

Place read-only review information on the left
Place action form controls on the right
Use containers to group related information
Provide clear labels for all case details
Include reason fields when denying requests
Consider responsive behavior for smaller screens