22 CSS Feature Sections

Three elements and no JavaScript. First, one visually-hidden radio input per tab, all sharing the same name attribute so the browser enforces single-selection natively. Second, a <label for> per tab styled as the visible tab button — clicking the label checks its radio, and keyboard users get native arrow-key navigation between radios in the same group for free. Third, the :checked ~ general sibling combinator (or :has() on a wrapper) to show the matching panel: .fs-01__radio:nth-of-type(2):checked ~ .fs-01__panels .fs-01__panel:nth-child(2) { display: block }. Demo 01 ships this pattern with a 5-tab product tour. Two accessibility details most tutorials miss: put role="tablist" on the label wrapper and role="tab" plus aria-controls on each label so screen readers announce the tab semantics the radio group does not convey on its own, and give every label a :focus-visible ring at 2px minimum with 3:1 contrast per WCAG 2.4.13 — the radio itself is visually hidden, so the focus indicator has to live on the label. Baseline floor for this pattern is Chromium 105 / Safari 15.4 / Firefox 121, set by :has(); browsers below that show the first panel only, which is a legible degradation rather than a break.

Two approaches, both avoiding window.addEventListener('scroll', …) which taxes INP on mid-tier mobile. The pure-CSS route registers a typed custom property with @property --n { syntax: '<integer>'; initial-value: 0; inherits: false }, animates it inside a @keyframes block, and renders the value through counter-reset: num var(--n) plus content: counter(num) on a pseudo-element. Bind the animation to animation-timeline: view() so it advances as the element enters the viewport rather than on a wall clock. The JavaScript route uses one IntersectionObserver to detect entry and a short requestAnimationFrame loop to tick the number — under 25 lines, zero dependencies, and the only option when you need locale-aware formatting like 2.4M or 47ms that CSS counters cannot produce. Demo 03 ships the observer version for exactly that reason. Both routes need font-variant-numeric: tabular-nums on the number so digits occupy equal width and the layout does not jitter as the count climbs. The animation-timeline: view() floor is Chromium 115 / Safari 18 / Firefox 130; gate it with @supports (animation-timeline: view()) and show the settled end value underneath so older engines see the final number immediately rather than a stuck zero.

Native <details> with the name attribute — no JavaScript, no ARIA wiring, no focus management to write. Giving several <details> elements the same name makes the browser treat them as a mutually exclusive group, closing the previously open one when a new one opens, exactly like radio buttons. The <summary> element is focusable by default, responds to Enter and Space, and is announced as a disclosure by every major screen reader, which is why hand-rolled <div> accordions with click handlers almost always ship worse accessibility than the native element. Demo 07 uses this for a five-card feature stack. The support floor is Chromium 120 / Safari 17.4 / Firefox 130; on older engines the name attribute is simply ignored, so every card can be open at once — still fully functional, just not exclusive. Two production notes: <summary> defaults to display: list-item, so a Tailwind flex class on it silently loses to the user-agent style and you need an explicit display: flex override; and to animate the open and close transition you need interpolate-size: allow-keywords (Chromium 129+, Firefox 129+, not yet in Safari) or the older grid-template-rows: 0fr to 1fr trick, which works everywhere.

A pricing table answers what does it cost; a feature matrix answers what do I actually get. Put the matrix above the pricing block and strip every currency figure out of it, so a buyer evaluating capability is not forced to price-anchor first. Structurally it is a real <table> with a <caption>, <th scope="col"> on the tier headers, and <th scope="row"> on the feature names — that scope wiring is what lets a screen reader announce Pro, SSO with SCIM, included when the user lands on a cell, and it is the single most-skipped detail in comparison-table tutorials. Never communicate inclusion with a green dot and a grey dot alone; that fails WCAG 1.4.1 for colour-blind users. Pair the colour with a real glyph — a check character for included, an em dash for excluded — and add <span class="sr-only">Included</span> so the announcement is unambiguous. Demos 08 and 18 ship the two variants: 08 is a three-column tier stack for a marketing page, 18 is a dense row-per-feature matrix for a comparison page. On narrow viewports the matrix should transpose to one card per tier rather than horizontally scrolling — a table that scrolls sideways on a phone is a table nobody reads.

