Lists

Styled lists, list groups, description lists, key-value lists, and timelines.

Simple Lists

Completed onboarding
Connected a building
Imported units

HTML

<ul class="ziom-list ziom-list-simple ziom-list-check">
  <li>Completed onboarding</li>
  <li>Connected a building</li>
  <li>Imported units</li>
</ul>

List Group

The Aspen

48 units · 12 active leads

Maple Court

120 units · 37 active leads

HTML

<div class="ziom-list-group">
  <div class="ziom-list-group-item">
    <div class="ziom-list-group-content">
      <div class="ziom-list-group-title">The Aspen</div>
      <div class="ziom-list-group-subtitle">48 units &middot; 12 active leads</div>
    </div>
    <span class="ziom-list-group-action"><i class="ph ph-caret-right"></i></span>
  </div>
  <div class="ziom-list-group-item active">
    <div class="ziom-list-group-content">
      <div class="ziom-list-group-title">Maple Court</div>
      <div class="ziom-list-group-subtitle">120 units &middot; 37 active leads</div>
    </div>
    <span class="ziom-list-group-action"><i class="ph ph-caret-right"></i></span>
  </div>
</div>

Key-Value List

Status Active

Created Jan 15, 2026

HTML

<div class="ziom-kv-list ziom-kv-list-divided">
  <div class="ziom-kv-item">
    <span class="ziom-kv-key">Status</span>
    <span class="ziom-kv-value">Active</span>
  </div>
  <div class="ziom-kv-item">
    <span class="ziom-kv-key">Created</span>
    <span class="ziom-kv-value">Jan 15, 2026</span>
  </div>
</div>

Timeline

Lead created

2 hours ago

Tour scheduled

Just now

Application

Pending

HTML

<div class="ziom-timeline">
  <div class="ziom-timeline-item">
    <div class="ziom-timeline-marker ziom-timeline-marker-success"></div>
    <div class="ziom-timeline-content">
      <div class="ziom-timeline-title">Lead created</div>
      <div class="ziom-timeline-time">2 hours ago</div>
    </div>
  </div>
  <div class="ziom-timeline-item">
    <div class="ziom-timeline-marker ziom-timeline-marker-active"></div>
    <div class="ziom-timeline-content">
      <div class="ziom-timeline-title">Tour scheduled</div>
      <div class="ziom-timeline-time">Just now</div>
    </div>
  </div>
  <div class="ziom-timeline-item">
    <div class="ziom-timeline-marker"></div>
    <div class="ziom-timeline-content">
      <div class="ziom-timeline-title">Application</div>
      <div class="ziom-timeline-time">Pending</div>
    </div>
  </div>
</div>