OCI

Single Column Template

Class Reference • Masthead + Context Help

.masthead-meta

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.

Token + Utility Preview

Use these class names for consistent behavior across pages:

.pill .status-badge.refresh-status-success .status-badge.refresh-status-running
.custom-scrollbar .table-container .copy-icon-btn .ocid-chip .modal-overlay .animate-fade

Layout

Single-column content card

This card uses .card and .compact-card inside .layout-single.

<main class="layout-single"> <section class="card compact-card">...</section> </main>

Actions + Links

Standard buttons inherit from button; secondary neutral actions use button.ghost.

.card a .card a.secondary

Form Patterns

Section Heading (.section-heading)

Options (.section-kicker)

Progress Widget

Example operation In Progress
Loading policies and statements... 65%
Use JS to update the fill width, detail text, and running/success/error badge state.

Data Table Shell

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