Controls

<label>
  Name
  <input type="text" placeholder="Example input" />
</label>

<label>
  Plan
  <select>
    <option>Starter</option>
    <option>Professional</option>
  </select>
</label>

<label>
  Notes
  <textarea rows="4"></textarea>
</label>

Form Actions

<div class="row">
  <button class="btn btn-primary" type="submit">Save Changes</button>
  <button class="btn btn-secondary" type="reset">Reset</button>
  <button class="btn btn-ghost" type="button">Cancel</button>
</div>

View Header — .view-header

Flat section header used above a content area. Provides a consistent title + subtitle treatment without borders or background. Pair with a .card if a raised surface is needed, or use standalone when the page background provides sufficient separation.

Source: styles/components/view-header.css

<header class="view-header">
  <h2>Import Transactions</h2>
  <p>Upload a CSV export from your bank or credit card provider.</p>
</header>

File Upload — .file-upload

Drag-and-drop file target zone. Wrap a hidden <input type="file"> inside the label — the entire zone becomes clickable. Border dashes and background fill change on hover to signal interactivity.

Source: styles/components/file-upload.css

<label class="file-upload">
  <input type="file" accept=".csv" />
  <span>Click or drag a CSV file here</span>
</label>

Filter Bar — .filter-bar

Horizontal strip for sort and filter controls. Uses only a bottom border — no background or card surface — so it reads as an extension of the content below rather than a separate panel. Combine .filter-group + .filter-label + .filter-select for labeled selects.

Source: styles/components/view-header.css

<div class="filter-bar">
  <div class="filter-group">
    <span class="filter-label">Sort by</span>
    <select class="filter-select">
      <option>Yearly Cost</option>
    </select>
  </div>
  <button class="btn btn-secondary btn-sm" type="button">↓ Desc</button>
</div>