Components

Dividers

An uppercase .ds-section-heading with a trailing hairline that runs to the edge — the system's way of separating regions of a page. Wrap content in .ds-section for consistent vertical rhythm between groups.

Section headings

Each heading draws a label plus a 1px rule. .ds-section adds the vertical spacing between the two groups below.

Section heading

Delegation thresholds

Margin bands that set who may approve a deal without arbitration.

Reference data

Day rates, overheads and salary costs used across the model.

<div class="ds-section">
  <h3 class="ds-section-heading">Delegation thresholds</h3>
  <p>Margin bands that set who may approve a deal without arbitration.</p>
</div>
<div class="ds-section">
  <h3 class="ds-section-heading">Reference data</h3>
  <p>Day rates, overheads and salary costs used across the model.</p>
</div>