Features — Expandable capability cards

Three native disclosure cards reveal a short explanation, included details and a capability link.

ReactHTML

1440 × 900

Component.tsx196 lines

export default function FeaturesExpandableCardGrid() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header>
          <p className="text-sm font-medium text-neutral-500">Eyebrow</p>
          <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl mt-3">
            Heading for the key benefits
          </h2>
          <p className="text-lg text-pretty text-neutral-600 mt-4 max-w-2xl">
            A short introduction that names the audience and the benefit.
          </p>
        </header>
        <div className="mt-10 grid items-start gap-6 md:grid-cols-3">
          <details open className="rounded-lg border border-neutral-200 p-6">
            <summary className="cursor-pointer text-lg font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              Main capability
            </summary>
            <div className="mt-5">
              <p className="text-sm text-neutral-600">
                Short explanation of the capability and the problem it resolves.
              </p>
              <ul role="list" className="space-y-3 mt-4">
                <li className="flex items-start gap-3 text-sm text-neutral-600">
                  <span
                    aria-hidden="true"
                    className="mt-0.5 shrink-0 text-neutral-900"
                  >
                    <svg
                      aria-hidden="true"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="size-4"
                    >
                      <path d="m5 12 4 4L19 6" />
                    </svg>
                  </span>
                  <span>Included detail</span>
                </li>
                <li className="flex items-start gap-3 text-sm text-neutral-600">
                  <span
                    aria-hidden="true"
                    className="mt-0.5 shrink-0 text-neutral-900"
                  >
                    <svg
                      aria-hidden="true"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="size-4"
                    >
                      <path d="m5 12 4 4L19 6" />
                    </svg>
                  </span>
                  <span>Supporting capability</span>
                </li>
              </ul>
              <a
                href="#"
                aria-label="Explore main capability"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-5 inline-block text-sm"
              >
                Explore capability
              </a>
            </div>
          </details>
          <details className="rounded-lg border border-neutral-200 p-6">
            <summary className="cursor-pointer text-lg font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              Supporting workflow
            </summary>
            <div className="mt-5">
              <p className="text-sm text-neutral-600">
                Short explanation of the capability and the problem it resolves.
              </p>
              <ul role="list" className="space-y-3 mt-4">
                <li className="flex items-start gap-3 text-sm text-neutral-600">
                  <span
                    aria-hidden="true"
                    className="mt-0.5 shrink-0 text-neutral-900"
                  >
                    <svg
                      aria-hidden="true"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="size-4"
                    >
                      <path d="m5 12 4 4L19 6" />
                    </svg>
                  </span>
                  <span>Included detail</span>
                </li>
                <li className="flex items-start gap-3 text-sm text-neutral-600">
                  <span
                    aria-hidden="true"
                    className="mt-0.5 shrink-0 text-neutral-900"
                  >
                    <svg
                      aria-hidden="true"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="size-4"
                    >
                      <path d="m5 12 4 4L19 6" />
                    </svg>
                  </span>
                  <span>Supporting capability</span>
                </li>
              </ul>
              <a
                href="#"
                aria-label="Explore supporting workflow"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-5 inline-block text-sm"
              >
                Explore capability
              </a>
            </div>
          </details>
          <details className="rounded-lg border border-neutral-200 p-6">
            <summary className="cursor-pointer text-lg font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              Useful detail
            </summary>
            <div className="mt-5">
              <p className="text-sm text-neutral-600">
                Short explanation of the capability and the problem it resolves.
              </p>
              <ul role="list" className="space-y-3 mt-4">
                <li className="flex items-start gap-3 text-sm text-neutral-600">
                  <span
                    aria-hidden="true"
                    className="mt-0.5 shrink-0 text-neutral-900"
                  >
                    <svg
                      aria-hidden="true"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="size-4"
                    >
                      <path d="m5 12 4 4L19 6" />
                    </svg>
                  </span>
                  <span>Included detail</span>
                </li>
                <li className="flex items-start gap-3 text-sm text-neutral-600">
                  <span
                    aria-hidden="true"
                    className="mt-0.5 shrink-0 text-neutral-900"
                  >
                    <svg
                      aria-hidden="true"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="size-4"
                    >
                      <path d="m5 12 4 4L19 6" />
                    </svg>
                  </span>
                  <span>Supporting capability</span>
                </li>
              </ul>
              <a
                href="#"
                aria-label="Explore useful detail"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 mt-5 inline-block text-sm"
              >
                Explore capability
              </a>
            </div>
          </details>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for progressive explanation of several independent capabilities. Pick a flat grid when every detail should be visible. Variations: start all cards closed, show two cards, or replace checks with a short ordered workflow.
Hierarchy: The heading introduces three capability summaries. Expanded cards reveal one short explanation, two details and a link. Limit titles to 4 words, explanations to 20 and details to 5.
Responsive: Cards stack below 768px and retain independent native open states. Their height grows naturally with content, without clipping other cards.
Layout: A max-w-6xl section places an items-start grid 40px below its introduction. Three equal columns appear at 768px with 24px gaps. Each disclosure card has a 1px border, 8px radius and 24px padding; expanded content follows after 20px.
States: Each summary toggles its native details card independently; the first card starts open. Summaries and destination links show a 2px keyboard outline. Links mute on hover; opening a card reveals its explanation and details without animation.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Eyebrow / Heading / Introduction                          │
│                                                          │
│┌─────────────────┐ ┌────────────────┐ ┌────────────────┐ │
││Main capability ^│ │Workflow v      │ │Useful detail v │ │
││Description      │ └────────────────┘ └────────────────┘ │
││Check Detail     │                                       │
││[Explore]        │                                       │
│└─────────────────┘                                       │
└──────────────────────────────────────────────────────────┘

View all

Features — Accordion beside media
Layout tags: asymmetric,list,media
Features — Alternating media rows
Layout tags: split,media,spacious
Features — Before and after panels
Layout tags: split,list,icons

Features — Expandable capability cards

Pattern notes

More in Features

Features — Accordion beside media

Features — Alternating media rows

Features — Before and after panels