For enterprise SaaS the badges that move deals are SOC 2 Type II, ISO 27001, GDPR, HIPAA where health data is in scope, PCI DSS where card data is in scope, and FedRAMP for public-sector buyers. Demo 09 renders all six in a grid with three supporting security callouts beneath — end-to-end encryption, SSO with SAML and SCIM, and immutable audit logs — because a badge without a mechanism reads as decoration to a security reviewer. Markup matters here more than styling: each badge is a real element with a text label, never an image-only sprite, so it survives a text-only crawl and is announced correctly. If you link a badge to an attestation report, make the link text carry the certification name rather than the word here. Two correctness notes that protect you: never display a certification you have not completed, including in-progress ones, without the qualifier stated in the same visual block — misrepresenting SOC 2 status is a material misstatement in a sales context; and if HIPAA is claimed, the page should link to your Business Associate Agreement, because covered entities will ask for it during procurement anyway.

The layout is a two-column grid where the right column contains a single element with position: sticky; top: 20vh, and the left column contains a taller stack of feature callouts that scroll past it. That alone produces the pinned-panel effect with zero script. To swap the pinned mockup as each callout reaches focus, bind each callout to animation-timeline: view() with an animation-range that brackets the middle of the viewport, and use the animation to toggle the opacity of a matching layer inside the sticky panel. Demo 12 ships this. The failure mode that costs the most debugging time is sticky silently dying because an ancestor sets overflow: hidden — any overflow value other than visible creates a scroll container that becomes the sticky element's containing block, so it pins to that box instead of the viewport. Promote the ancestor to overflow: clip where you need clipping without a scroll container. The floor is Chromium 115 / Safari 18 / Firefox 130 from animation-timeline: view(); below that, gate with @supports and show every callout in its settled state with the first mockup visible, which reads as a normal static feature section rather than a broken one.

Six collections sit adjacent and each owns a distinct region of a marketing page. This collection covers the mid-page feature block — the region that pitches three to six capabilities after the hero and before pricing. css-hero-sections (31 demos) owns the topmost region: logo, headline, primary CTA, supporting media. css-bento-grid-layouts (6 demos) owns bento as a standalone layout primitive; demo 14 here is a bento only in the specific sense of a feature-labelled asymmetric grid. css-pricing-sections (21 demos) and css-pricing-tables (21 demos) own tier grids with currency figures; demos 08 and 18 here deliberately carry no prices, only feature parity. css-full-page-sections (12 demos) owns full-viewport scroll-snap panels with sticky pinning across the whole page; every demo here is bounded inside its own section. css-diagonal-sections (20 demos) owns angled section dividers; edges stay straight here. If you need the top of the page use hero, if you need prices use pricing, if you need the block that explains what the product does, this is the collection.

Every demo is framework-agnostic HTML and CSS with at most twenty lines of vanilla JavaScript, scoped under a unique .fs-NN root so nothing leaks into a host page. Tailwind v3 users lift the rules into an @layer components block; Tailwind v4 declares the same tokens — --font-display, --surface, --ink, --accent — inside @theme so utilities and demo CSS share one source. React and Next.js consume each demo as a component; the pure-CSS demos need no state at all, and for the four that use script the handler moves into a useEffect with a cleanup that disconnects the observer or removes the listener. Vue 3 wraps the markup in a template with a scoped style block and moves the script into onMounted and onUnmounted. Svelte uses a style block plus onMount and onDestroy. Astro renders the pure-CSS demos as static HTML with no island at all, and hydrates only the four script-bearing demos with client:visible. SolidJS, Qwik, and Angular map to the same lifecycle pairs. The scroll-driven demos are the most portable of the set because the animation lives entirely in CSS and never depends on hydration timing.