Revenue Growth
+24.5% compared to last month
2,405
Active users
98%
Uptime SLA
Team Collaboration
Invite up to 10 members
import React from "react";
export default function BentoGrid({ children, className = "" }) {
return (
<div
className={`grid w-full h-full grid-cols-1 md:grid-cols-3 gap-4 auto-rows-fr ${className}`}
>
{children || (
<>
<article className="md:col-span-2 rounded-2xl border border-slate-800 bg-slate-900/70 p-4 shadow-sm">
<p className="text-xs font-semibold uppercase tracking-wide text-slate-400">
Featured
</p>
<h3 className="mt-2 text-lg font-semibold text-slate-100">
Build bento layouts faster
</h3>
<p className="mt-2 text-sm text-slate-400">
The wrapper controls structure while each child defines its own
col-span and row-span classes.
</p>
</article>
<article className="rounded-2xl border border-slate-800 bg-slate-900/70 p-4 shadow-sm">
<h3 className="text-base font-semibold text-slate-100">Stats</h3>
<p className="mt-2 text-sm text-slate-400">Flexible by default.</p>
</article>
<article className="rounded-2xl border border-slate-800 bg-slate-900/70 p-4 shadow-sm">
<h3 className="text-base font-semibold text-slate-100">Insights</h3>
<p className="mt-2 text-sm text-slate-400">Drop in any content.</p>
</article>
<article className="md:col-span-2 rounded-2xl border border-slate-800 bg-slate-900/70 p-4 shadow-sm">
<h3 className="text-base font-semibold text-slate-100">Expandable</h3>
<p className="mt-2 text-sm text-slate-400">
Perfect for dashboard tiles, features, and mixed media cards.
</p>
</article>
</>
)}
</div>
);
}
---
const { class: className = "" } = Astro.props;
---
<div
class={`grid w-full h-full grid-cols-1 md:grid-cols-3 gap-4 auto-rows-fr ${className}`}
>
<slot>
<article
class="md:col-span-2 rounded-2xl border border-slate-800 bg-slate-900/70 p-4 shadow-sm"
>
<div class="flex h-full flex-col justify-between">
<div
class="flex-1 w-full rounded-lg bg-linear-to-tr from-slate-800 to-slate-700/50 mb-2 min-h-16"
>
</div>
<div>
<h3 class="text-lg font-semibold text-slate-100">Revenue Growth</h3>
<p class="mt-1 text-sm text-slate-400">
+24.5% compared to last month
</p>
</div>
</div>
</article>
<article
class="rounded-2xl border border-slate-800 bg-slate-900/70 p-4 shadow-sm"
>
<h3 class="text-2xl font-bold text-slate-100">2,405</h3>
<p class="text-sm text-slate-400">Active users</p>
</article>
<article
class="rounded-2xl border border-slate-800 bg-slate-900/70 p-4 shadow-sm"
>
<h3 class="text-2xl font-bold text-slate-100">98%</h3>
<p class="text-sm text-slate-400">Uptime SLA</p>
</article>
<article
class="md:col-span-2 rounded-2xl border border-slate-800 bg-slate-900/70 p-4 shadow-sm"
>
<div class="flex items-center gap-4">
<div class="h-12 w-12 rounded-full bg-slate-800"></div>
<div>
<h3 class="text-base font-semibold text-slate-100">
Team Collaboration
</h3>
<p class="text-sm text-slate-400">Invite up to 10 members</p>
</div>
</div>
</article>
</slot>
</div>