.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.spec-table th{text-align:left;padding:8px 12px;background:#F3F4F6;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;border-bottom:2px solid #E5E7EB}
.spec-table td{padding:8px 12px;border-bottom:1px solid #F3F4F6;vertical-align:top;line-height:1.5}
.spec-table code{background:#F3F4F6;padding:1px 5px;border-radius:3px;font-size:12px}
.prototype-note{font-size:12px;font-style:italic;color:#6B7280;border-left:2px solid #D1D5DB;padding-left:10px;margin:6px 0 12px}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Basic components

Basic components are the fundamental building blocks of Petrel layouts — text labels, images, separators, and containers.
## When to use

Use basic components for static content display, layout structure, and visual organization. These components are the foundation for all more complex components in the library.

## Text labels

Use WPF `TextBlock` for all non-editable text. Apply the named typography styles from the Petrel resource dictionary rather than setting font properties inline.

Style
WPF resource key
Use
Heading
Petrel.Text.Heading
Pane and group headings
Body
Petrel.Text.Body
Descriptions, metadata
Caption
Petrel.Text.Caption
Helper text, status labels
Prototype resource key names. Confirm with the Petrel development team.
## Group boxes

Use `GroupBox` to visually group related controls with a visible label. Group boxes must have a non-empty `Header` that serves as both the visible group label and the accessible group name.

## Separators

Use `Separator` to create visual divisions between groups of related controls. Do not use separators purely for decoration — they imply a logical boundary between content groups.

## Accessibility considerations

Static `TextBlock` elements used as labels for input controls must be associated with the input using `AutomationProperties.LabeledBy` on the input control. See [Labels and accessible names](/solutions/ocean-petrel/petrel-guideline/accessibility/labels-and-names).

### Related pages

Typography
Spacing
Form controls