Data Display

Tables

Используйте tables для плотных списков сущностей и сравнений.

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Updated</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>API Gateway</td>
      <td><span class="badge badge-success">Online</span></td>
      <td>14:30</td>
    </tr>
  </tbody>
</table>

Lists

Navigation lists используют .list-nav, обычные списки - .list.

<ul class="list">
  <li class="list-item">First item</li>
  <li class="list-item">Second item</li>
</ul>

Description List

Description List подходит для read-only деталей сущности.

<dl class="description-list">
  <div class="description-list-row">
    <dt>Owner</dt>
    <dd>Platform Team</dd>
  </div>
  <div class="description-list-row">
    <dt>Status</dt>
    <dd>Active</dd>
  </div>
</dl>

Cards

Cards используются для самостоятельных блоков: summary, action, metric, status.

<article class="card">
  <h3 class="card-title">Card title</h3>
  <div class="card-content">
    <p>Card content.</p>
  </div>
</article>

Для числовых показателей:

<article class="card metric-card">
  <div class="card-content">
    <div class="metric-card-header">
      <p class="metric-card-label">Requests</p>
      <span class="metric-card-icon"><i class="ph ph-activity"></i></span>
    </div>
    <p class="metric-card-value">24.8k</p>
    <div class="metric-card-meta">
      <span class="metric-card-delta">+12%</span>
      <span>from yesterday</span>
    </div>
  </div>
</article>

Badges и Chips

Badges показывают состояние, chips - компактные значения или фильтры.

<span class="badge badge-success">Online</span>
<span class="badge badge-warning">Review</span>
<span class="badge badge-danger">Error</span>

<span class="chip chip-info">API</span>
<button class="chip chip-removable" type="button">
  Release
  <i class="ph ph-x"></i>
</button>

Avatar и Identity

<div class="identity">
  <span class="avatar avatar-md">AG</span>
  <div class="identity-body">
    <span class="identity-title">Ada Grace</span>
    <span class="identity-meta">Platform</span>
  </div>
</div>

Timeline

Timeline подходит для audit log, activity feed и истории событий.

<ol class="timeline">
  <li class="timeline-item timeline-item-success">
    <div class="timeline-card">
      <h3 class="timeline-title">Build completed</h3>
      <p class="timeline-text">Pipeline finished successfully.</p>
    </div>
  </li>
</ol>