Filtered View

Data restricted by criteria.

html

<section class="fv" style="--accent:#BFD9F2;" aria-label="Projects" data-filter="active">
  <h3 class="fv__heading">Projects</h3>
  <div class="fv__bar" role="group" aria-label="Status">
    <button type="button" class="fv__chip fv__chip--all">All</button>
    <button type="button" class="fv__chip fv__chip--active">Active</button>
    <button type="button" class="fv__chip fv__chip--archived">Archived</button>
  </div>
  <p class="fv__status" role="status">Showing active — 2 results</p>
  <ul class="fv__list">
    <li>Homepage redesign</li>
    <li>Q3 roadmap</li>
    <li>Support backlog</li>
  </ul>
</section>
<style>
.fv { font: 13.5px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 320px; width: 320px; padding: 16px; border-radius: 12px; box-sizing: border-box; }
.fv__heading { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.fv__bar { display: flex; gap: 6px; margin-bottom: 8px; }
.fv__chip { background: #fff; border: 1px solid #24143020; border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.fv__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fv[data-filter="all"] .fv__chip--all,
.fv[data-filter="active"] .fv__chip--active,
.fv[data-filter="archived"] .fv__chip--archived { background: var(--accent); border-color: transparent; }
.fv__status { margin: 0 0 8px; font-size: 12px; color: #241430a0; }
.fv__list { list-style: none; margin: 0; padding: 0; }
.fv__list li { padding: 8px 10px; background: #fff; border-radius: 8px; margin-bottom: 6px; }
.fv__list li:last-child { margin-bottom: 0; }
</style>

tailwind

<section class="fv-tw font-sans text-[13.5px] text-[#241430] bg-[#FAF7F2] max-w-[320px] w-[320px] p-4 rounded-xl box-border" style="--accent:#BFD9F2" aria-label="Projects" data-filter="active">
  <h3 class="m-0 mb-2.5 text-[15px] font-bold">Projects</h3>
  <div role="group" aria-label="Status" class="flex gap-1.5 mb-2">
    <button type="button" class="fv-tw__chip fv-tw__chip--all bg-white border border-[#24143020] rounded-full py-1 px-3 font-semibold cursor-pointer">All</button>
    <button type="button" class="fv-tw__chip fv-tw__chip--active bg-white border border-[#24143020] rounded-full py-1 px-3 font-semibold cursor-pointer">Active</button>
    <button type="button" class="fv-tw__chip fv-tw__chip--archived bg-white border border-[#24143020] rounded-full py-1 px-3 font-semibold cursor-pointer">Archived</button>
  </div>
  <p role="status" class="m-0 mb-2 text-xs text-[#241430a0]">Showing active — 2 results</p>
  <ul class="list-none m-0 p-0">
    <li class="py-2 px-2.5 bg-white rounded-lg mb-1.5">Homepage redesign</li>
    <li class="py-2 px-2.5 bg-white rounded-lg mb-1.5">Q3 roadmap</li>
    <li class="py-2 px-2.5 bg-white rounded-lg">Support backlog</li>
  </ul>
</section>
<style>
.fv-tw[data-filter="all"] .fv-tw__chip--all,
.fv-tw[data-filter="active"] .fv-tw__chip--active,
.fv-tw[data-filter="archived"] .fv-tw__chip--archived { background: #BFD9F2; border-color: transparent; }
</style>

react

export function FilteredView({
  heading = "Projects",
  filterLabel = "Status",
  activeFilter = "active",
  accent = "#BFD9F2",
  resultCount = 2,
}) {
  const chip = (value, label) => (
    <button type="button" key={value} style={{ background: activeFilter === value ? accent : "#fff", borderColor: activeFilter === value ? "transparent" : "#24143020", border: "1px solid", borderRadius: 999, padding: "5px 12px", font: "inherit", fontWeight: 600, cursor: "pointer" }}>{label}</button>
  );
  return (
    <section aria-label={heading} style={{ fontFamily: "system-ui, sans-serif", fontSize: 13.5, color: "#241430", background: "#FAF7F2", maxWidth: 320, width: 320, padding: 16, borderRadius: 12, boxSizing: "border-box" }}>
      <h3 style={{ margin: "0 0 10px", fontSize: 15, fontWeight: 700 }}>{heading}</h3>
      <div role="group" aria-label={filterLabel} style={{ display: "flex", gap: 6, marginBottom: 8 }}>
        {chip("all", "All")}
        {chip("active", "Active")}
        {chip("archived", "Archived")}
      </div>
      <p role="status" style={{ margin: "0 0 8px", fontSize: 12, color: "#241430a0" }}>Showing {activeFilter} — {resultCount} results</p>
      <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
        <li style={{ padding: "8px 10px", background: "#fff", borderRadius: 8, marginBottom: 6 }}>Homepage redesign</li>
        <li style={{ padding: "8px 10px", background: "#fff", borderRadius: 8, marginBottom: 6 }}>Q3 roadmap</li>
        <li style={{ padding: "8px 10px", background: "#fff", borderRadius: 8 }}>Support backlog</li>
      </ul>
    </section>
  );
}