Components

Panel

A sunken content panel on the whitesmoke surface with an uppercase title. Holds grouped inputs, notes, or any arbitrary content. Add --rows when it hosts .ds-input-row items, which carry their own spacing.

Input rows

A titled panel of labeled rows. The --rows modifier tightens the bottom padding so the last row's hairline sits cleanly.

Panel · rows

Sale

Day rate €

Rebilled expenses €

<div class="ds-panel ds-panel--rows">
  <div class="ds-panel__title">Sale</div>
  <div class="ds-input-row">
    <label>Day rate <span class="ds-input-row__unit">€</span></label>
    <input class="ds-input ds-input--number" type="number" value="900">
  </div>
  <div class="ds-input-row">
    <label>Rebilled expenses <span class="ds-input-row__unit">€</span></label>
    <input class="ds-input ds-input--number" type="number" value="0">
  </div>
</div>

Plain content

Without --rows the panel is a plain titled container for any content.

Panel

Notes

Arbitrary content…

<div class="ds-panel">
  <div class="ds-panel__title">Notes</div>
  <p>Arbitrary content…</p>
</div>