Data Display

Patterns for displaying data, records, and metrics.

Metrics Row

<div class="sw-metrics-row">
  <div class="sw-metric">
    <span class="sw-metric-label">Total Users</span>
    <span class="sw-metric-value">12,483</span>
  </div>
  ...
</div>

Record Entry

CSS

.sw-metrics-row {
  display: flex;
  gap: var(--sw-space-8);
}

.sw-metric {
  display: flex;
  flex-direction: column;
}

.sw-metric-label {
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-font-semibold);
  color: var(--sw-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--sw-space-1);
}

.sw-metric-value {
  font-size: var(--sw-text-4xl);
  font-weight: var(--sw-font-semibold);
  color: var(--sw-text-primary);
}

.sw-record-entry {
  display: block;
  padding: var(--sw-space-4);
  text-decoration: none;
  transition: background var(--sw-transition-fast);
}

.sw-record-entry:hover {
  background: var(--sw-bg-hover);
}

.sw-record-entry:not(:last-child) {
  border-bottom: 1px solid var(--sw-border-default);
}