Features

What you do or what the product does. Five layouts, from a plain icon grid to tabs that work with no JavaScript.

Icon gridAlternating image and textTabsSticky headingBento grid

Icon grid

sections/features/icon-grid.html

Six short features in a grid: one column on a phone, two on a tablet, three on a desktop.

<section class="mx-auto max-w-6xl px-6 py-16 sm:py-24">
  <div class="max-w-2xl">
    <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">Why people pick us</p>
    <h2 class="mt-3! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">Everything a small garden needs</h2>
    <p class="mt-4! mb-0! text-lg leading-relaxed! text-black/70 dark:text-white/70">One crew, one invoice, and the same faces every visit.</p>
  </div>
  <div class="mt-12 grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
    <div>
      <span class="flex size-10 items-center justify-center rounded-lg bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-50"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span>
      <h3 class="mt-4! mb-0! text-base! font-semibold! leading-snug!">On a schedule that fits you</h3>
      <p class="mt-2! mb-0! text-sm leading-relaxed! text-black/70 dark:text-white/70">Weekly, every other week, or once a season. Change it whenever you like.</p>
    </div>
    <div>
      <span class="flex size-10 items-center justify-center rounded-lg bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-50"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l8 3v6c0 4.5-3.4 8.2-8 9-4.6-.8-8-4.5-8-9V6l8-3z"/></svg></span>
      <h3 class="mt-4! mb-0! text-base! font-semibold! leading-snug!">Fully insured</h3>
      <p class="mt-2! mb-0! text-sm leading-relaxed! text-black/70 dark:text-white/70">If something breaks, we fix it or pay for it. No arguments.</p>
    </div>
    <div>
      <span class="flex size-10 items-center justify-center rounded-lg bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-50"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span>
      <h3 class="mt-4! mb-0! text-base! font-semibold! leading-snug!">A price in writing</h3>
      <p class="mt-2! mb-0! text-sm leading-relaxed! text-black/70 dark:text-white/70">The quote is the invoice. It doesn't grow once we show up.</p>
    </div>
    <div>
      <span class="flex size-10 items-center justify-center rounded-lg bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-50"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5h16v11H9l-5 4V5z"/></svg></span>
      <h3 class="mt-4! mb-0! text-base! font-semibold! leading-snug!">A real person answers</h3>
      <p class="mt-2! mb-0! text-sm leading-relaxed! text-black/70 dark:text-white/70">Message us and the person who reads it is the one who does the work.</p>
    </div>
    <div>
      <span class="flex size-10 items-center justify-center rounded-lg bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-50"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21c-4-3-7-6.5-7-10.5A7 7 0 0 1 12 3a7 7 0 0 1 7 7.5c0 4-3 7.5-7 10.5z"/><path d="M12 8v6M9 11h6"/></svg></span>
      <h3 class="mt-4! mb-0! text-base! font-semibold! leading-snug!">Plants that suit your soil</h3>
      <p class="mt-2! mb-0! text-sm leading-relaxed! text-black/70 dark:text-white/70">We plan around your light, your soil and how much upkeep you want.</p>
    </div>
    <div>
      <span class="flex size-10 items-center justify-center rounded-lg bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-50"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 17l5-5 4 4 7-8"/><path d="M15 8h5v5"/></svg></span>
      <h3 class="mt-4! mb-0! text-base! font-semibold! leading-snug!">Better every season</h3>
      <p class="mt-2! mb-0! text-sm leading-relaxed! text-black/70 dark:text-white/70">We keep notes on what worked, so next spring starts where this one ended.</p>
    </div>
  </div>
</section>

Alternating image and text

sections/features/alternating.html

Two or three bigger features, each with its own image, alternating sides on a desktop and always image-first on a phone.

<section class="mx-auto flex max-w-6xl flex-col gap-20 px-6 py-16 sm:py-24">
  <div class="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
    <img src="https://picsum.photos/seed/alt-plan/1200/900" alt="" class="aspect-[4/3] w-full rounded-2xl object-cover">
    <div>
      <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">Garden design</p>
      <h2 class="mt-3! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight">A plan you can actually keep up with</h2>
      <p class="mt-4! mb-0! text-lg leading-relaxed! text-black/70 dark:text-white/70">We walk the garden with you, ask how much time you want to spend in it, and design around the answer. Low upkeep is a design choice, not a compromise.</p>
      <a href="#" class="mt-6 inline-flex items-center gap-1 text-sm font-semibold text-brand-600! no-underline! hover:underline! dark:text-brand-50!">How design works<span aria-hidden="true">&rarr;</span></a>
    </div>
  </div>
  <div class="grid items-center gap-10 lg:grid-cols-2 lg:gap-16">
    <img src="https://picsum.photos/seed/alt-care/1200/900" alt="" class="aspect-[4/3] w-full rounded-2xl object-cover lg:order-last">
    <div>
      <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">Regular care</p>
      <h2 class="mt-3! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight">The same crew, every visit</h2>
      <p class="mt-4! mb-0! text-lg leading-relaxed! text-black/70 dark:text-white/70">Mowing, edging, pruning and feeding on a schedule that suits you. The people who come know your garden, and what you asked them to leave alone.</p>
      <a href="#" class="mt-6 inline-flex items-center gap-1 text-sm font-semibold text-brand-600! no-underline! hover:underline! dark:text-brand-50!">See care plans<span aria-hidden="true">&rarr;</span></a>
    </div>
  </div>
