Features — Capability scope matrix

A fixed-width semantic table compares capability scope across three working modes.

ReactHTML

1440 × 900

Component.tsx72 lines

export default function FeaturesCapabilityMatrix() {
  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">
            Capabilities by working mode
          </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>
        <table className="mt-10 w-full table-fixed border border-neutral-200 text-xs sm:text-sm">
          <caption className="mb-3 text-left text-sm text-neutral-500">
            A short comparison of capability scope by working mode.
          </caption>
          <thead className="bg-neutral-50">
            <tr className="border-b border-neutral-200">
              <th scope="col" className="p-3 text-left font-medium">
                Capability
              </th>
              <th scope="col" className="p-3 text-left font-medium">
                Personal
              </th>
              <th scope="col" className="p-3 text-left font-medium">
                Shared
              </th>
              <th scope="col" className="p-3 text-left font-medium">
                Managed
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b border-neutral-200">
              <th scope="row" className="p-3 text-left font-medium">
                Organize
              </th>
              <td className="p-3 text-neutral-600">Included</td>
              <td className="p-3 text-neutral-600">Included</td>
              <td className="p-3 text-neutral-600">Included</td>
            </tr>
            <tr className="border-b border-neutral-200">
              <th scope="row" className="p-3 text-left font-medium">
                Collaborate
              </th>
              <td className="p-3 text-neutral-600">Limited</td>
              <td className="p-3 text-neutral-600">Included</td>
              <td className="p-3 text-neutral-600">Included</td>
            </tr>
            <tr className="border-b border-neutral-200">
              <th scope="row" className="p-3 text-left font-medium">
                Automate
              </th>
              <td className="p-3 text-neutral-600">Basic</td>
              <td className="p-3 text-neutral-600">Extended</td>
              <td className="p-3 text-neutral-600">Extended</td>
            </tr>
            <tr className="border-b border-neutral-200">
              <th scope="row" className="p-3 text-left font-medium">
                Manage access
              </th>
              <td className="p-3 text-neutral-600">Individual</td>
              <td className="p-3 text-neutral-600">Team</td>
              <td className="p-3 text-neutral-600">Central</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use to explain how capability scope changes by working mode without introducing prices. Pick feature cards when modes do not need direct comparison. Variations: compare two modes, add a short eligibility note, or use feature stages as columns.
Hierarchy: Read the section heading, caption, column labels and row labels before the values. Keep column names under 2 words, capability labels under 3 and values under 2.
Responsive: The table remains within the container using table-fixed and wrapping cell text. Text is 12px below 640px and 14px above it. Cells retain 12px padding, including at 320px.
Layout: A max-w-6xl section places a full-width table 40px below the introduction. The table uses four equal fixed columns, 12px cell padding, 1px borders and a neutral-50 header. A caption labels the comparison above it.
States: The table is informational and has no interactive states. Semantic row and column headers associate each value with its capability and working mode.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Eyebrow / Heading / Introduction                          │
│                                                          │
│Capability         Personal       Shared        Managed   │
│Organize           Included       Included      Included  │
│Collaborate        Limited        Included      Included  │
│Automate           Basic          Extended      Extended  │
│Manage access      Individual     Team          Central   │
└──────────────────────────────────────────────────────────┘

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 — Capability scope matrix

Pattern notes

More in Features

Features — Accordion beside media

Features — Alternating media rows

Features — Before and after panels