Skip to main content

​
Overview

The dashboard displays real-time business metrics in card format with trend indicators and an activity feed showing recent system events.

​
Metrics Container

The metrics grid displays key performance indicators across the top of the dashboard.

​
HTML Structure

<div class="metrics">
  <div class="metric r">
    <label>Ventas Hoy</label>
    <strong>$8,450</strong>
    <small class="up">▲ 12% vs ayer</small>
    <em>💰</em>
  </div>
  <!-- Additional metrics... -->
</div>
Source: index.html:62-87

​
CSS Classes

​
.metrics

Container for all metric cards
  • Display: CSS Grid
  • Columns: repeat(auto-fit, minmax(190px, 1fr))
  • Gap: 14px
  • Margin bottom: 24px
Source: base.css:294-299

​
.metric

Individual metric card
  • Background: White (var(--bl))
  • Border: 1px solid light gray (var(--gb))
  • Border radius: 8px
  • Padding: 18px 20px
  • Box shadow: 0 2px 12px rgba(0, 0, 0, .08)
  • Display: Flex column
  • Gap: 5px
Source: base.css:301-310

​
Border Left Color Variants

.metric.r - Red border (Sales/Revenue metrics) 
border-left: 4px solid var(--rojo);
Source: base.css:312-314 .metric.n - Black border (Stock/Inventory metrics) 
border-left: 4px solid var(--negro);
Source: base.css:316-318 .metric.g - Gray border (Transaction metrics) 
border-left: 4px solid var(--gm);
Source: base.css:320-322

​
Metric Content Elements

​
Label

<label>Ventas Hoy</label>
  • Font size: 11px
  • Color: Medium gray (var(--gm))
  • Transform: Uppercase
  • Letter spacing: 0.5px
Source: base.css:324-329

​
Value

<strong>$8,450</strong>
  • Font size: 26px
  • Font weight: 800
  • Line height: 1
Source: base.css:331-335

​
Trend Indicator

<small class="up">▲ 12% vs ayer</small>
<small class="down">▼ 3 sin stock</small>
  • Font size: 11.5px
  • .up color: Green (#1E8A3E)
  • .down color: Red (var(--rojo))
Source: base.css:337-347

​
Icon

<em>💰</em>
  • Font size: 20px
  • Align: Flex-end (right)
  • Opacity: 0.2
  • Font style: Normal
Source: base.css:349-354

​
Metric Examples

​
Sales Metric

<div class="metric r">
  <label>Ventas Hoy</label>
  <strong>$8,450</strong>
  <small class="up">▲ 12% vs ayer</small>
  <em>💰</em>
</div>
Source: index.html:63-68

​
Stock Metric

<div class="metric n">
  <label>Productos en Stock</label>
  <strong>1,284</strong>
  <small class="down">▼ 3 sin stock</small>
  <em>📦</em>
</div>
Source: index.html:69-74

​
Transactions Metric

<div class="metric g">
  <label>Transacciones Hoy</label>
  <strong>47</strong>
  <small class="up">▲ 8 vs ayer</small>
  <em>🛒</em>
</div>
Source: index.html:75-80

​
Revenue Metric

<div class="metric r">
  <label>Ingresos del Mes</label>
  <strong>$124K</strong>
  <small class="up">▲ 5% vs mes ant.</small>
  <em>📈</em>
</div>
Source: index.html:81-86

​
Activity Feed

The activity feed displays recent system events with color-coded indicators.

​
HTML Structure

<div class="card">
  <div class="card-title">Actividad Reciente <small>Últimas 24 horas</small></div>
  <ul class="activity">
    <li>
      <span class="dot dot-r"></span>
      <div>
        <div>Venta #1047 – $320.00 – María García</div>
        <div class="act-time">Hace 8 minutos</div>
      </div>
    </li>
    <!-- Additional activities... -->
  </ul>
</div>
Source: index.html:119-128

​
CSS Classes

​
.activity

List container 
list-style: none;
Source: dashboard.css:38

​
.activity li

Individual activity item
  • Display: Flex
  • Align items: Flex-start
  • Gap: 10px
  • Padding: 10px 0
  • Border bottom: 1px solid light gray
  • Font size: 12.5px
Source: dashboard.css:39-46

​
.dot

Activity indicator dot
  • Width: 7px
  • Height: 7px
  • Border radius: 50%
  • Margin top: 4px
  • Flex shrink: 0
Source: dashboard.css:48-53

​
Dot Color Variants

.dot-r - Red dot (sales events) 
background: var(--rojo);
Source: dashboard.css:54 .dot-n - Black dot (stock events) 
background: var(--negro);
Source: dashboard.css:55 .dot-g - Gray dot (system events) 
background: var(--gm);
Source: dashboard.css:56

​
.act-time

Timestamp display
  • Font size: 10.5px
  • Color: Medium gray (var(--gm))
  • Margin top: 1px
Source: dashboard.css:57

​
Activity Event Types

​
Sale Event

<li>
  <span class="dot dot-r"></span>
  <div>
    <div>Venta #1047 – $320.00 – María García</div>
    <div class="act-time">Hace 8 minutos</div>
  </div>
</li>
Source: index.html:122

​
Stock Update Event

<li>
  <span class="dot dot-n"></span>
  <div>
    <div>Stock actualizado: Teclado Mecánico RGB (+50 uds.)</div>
    <div class="act-time">Hace 32 minutos</div>
  </div>
</li>
Source: index.html:123

​
New Product Event

<li>
  <span class="dot dot-g"></span>
  <div>
    <div>Producto nuevo: Hub USB 4 Puertos agregado</div>
    <div class="act-time">Hace 2 horas</div>
  </div>
</li>
Source: index.html:125

​
Alert Event

<li>
  <span class="dot dot-r"></span>
  <div>
    <div>⚠️ Stock bajo: Audífonos In-Ear (2 uds.)</div>
    <div class="act-time">Hace 3 horas</div>
  </div>
</li>
Source: index.html:126

​
Responsive Behavior

On screens below 860px:
  • Metrics grid switches to single column
  • Activity feed maintains full width
Source: base.css:544-557

Build docs developers (and LLMs) love

Get started for freeTalk to us