Content

Grids of things: articles or projects, people, photos.

Card gridTeamPhoto gallery

Card grid

sections/content/card-grid.html

Image, title, a line of text and a link, three across on a desktop. For posts, projects or services.

<section class="mx-auto max-w-6xl px-6 py-16 sm:py-24">
  <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
    <h2 class="mt-0! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">From the journal</h2>
    <a href="#" class="inline-flex items-center gap-1 text-sm font-semibold text-brand-600! no-underline! hover:underline! dark:text-brand-50!">All posts<span aria-hidden="true">&rarr;</span></a>
  </div>
  <div class="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
    <a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-black/10 no-underline! transition hover:border-brand-500 dark:border-white/10">
      <img src="https://picsum.photos/seed/card-hedge/1200/800" alt="" class="aspect-[3/2] w-full object-cover">
      <div class="flex flex-1 flex-col p-6">
        <p class="my-0! text-xs font-semibold text-brand-600 dark:text-brand-50">August 20, 2026</p>
        <h3 class="mt-2! mb-0! text-lg! font-semibold! leading-snug! text-black! group-hover:text-brand-600! dark:text-white! dark:group-hover:text-brand-500!">The hedge we shouldn't have touched</h3>
        <p class="mt-2! mb-0! text-sm leading-relaxed! text-black/70! dark:text-white/70!">A client asked us to tidy up a decade-old hedge. We should have asked more questions first.</p>
      </div>
    </a>
    <a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-black/10 no-underline! transition hover:border-brand-500 dark:border-white/10">
      <img src="https://picsum.photos/seed/card-quote/1200/800" alt="" class="aspect-[3/2] w-full object-cover">
      <div class="flex flex-1 flex-col p-6">
        <p class="my-0! text-xs font-semibold text-brand-600 dark:text-brand-50">July 14, 2026</p>
        <h3 class="mt-2! mb-0! text-lg! font-semibold! leading-snug! text-black! group-hover:text-brand-600! dark:text-white! dark:group-hover:text-brand-500!">Three things we check before every quote</h3>
        <p class="mt-2! mb-0! text-sm leading-relaxed! text-black/70! dark:text-white/70!">A quote that changes once we show up is a guess with a number attached.</p>
      </div>
    </a>
    <a href="#" class="group flex flex-col overflow-hidden rounded-2xl border border-black/10 no-underline! transition hover:border-brand-500 dark:border-white/10">
      <img src="https://picsum.photos/seed/card-start/1200/800" alt="" class="aspect-[3/2] w-full object-cover">
      <div class="flex flex-1 flex-col p-6">
        <p class="my-0! text-xs font-semibold text-brand-600 dark:text-brand-50">June 2, 2026</p>
        <h3 class="mt-2! mb-0! text-lg! font-semibold! leading-snug! text-black! group-hover:text-brand-600! dark:text-white! dark:group-hover:text-brand-500!">Why we started</h3>
        <p class="mt-2! mb-0! text-sm leading-relaxed! text-black/70! dark:text-white/70!">The one thing we promised ourselves we'd do differently.</p>
      </div>
    </a>
  </div>
</section>

Team

sections/content/team.html

Names and roles with initials avatars. Swap an avatar for a photo when you have one.

<section class="mx-auto max-w-6xl px-6 py-16 sm:py-24">
  <div class="max-w-2xl">
    <h2 class="mt-0! mb-0! border-t-0! pt-0! text-3xl! font-bold! leading-tight! tracking-tight sm:text-4xl!">The people who show up</h2>
    <p class="mt-4! mb-0! text-lg leading-relaxed! text-black/70 dark:text-white/70">A small crew, on purpose. You'll meet all of us eventually.</p>
  </div>
  <ul class="mt-12! mb-0! grid list-none! grid-cols-2 gap-x-6 gap-y-10 pl-0! sm:grid-cols-3 lg:grid-cols-4">
    <li class="mt-0!">
      <span class="flex aspect-square w-full items-center justify-center rounded-2xl bg-brand-50 text-3xl font-bold text-brand-600 dark:bg-brand-500/15 dark:text-brand-50">SO</span>
      <p class="mt-4! mb-0! font-semibold">Sam Okafor</p>
      <p class="my-0! text-sm text-black/60 dark:text-white/60">Founder, garden design</p>
    </li>
    <li class="mt-0!">
      <span class="flex aspect-square w-full items-center justify-center rounded-2xl bg-brand-50 text-3xl font-bold text-brand-600 dark:bg-brand-500/15 dark:text-brand-50">PS</span>
      <p class="mt-4! mb-0! font-semibold">Priya Shah</p>
      <p class="my-0! text-sm text-black/60 dark:text-white/60">Quotes and scheduling</p>
    </li>
    <li class="mt-0!">
      <span class="flex aspect-square w-full items-center justify-center rounded-2xl bg-brand-50 text-3xl font-bold text-brand-600 dark:bg-brand-500/15 dark:text-brand-50">JL</span>
      <p class="mt-4! mb-0! font-semibold">Jonas Lind</p>
      <p class="my-0! text-sm text-black/60 dark:text-white/60">Lawn care lead</p>
    </li>
    <li class="mt-0!">
      <span class="flex aspect-square w-full items-center justify-center rounded-2xl bg-brand-50 text-3xl font-bold text-brand-600 dark:bg-brand-500/15 dark:text-brand-50">EM</span>
      <p class="mt-4! mb-0! font-semibold">Elena Moreau</p>
      <p class="my-0! text-sm text-black/60 dark:text-white/60">Planting and pruning</p>
    </li>
  </ul>
</section>