Tutorial 03 · Layout

Bento & Dashboard

Compose a dashboard with .luc-bento (12-col), metrics, and responsive tall/wide items.

15 minIntermediatelucUI 2 · v2.1.3

Objectives

Use .luc-bento 12-col grid.
Place .luc-metric KPIs and bento half/wide items.
Keep it theme-aware.

Steps

Bento shell

bento.html

<div class="luc-bento">
  <article class="luc-card luc-bento-item luc-bento-half luc-prism" data-luc-spotlight>
    <div class="luc-metric"><span class="luc-metric-value">2.4k</span><span class="luc-metric-label">Users</span></div>
  </article>
  <article class="luc-card luc-bento-item luc-bento-half">Chart</article>
  <article class="luc-card luc-bento-item luc-bento-wide">Table</article>
</div>

Metrics

Prism cards react to pointer.

2.4kActive users

Revenue

+12% · WOW

Responsive bento

.luc-bento-half → full width on mobile via media query.

Result

Dashboard with two KPIs + wide table, no overflow.

Exercise

Add a .luc-bento-tall activity feed spanning 2 rows.

← Previous Next →