Atlas
.atlas-list

List

Compact vertical list. Uses selected-state border, hover fill.

.atlas-list.atlas-list-item.is-selected

Default

  • main.ts
  • index.tsx
  • layout.tsx
  • README.md
  • package.json
<ul class="atlas-list" style="list-style:none;padding:0;margin:0;width:280px;border:1px solid var(--border-default);border-radius:6px">
  <li class="atlas-list-item is-selected">main.ts</li>
  <li class="atlas-list-item">index.tsx</li>
  <li class="atlas-list-item">layout.tsx</li>
  <li class="atlas-list-item">README.md</li>
  <li class="atlas-list-item">package.json</li>
</ul>

With icons and meta

  • atlas-core2m ago
  • atlas-edge5m ago
  • atlas-api12m ago
<ul class="atlas-list" style="list-style:none;padding:0;margin:0;width:320px;border:1px solid var(--border-default);border-radius:6px">
  <li class="atlas-list-item" style="display:flex;align-items:center;justify-content:space-between"><span style="display:flex;align-items:center;gap:8px"><span class="atlas-dot atlas-dot-success"></span>atlas-core</span><span style="color:var(--text-tertiary);font-family:var(--font-mono);font-size:11px">2m ago</span></li>
  <li class="atlas-list-item" style="display:flex;align-items:center;justify-content:space-between"><span style="display:flex;align-items:center;gap:8px"><span class="atlas-dot atlas-dot-warning"></span>atlas-edge</span><span style="color:var(--text-tertiary);font-family:var(--font-mono);font-size:11px">5m ago</span></li>
  <li class="atlas-list-item" style="display:flex;align-items:center;justify-content:space-between"><span style="display:flex;align-items:center;gap:8px"><span class="atlas-dot atlas-dot-error"></span>atlas-api</span><span style="color:var(--text-tertiary);font-family:var(--font-mono);font-size:11px">12m ago</span></li>
</ul>