</section>

Tabs

sections/features/tabbed.html

One feature at a time, switched by tabs. Pure CSS: hidden radio buttons and Tailwind's has-[] variants, so it works in plain HTML and inside VitePress markdown alike.

  • The radio ids (feature-tab-1 and so on) must be unique on the page. If you paste this twice, rename them in the second copy, including in the group-has-[#...] classes.
<section class="group mx-auto max-w-6xl px-6 py-16 sm:py-24">
  <div class="mx-auto max-w-2xl text-center">
    <h2 class="mt-0! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">One app for the whole booking</h2>
    <p class="mt-4! mb-0! text-lg leading-relaxed! text-black/70 dark:text-white/70">Pick a part of the day to see how it works.</p>
  </div>
  <div class="mt-10 flex flex-wrap justify-center gap-2" role="radiogroup" aria-label="Features">
    <label class="cursor-pointer rounded-full px-4 py-2 text-sm font-medium ring-1 ring-black/15 ring-inset hover:bg-black/5 has-[:checked]:bg-brand-500 has-[:checked]:text-white has-[:checked]:ring-brand-500 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand-500 dark:ring-white/20 dark:hover:bg-white/10"><input type="radio" name="feature-tabs" id="feature-tab-1" class="sr-only" checked>Booking</label>
    <label class="cursor-pointer rounded-full px-4 py-2 text-sm font-medium ring-1 ring-black/15 ring-inset hover:bg-black/5 has-[:checked]:bg-brand-500 has-[:checked]:text-white has-[:checked]:ring-brand-500 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand-500 dark:ring-white/20 dark:hover:bg-white/10"><input type="radio" name="feature-tabs" id="feature-tab-2" class="sr-only">Reminders</label>
    <label class="cursor-pointer rounded-full px-4 py-2 text-sm font-medium ring-1 ring-black/15 ring-inset hover:bg-black/5 has-[:checked]:bg-brand-500 has-[:checked]:text-white has-[:checked]:ring-brand-500 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand-500 dark:ring-white/20 dark:hover:bg-white/10"><input type="radio" name="feature-tabs" id="feature-tab-3" class="sr-only">Payments</label>
  </div>
  <div class="mt-10 rounded-2xl border border-black/10 p-6 sm:p-10 dark:border-white/10">
    <div class="hidden items-center gap-10 group-has-[#feature-tab-1:checked]:grid lg:grid-cols-2">
      <div>
        <h3 class="mt-0! mb-0! text-2xl! font-bold! leading-snug!">Clients book themselves in</h3>
        <p class="mt-3! mb-0! leading-relaxed! text-black/70 dark:text-white/70">Share one link. Clients see the slots you actually have free and pick one, at any hour, without a phone call.</p>
      </div>
      <img src="https://picsum.photos/seed/tab-booking/1200/800" alt="" class="aspect-[3/2] w-full rounded-xl object-cover">
    </div>
    <div class="hidden items-center gap-10 group-has-[#feature-tab-2:checked]:grid lg:grid-cols-2">
      <div>
        <h3 class="mt-0! mb-0! text-2xl! font-bold! leading-snug!">Fewer no-shows</h3>
        <p class="mt-3! mb-0! leading-relaxed! text-black/70 dark:text-white/70">A reminder goes out the day before, with a one-tap link to move the booking instead of skipping it.</p>
      </div>
      <img src="https://picsum.photos/seed/tab-reminders/1200/800" alt="" class="aspect-[3/2] w-full rounded-xl object-cover">
    </div>
    <div class="hidden items-center gap-10 group-has-[#feature-tab-3:checked]:grid lg:grid-cols-2">
      <div>
        <h3 class="mt-0! mb-0! text-2xl! font-bold! leading-snug!">Paid before they arrive</h3>
        <p class="mt-3! mb-0! leading-relaxed! text-black/70 dark:text-white/70">Take a deposit or the full price when they book. Refunds are one click if plans change.</p>
      </div>
      <img src="https://picsum.photos/seed/tab-payments/1200/800" alt="" class="aspect-[3/2] w-full rounded-xl object-cover">
    </div>
  </div>
</section>

Sticky heading

sections/features/sticky.html

The heading stays in view on the left while a list of features scrolls past on the right. On a phone it's a plain stacked list.

  • md:top-24 leaves room for a 64px site header, which is VitePress's. Adjust it if your header is taller.
<section class="mx-auto grid max-w-6xl gap-12 px-6 py-16 sm:py-24 md:grid-cols-5 md:gap-16">
  <div class="self-start md:sticky md:top-24 md:col-span-2">
    <p class="my-0! text-sm font-semibold text-brand-600 dark:text-brand-50">How we work</p>
    <h2 class="mt-3! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">Small studio, senior work</h2>
    <p class="mt-4! mb-0! text-lg leading-relaxed! text-black/70 dark:text-white/70">You work with the people doing the work, from the first call to the handover.</p>
    <a href="#" class="mt-8 inline-flex items-center justify-center rounded-md bg-brand-500 px-5 py-3 text-sm font-semibold text-white! no-underline! shadow-sm hover:bg-brand-600">Book a call</a>
  </div>
  <div class="flex flex-col divide-y divide-black/10 md:col-span-3 dark:divide-white/10">
    <div class="py-8 first:pt-0">
      <h3 class="mt-0! mb-0! text-xl! font-semibold! leading-snug!">We start with your numbers</h3>
      <p class="mt-3! mb-0! leading-relaxed! text-black/70 dark:text-white/70">Before any design, we look at where people drop off today. The work is aimed at the one or two places that actually cost you.</p>
    </div>
    <div class="py-8">
      <h3 class="mt-0! mb-0! text-xl! font-semibold! leading-snug!">You see progress every week</h3>
      <p class="mt-3! mb-0! leading-relaxed! text-black/70 dark:text-white/70">A short call and a link to what changed. No big reveal at the end, and no surprises either.</p>
    </div>
    <div class="py-8">
      <h3 class="mt-0! mb-0! text-xl! font-semibold! leading-snug!">We design in the real product</h3>
      <p class="mt-3! mb-0! leading-relaxed! text-black/70 dark:text-white/70">Prototypes use your actual content and data, so what you approve is what ships.</p>
    </div>
    <div class="py-8">
      <h3 class="mt-0! mb-0! text-xl! font-semibold! leading-snug!">We hand over properly</h3>
      <p class="mt-3! mb-0! leading-relaxed! text-black/70 dark:text-white/70">Components, notes and a recorded walkthrough, so your team can keep going without us.</p>
    </div>
    <div class="py-8 last:pb-0">
      <h3 class="mt-0! mb-0! text-xl! font-semibold! leading-snug!">We check back in a month</h3>
      <p class="mt-3! mb-0! leading-relaxed! text-black/70 dark:text-white/70">A free follow-up to look at the numbers again and fix anything that didn't land.</p>
    </div>
  </div>
</section>

Bento grid

sections/features/bento.html

One large card and four small ones, in an uneven grid that collapses to a single column on a phone.

<section class="mx-auto max-w-6xl px-6 py-16 sm:py-24">
  <h2 class="mt-0! mb-0! max-w-2xl border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">Built for the way a small shop actually runs</h2>
  <div class="mt-12 grid gap-4 md:grid-cols-3">
    <div class="flex flex-col overflow-hidden rounded-2xl bg-black/[0.03] md:col-span-2 md:row-span-2 dark:bg-white/5">
      <div class="p-6 sm:p-8">
        <h3 class="mt-0! mb-0! text-xl! font-semibold! leading-snug!">Every order in one list</h3>
        <p class="mt-2! mb-0! max-w-md leading-relaxed! text-black/70 dark:text-white/70">Online, phone and walk-in orders land in the same place, sorted by when they need to go out.</p>
      </div>
      <img src="https://picsum.photos/seed/bento-orders/1400/800" alt="" class="mt-auto aspect-[16/9] w-full object-cover">
    </div>
    <div class="rounded-2xl bg-black/[0.03] p-6 dark:bg-white/5">
      <p class="my-0! text-4xl font-bold tracking-tight text-brand-600 dark:text-brand-50">2 min</p>
      <h3 class="mt-3! mb-0! text-base! font-semibold! leading-snug!">To set up</h3>
      <p class="mt-1! mb-0! text-sm leading-relaxed! text-black/70 dark:text-white/70">Import your products from a spreadsheet and you're done.</p>
    </div>
    <div class="rounded-2xl bg-brand-500 p-6 text-white">
      <h3 class="mt-0! mb-0! text-base! font-semibold! leading-snug! text-white!">Works offline</h3>
      <p class="mt-1! mb-0! text-sm leading-relaxed! text-white/80!">Keep taking orders when the shop wifi drops. It syncs when it's back.</p>
    </div>
    <div class="rounded-2xl bg-black/[0.03] p-6 dark:bg-white/5">
      <h3 class="mt-0! mb-0! text-base! font-semibold! leading-snug!">Stock that counts itself</h3>
      <p class="mt-1! mb-0! text-sm leading-relaxed! text-black/70 dark:text-white/70">Every sale updates what's left, and warns you before you run out.</p>
    </div>
    <div class="rounded-2xl bg-black/[0.03] p-6 md:col-span-2 dark:bg-white/5">
      <h3 class="mt-0! mb-0! text-base! font-semibold! leading-snug!">Reports you'll actually read</h3>
      <p class="mt-1! mb-0! text-sm leading-relaxed! text-black/70 dark:text-white/70">One page on Monday morning: what sold, what didn't, and what to reorder.</p>
    </div>
  </div>
</section>