Open demo

CSS code

HTML 
<div class="bento">
  <article class="tile hero">
    <p class="eyebrow">Release 4.0</p>
    <h2><a href="#">Everything your team ships, on one board</a></h2>
    <p>Roadmap, review and release notes finally in the same place.</p>
  </article>
  <article class="tile stat">
    <h2 class="lbl">Weekly active</h2>
    <div><p class="num">18,442</p><p class="up"><span aria-hidden="true">▲</span><span class="sr-only">Up</span> 3.1% vs last week</p></div>
  </article>
  <article class="tile note">
    <h2 class="lbl">Changelog</h2>
    <p>Subgrid support landed, so nested cards now align to the parent tracks.</p>
  </article>
  <article class="tile list">
    <h2 class="lbl">Included</h2>
    <ul>
      <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Unlimited boards</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Audit log</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> SSO and SCIM</li>
    </ul>
  </article>
  <article class="tile feat">
    <p class="lbl">Case study</p>
    <div><h2><a href="#">How Meridian cut review time by 38%</a></h2>
      <p>Three editors, one queue, and a rule about who merges.</p></div>
  </article>
</div>
CSS 
/* Bento grid: five cards of unequal size placed with named grid areas, collapsing to one column
   under 700px. The two cards that lead somewhere (release and case study) use a stretched link on
   their heading; the others are static and have no hover effect. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bento{display:grid;gap:14px;width:100%;max-width:760px;grid-template-columns:repeat(3,1fr);
  grid-template-areas:"hero hero stat" "hero hero note" "list feat feat"}
.bento .tile{position:relative;padding:20px;display:flex;flex-direction:column;justify-content:space-between;
  background:#fff;border:1px solid #e9ecf1;border-radius:16px;transition:box-shadow .18s}
.bento .tile:has(a):hover{box-shadow:0 14px 32px -22px rgba(16,24,40,.3)}
.bento svg{display:block}
.bento h2 a{color:inherit;text-decoration:none}
.bento h2 a::after{content:"";position:absolute;inset:0}
.bento h2 a:focus-visible{outline:2px solid transparent}
.bento .tile:has(h2 a:focus-visible){outline:2px solid #4f46e5;outline-offset:3px}
@supports not selector(:has(*)){.bento h2 a:focus-visible{outline-color:#4f46e5;outline-offset:2px}}
.bento .hero{grid-area:hero;color:#fff;border:0;min-height:230px;
  background:linear-gradient(145deg,#4f46e5,#7c3aed 55%,#db2777)}
.bento .hero .eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#e0e7ff}
.bento .hero h2{font-size:1.5rem;line-height:1.22;letter-spacing:-.025em;margin-top:auto}
.bento .hero p{font-size:.86rem;color:#fff;margin-top:9px;line-height:1.6}
.bento .stat{grid-area:stat}
.bento .note{grid-area:note}
.bento .list{grid-area:list}
.bento .feat{grid-area:feat;background:#101828;color:#fff;border:0}
.bento .lbl{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#667085;font-weight:700}
.bento .num{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin-top:6px}
.bento .up{font-size:.78rem;font-weight:700;color:#15803d;margin-top:4px}
.bento .note p{font-size:.87rem;color:#475467;line-height:1.55;margin-top:9px}
.bento .list ul{list-style:none;margin-top:11px;display:flex;flex-direction:column;gap:9px;font-size:.85rem}
.bento .list li{display:flex;align-items:center;gap:9px;color:#475467}
.bento .list svg{width:15px;height:15px;stroke:#16a34a;fill:none;stroke-width:2.4;flex-shrink:0}
.bento .feat .lbl{color:#98a0b3}
.bento .feat h2{font-size:1.05rem;letter-spacing:-.01em;margin-top:8px}
.bento .feat h2 + p{font-size:.85rem;color:#98a0b3;margin-top:7px;line-height:1.6}
@media (max-width:700px){
  .bento{grid-template-columns:1fr;grid-template-areas:"hero" "stat" "note" "list" "feat"}
  .bento .hero{min-height:190px}
}
@media (prefers-reduced-motion:reduce){.bento .tile{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="row bento">
  <div class="col-md-8">
    <article class="card tile hero h-100"><div class="card-body">
      <p class="eyebrow mb-0">Release 4.0</p>
      <h2 class="card-title"><a href="#" class="stretched-link">Everything your team ships, on one board</a></h2>
      <p class="card-text mb-0">Roadmap, review and release notes finally in the same place.</p>
    </div></article>
  </div>
  <div class="col-md-4 d-flex flex-column stack">
    <article class="card tile stat flex-fill"><div class="card-body">
      <h2 class="lbl">Weekly active</h2>
      <div><p class="num mb-0">18,442</p><p class="up mb-0"><span aria-hidden="true">▲</span><span class="visually-hidden">Up</span> 3.1% vs last week</p></div>
    </div></article>
    <article class="card tile note flex-fill"><div class="card-body">
      <h2 class="lbl">Changelog</h2>
      <p class="card-text mb-0">Subgrid support landed, so nested cards now align to the parent tracks.</p>
    </div></article>
  </div>
  <div class="col-md-4">
    <article class="card tile list h-100"><div class="card-body">
      <h2 class="lbl">Included</h2>
      <ul class="list-unstyled d-flex flex-column mb-0">
        <li class="d-flex align-items-center"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Unlimited boards</li>
        <li class="d-flex align-items-center"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Audit log</li>
        <li class="d-flex align-items-center"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> SSO and SCIM</li>
      </ul>
    </div></article>
  </div>
  <div class="col-md-8">
    <article class="card tile feat h-100"><div class="card-body">
      <p class="lbl">Case study</p>
      <div><h2 class="card-title"><a href="#" class="stretched-link">How Meridian cut review time by 38%</a></h2>
        <p class="card-text mb-0">Three editors, one queue, and a rule about who merges.</p></div>
    </div></article>
  </div>
</div>
CSS 
/* Bootstrap grid version of the bento: a .row with 14px gutters, the hero in .col-md-8 beside a stacked
   .col-md-4, then .col-md-4 + .col-md-8. Below the md breakpoint (768px) every card takes the full width.
   The release and case-study cards use .stretched-link; the others are static and have no hover effect. */
