OCI

Two Column Template

Class Reference • Main Column + Right Rail

Updated just now

Context Help

How To Use This Template

Hover or focus on a component to see the standard classes and data-help attributes used for the pattern.

Primary Work Area

Main card in .layout-two-column

The two-column pattern matches the home page: primary content on the left, supporting widgets and navigation in a .side-stack on the right.

<main class="layout-two-column"> <section class="card compact-card">...</section> <aside class="side-stack">...</aside> </main>

Common Controls

Options

Data Table + Fly-in (Two-Column)

PolicyStatementVerb
Platform-AdminsAllow group Admins to manage all-resources in tenancymanage
Audit-ReadersAllow group Auditors to read audit-events in tenancyread
NetOpsAllow group NetOps to use virtual-network-family in compartment networkuse

A/B Table Resizing Demo (Additive)

How to resize: in the right-side tables only, hover near the right edge of any header cell until the cursor changes, then click-drag left/right. Double-click the edge handle to reset that column.

Baseline (current behavior)

Top table: constrained container
Compartment / PolicyEffective PathStatementValid
Bottom table: unconstrained container
Compartment / PolicyEffective PathStatementValid

SharedTable (column drag resize)

Top table: constrained container + resizable columns
Compartment / PolicyEffective PathStatementValid
Bottom table: unconstrained container + resizable columns
Compartment / PolicyEffective PathStatementValid