Data
Components for displaying structured data.
Table
Data tables with headers, rows, and optional status badges.
| Name | Status | Role | Actions |
|---|---|---|---|
| John Doe | Active | Administrator | |
| Jane Smith | Pending | Editor | |
| Bob Wilson | Inactive | Viewer |
Code
<table class="ip-table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td><span class="ip-badge ip-badge-success">Active</span></td>
<td>Administrator</td>
</tr>
<tr>
<td>Jane Smith</td>
<td><span class="ip-badge ip-badge-warning">Pending</span></td>
<td>Editor</td>
</tr>
</tbody>
</table>
Terminal List
Lists with terminal-style $ bullet markers.
- System initialized successfully
- Loading configuration files
- Connecting to database
- Server ready on port 8080
Code
<ul class="ip-terminal-list">
<li>System initialized successfully</li>
<li>Loading configuration files</li>
<li>Connecting to database</li>
<li>Server ready on port 8080</li>
</ul>
Stat
Metric display with value, label, and optional trend indicator.
1,234
Total Users
89%
Uptime
↑ 2.5%
47ms
Latency
↓ 12ms
Code
<div class="ip-stat">
<div class="ip-stat-value">1,234</div>
<div class="ip-stat-label">Total Users</div>
</div>
<!-- With trend indicator -->
<div class="ip-stat">
<div class="ip-stat-value">89%</div>
<div class="ip-stat-label">Uptime</div>
<div class="ip-stat-trend ip-stat-trend-up">↑ 2.5%</div>
</div>
<div class="ip-stat">
<div class="ip-stat-value">47ms</div>
<div class="ip-stat-label">Latency</div>
<div class="ip-stat-trend ip-stat-trend-down">↓ 12ms</div>
</div>
List Item
Flexible list row with optional icon, content, and trailing action.
Document.pdf
John Doe commented on your post
Simple item without icon
Code
<div class="ip-list-item">
<div class="ip-list-item-icon">
<svg>...</svg>
</div>
<div class="ip-list-item-content">
<div class="ip-list-item-title">Document.pdf</div>
<div class="ip-list-item-meta">2.4 MB • Updated 2 hours ago</div>
</div>
<div class="ip-list-item-action">
<button class="ip-btn">Download</button>
</div>
</div>
<!-- With avatar -->
<div class="ip-list-item">
<div class="ip-list-item-icon">
<div class="ip-avatar ip-avatar-sm">JD</div>
</div>
<div class="ip-list-item-content">
<div class="ip-list-item-title">John Doe commented</div>
<div class="ip-list-item-meta">5 minutes ago</div>
</div>
</div>