.bento{--bs-gutter-x:14px;--bs-gutter-y:14px;width:100%;max-width:774px}
.bento .tile{--bs-card-border-color:#e9ecf1;--bs-card-border-radius:16px;--bs-card-spacer-y:20px;--bs-card-spacer-x:20px;
  transition:box-shadow .18s}
.bento .tile .card-body{display:flex;flex-direction:column;justify-content:space-between}
.bento .tile:has(.stretched-link):hover{box-shadow:0 14px 32px -22px rgba(16,24,40,.3)}
.bento .stack{gap:14px}
.bento svg{display:block}
.bento .card-title{font-weight:700;margin:0}
.bento .card-title a{color:inherit;text-decoration:none}
.bento .stretched-link:focus-visible{outline:2px solid transparent}
.bento .tile:has(.stretched-link:focus-visible){outline:2px solid #4f46e5;outline-offset:3px}
@supports not selector(:has(*)){.bento .stretched-link:focus-visible{outline-color:#4f46e5;outline-offset:2px}}
.bento .hero{--bs-card-border-width:0;--bs-card-color:#fff;min-height:230px;
  background:linear-gradient(145deg,#4f46e5,#7c3aed 55%,#db2777)}
.bento .hero .eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#e0e7ff}
.bento .hero .card-title{font-size:1.5rem;line-height:1.22;letter-spacing:-.025em;margin-top:auto}
.bento .hero .card-text{font-size:.86rem;color:#fff;margin-top:9px;line-height:1.6}
.bento .feat{--bs-card-bg:#101828;--bs-card-border-width:0;--bs-card-color:#fff}
.bento .lbl{font-size:.72rem;line-height:normal;letter-spacing:.08em;text-transform:uppercase;color:#667085;font-weight:700;margin:0}
.bento .num{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin-top:6px}
.bento .up{font-size:.78rem;font-weight:700;color:#15803d;margin-top:4px}
.bento .note .card-text{font-size:.87rem;color:#475467;line-height:1.55;margin-top:9px}
.bento .list ul{margin-top:11px;gap:9px;font-size:.85rem}
.bento .list li{gap:9px;color:#475467}
.bento .list svg{width:15px;height:15px;stroke:#16a34a;fill:none;stroke-width:2.4;flex-shrink:0}
.bento .feat .lbl{color:#98a0b3}
.bento .feat .card-title{font-size:1.05rem;line-height:normal;letter-spacing:-.01em;margin-top:8px}
.bento .feat .card-text{font-size:.85rem;color:#98a0b3;margin-top:7px;line-height:1.6}
@media (max-width:767.98px){.bento .hero{min-height:190px}}
@media (prefers-reduced-motion:reduce){.bento .tile{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="grid w-full max-w-[760px] grid-cols-3 gap-3.5 [grid-template-areas:'hero_hero_stat'_'hero_hero_note'_'list_feat_feat'] max-[700px]:grid-cols-1 max-[700px]:[grid-template-areas:'hero'_'stat'_'note'_'list'_'feat']">
  <article class="relative flex min-h-[230px] flex-col justify-between rounded-2xl bg-[linear-gradient(145deg,#4f46e5,#7c3aed_55%,#db2777)] p-5 text-white transition-shadow duration-[180ms] [grid-area:hero] hover:shadow-[0_14px_32px_-22px_rgba(16,24,40,.3)] has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-[3px] has-[a:focus-visible]:outline-[#4f46e5] motion-reduce:transition-none max-[700px]:min-h-[190px]">
    <p class="text-[.7rem] font-bold tracking-[.13em] text-[#e0e7ff] uppercase">Release 4.0</p>
    <h2 class="mt-auto text-2xl leading-[1.22] font-bold tracking-[-.025em]"><a href="#" class="after:absolute after:inset-0 focus-visible:outline-2 focus-visible:outline-transparent">Everything your team ships, on one board</a></h2>
    <p class="mt-[9px] text-[.86rem] leading-[1.6] text-white">Roadmap, review and release notes finally in the same place.</p>
  </article>
  <article class="flex flex-col justify-between rounded-2xl border border-[#e9ecf1] bg-white p-5 [grid-area:stat]">
    <h2 class="text-[.72rem] font-bold tracking-[.08em] text-[#667085] uppercase">Weekly active</h2>
    <div><p class="mt-1.5 text-[2rem] font-extrabold tracking-[-.03em]">18,442</p><p class="mt-1 text-[.78rem] font-bold text-[#15803d]"><span aria-hidden="true">▲</span><span class="sr-only">Up</span> 3.1% vs last week</p></div>
  </article>
  <article class="flex flex-col justify-between rounded-2xl border border-[#e9ecf1] bg-white p-5 [grid-area:note]">
    <h2 class="text-[.72rem] font-bold tracking-[.08em] text-[#667085] uppercase">Changelog</h2>
    <p class="mt-[9px] text-[.87rem] leading-[1.55] text-[#475467]">Subgrid support landed, so nested cards now align to the parent tracks.</p>
  </article>
  <article class="flex flex-col justify-between rounded-2xl border border-[#e9ecf1] bg-white p-5 [grid-area:list]">
    <h2 class="text-[.72rem] font-bold tracking-[.08em] text-[#667085] uppercase">Included</h2>
    <ul class="mt-[11px] flex flex-col gap-[9px] text-[.85rem] [&_svg]:block [&_svg]:size-[15px] [&_svg]:shrink-0 [&_svg]:fill-none [&_svg]:stroke-[#16a34a] [&_svg]:stroke-[2.4] [&>li]:flex [&>li]:items-center [&>li]:gap-[9px] [&>li]:text-[#475467]">
      <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Unlimited boards</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> Audit log</li>
      <li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg> SSO and SCIM</li>
    </ul>
  </article>
  <article class="relative flex flex-col justify-between rounded-2xl bg-[#101828] p-5 text-white transition-shadow duration-[180ms] [grid-area:feat] hover:shadow-[0_14px_32px_-22px_rgba(16,24,40,.3)] has-[a:focus-visible]:outline-2 has-[a:focus-visible]:outline-offset-[3px] has-[a:focus-visible]:outline-[#4f46e5] motion-reduce:transition-none">
    <p class="text-[.72rem] font-bold tracking-[.08em] text-[#98a0b3] uppercase">Case study</p>
    <div><h2 class="mt-2 text-[1.05rem] font-bold tracking-[-.01em]"><a href="#" class="after:absolute after:inset-0 focus-visible:outline-2 focus-visible:outline-transparent">How Meridian cut review time by 38%</a></h2>
      <p class="mt-[7px] text-[.85rem] leading-[1.6] text-[#98a0b3]">Three editors, one queue, and a rule about who merges.</p></div>
  </article>
</div>

About this set

A bento grid of five cards of different sizes for landing pages, product updates and dashboards. A large gradient hero announces a release, two small cards on its right show a weekly active users figure with its weekly change and a one-line changelog note, and a bottom row pairs an Included checklist with a wide dark case-study card. In the plain CSS and Tailwind versions the layout is one CSS grid with named template areas, so rearranging the cards means editing a single grid-template-areas value, and under 700px the grid becomes one column. The Bootstrap version builds the same arrangement from the stock grid: a .col-md-8 hero beside a stacked .col-md-4, then a .col-md-4 and a .col-md-8, stacking below the md breakpoint. Only the two cards that lead somewhere, the release and the case study, are links; they use stretched links and get the hover shadow, while the three static cards have no hover state. Every card has a heading, so the grid can be navigated heading by heading.

What’s included

  • Named grid areas that rearrange with one property
  • Single-column layout on narrow screens
  • Bootstrap version built with .row and .col-md-*
  • Stretched links only on the cards that lead somewhere
  • A heading on every card

Accessibility

Each card has an h2, and the two linked cards hold a single link each with a 2px indigo focus ring drawn around the card. The up arrow in the statistic is aria-hidden and replaced by hidden text reading Up. Text on the hero gradient uses solid colours that were checked at 4.5:1, the grey labels were darkened, and the hover shadow transition is removed under reduced motion.

Customise it

Rearrange the cards through grid-template-areas on .bento, or the [grid-template-areas:...] class in Tailwind; in Bootstrap, change the .col-md-* widths. The hero gradient is on .hero and the dark card colour is #101828.