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)"} & charges</GoabText>
<GoabContainer type="non-interactive" padding="compact">
<GoabText size="heading-xs" mt="none" mb="xs">{"1) 12345678"}</GoabText>
<GoabText size="body-m" mt="none" mb="none">{"CC 334(1) - Theft under $5000"}</GoabText>
<GoabText size="body-m" mt="none" mb="none">{"CC 268(1) - Aggravated assault"}</GoabText>
</GoabContainer>
<GoabContainer type="non-interactive" padding="compact">
<GoabText size="heading-xs" mt="none" mb="xs">{"2) 12345678"}</GoabText>
<GoabText size="body-m" mt="none" mb="none">{"CC 334(1) - Theft under $5000"}</GoabText>
<GoabText size="body-m" mt="none" mb="none">{"CC 268(1) - Aggravated assault"}</GoabText>
</GoabContainer>
</GoabContainer>
<GoabContainer accent="thin" width="content">
<form>
<GoabText size="heading-m" mt="none" mb="m">Adjournment request</GoabText>
<GoabText 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.
</GoabText>
<GoabFormItem label="Case history and new request" mt="l">
<GoabRadioGroup name="case" orientation="horizontal" onChange={() => {}}>
<GoabRadioItem value="grant" label="Grant" />
<GoabRadioItem value="deny" label="Deny" />
</GoabRadioGroup>
</GoabFormItem>
<GoabFormItem label="Reason to deny" mt="l">
<GoabDropdown name="reason" width="100%" onChange={() => {}}>
<GoabDropdownItem value="1" label="Incomplete Application" />
<GoabDropdownItem value="2" label="Eligibility Criteria Not Met" />
<GoabDropdownItem value="3" label="Documentation Verification Failure" />
</GoabDropdown>
</GoabFormItem>
<GoabFormItem label="Message" mt="l">
<GoabTextArea name="message" rows={5} width="100%" value="" onChange={() => {}} />
</GoabFormItem>
<GoabButton mt="xl" onClick={() => {}}>
Confirm adjournment
</GoabButton>
</form>
</GoabContainer>
</GoabGrid>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) & 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>
<goab-form-item label="Case history and new request" mt="l">
<goab-radio-group name="case" orientation="horizontal" formControlName="case">
<goab-radio-item value="grant" label="Grant"></goab-radio-item>
<goab-radio-item value="deny" label="Deny"></goab-radio-item>
</goab-radio-group>
</goab-form-item>
<goab-form-item label="Reason to deny" mt="l">
<goab-dropdown name="reason" width="100%" formControlName="reason">
<goab-dropdown-item value="1" label="Incomplete Application"></goab-dropdown-item>
<goab-dropdown-item value="2" label="Eligibility Criteria Not Met"></goab-dropdown-item>
<goab-dropdown-item value="3" label="Documentation Verification Failure"></goab-dropdown-item>
</goab-dropdown>
</goab-form-item>
<goab-form-item label="Message" mt="l">
<goab-textarea name="message" [rows]="5" width="100%" formControlName="message"></goab-textarea>
</goab-form-item>
<goab-button mt="xl" (onClick)="onClick()">Confirm adjournment</goab-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) & 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