Dashboard

Finance Metrics Board

Useful for finance pages, account centers, and calmer dashboard surfaces that need more white space.

dashboardfinancecardsmetrics

المعاينة المباشرة

Balance

$84,200

Expenses

$12,400

Runway

19 mo

Budget allocation

Product42%

Growth31%

Ops18%

HTML + Tailwind

كود جاهز للنسخ

<section class="rounded-[32px] border border-slate-200 bg-white p-6 shadow-sm">
  <div class="grid gap-4 lg:grid-cols-[1fr_0.8fr]">
    <div class="grid gap-4 sm:grid-cols-3">
      <div class="rounded-[24px] bg-slate-950 p-4 text-white">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-400">Balance</p>
        <p class="mt-3 text-3xl font-semibold">$84,200</p>
      </div>
      <div class="rounded-[24px] border border-slate-200 bg-slate-50 p-4">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-500">Expenses</p>
        <p class="mt-3 text-3xl font-semibold text-slate-950">$12,400</p>
      </div>
      <div class="rounded-[24px] border border-slate-200 bg-white p-4">
        <p class="text-xs uppercase tracking-[0.24em] text-slate-500">Runway</p>
        <p class="mt-3 text-3xl font-semibold text-slate-950">19 mo</p>
      </div>
    </div>
    <div class="rounded-[28px] border border-slate-200 bg-slate-50 p-5">
      <div class="flex items-center justify-between">
        <p class="text-sm font-semibold text-slate-950">Budget allocation</p>
        <span class="text-xs text-slate-500">Q2</span>
      </div>
      <div class="mt-4 space-y-3">
        <div>
          <div class="flex items-center justify-between text-xs text-slate-500"><span>Product</span><span>42%</span></div>
          <div class="mt-2 h-2 rounded-full bg-slate-200"><div class="h-2 w-[42%] rounded-full bg-slate-950"></div></div>
        </div>
        <div>
          <div class="flex items-center justify-between text-xs text-slate-500"><span>Growth</span><span>31%</span></div>
          <div class="mt-2 h-2 rounded-full bg-slate-200"><div class="h-2 w-[31%] rounded-full bg-sky-500"></div></div>
        </div>
        <div>
          <div class="flex items-center justify-between text-xs text-slate-500"><span>Ops</span><span>18%</span></div>
          <div class="mt-2 h-2 rounded-full bg-slate-200"><div class="h-2 w-[18%] rounded-full bg-emerald-500"></div></div>
        </div>
      </div>
    </div>
  </div>
</section>

بلوكات مشابهة

MRR

$42k

Churn

1.8%

Activation

68%

Weekly activity

+12%

Dashboard

Command Center Shell

A dense dashboard shell with a compact rail, summary cards, and activity surfaces.

dashboardadminanalyticssaas

فتح البلوك

Starter

$19

For early products and single operators.

Unlimited blocks
Email support
Basic exports

Popular

Growth

$49

For teams shipping every week.

Shared libraries
Advanced exports
Priority support

Scale

$129

For larger teams and multi-brand systems.

Unlimited seats
Approval flows
Dedicated onboarding

Pricing

Prism Pricing Grid

A three-tier pricing layout with a highlighted middle plan and compact benefit density.

pricingplanssaascards

فتح البلوك

Shipping fast UI systems for modern apps

Build a sharper product surface before your first user lands.

Layered typography, strong spacing, and conversion-ready CTAs for startup launches, product reveals, and campaign microsites.

Start free See demo

Teams

1.2k

Launches

184

Avg. uplift

31%

Hero Sections

Aurora Launch Hero

A cinematic hero with layered gradients, trust stats, and two focused calls to action.

herolanding pagesaascta

فتح البلوك