22 CSS Feature Sections
11 / 22

All 22 in 22 CSS Feature Sections

  1. 01Feature Section with Tab Switcher Product Tour
  2. 02Alternating Image Left Right Feature Rows
  3. 03Feature Section with Live Metric Counter Chips
  4. 04Problem vs Solution Split Feature Section
  5. 05Feature Section with Autoplay Product Video
  6. 06Integration Logo Strip with Feature Callouts
  7. 07Expandable Accordion Feature Cards Section
  8. 08Three Tier Feature Parity Comparison Stack
  9. 09Security and Compliance Badges Feature Section
  10. 10Feature Section with API Code Response Split
  11. 11Feature Section with Customer Quote per Feature
  12. 12Sticky Scroll Storytelling Feature Section
  13. 13Feature Section with Icon Grid Layout
  14. 14Bento Grid Features Layout Asymmetric
  15. 15Dark Glassmorphism Feature Section
  16. 16Animated Feature Cards Scroll Reveal
  17. 17Feature Section with Code Preview Snippet
  18. 18Feature Comparison Section Included Matrix
  19. 19SaaS Modern Features Section Grid
  20. 20Feature Section 3D Perspective Cards
  21. 21Feature Section with Floating Phone Mockup
  22. 22Feature Section Timeline Layout Vertical
Pure CSSMIT licensed

Feature Section with Customer Quote per Feature

Four feature rows where each claim is answered immediately by a customer saying it worked — feature copy on one side, a pull-quote with avatar, name and role on the other. Built as real blockquote and cite markup on an editorial off-white ground with a serif display face, no cards and no shadows, so the quotes read as testimony rather than as widgets.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="fs-11" aria-labelledby="fs-11-heading">
  <div class="fs-11__hero" aria-hidden="true">
    <span class="fs-11__wordmark">Aperture</span>
    <span class="fs-11__heronav">Research operations, end to end</span>
  </div>

  <div class="fs-11__stage">
    <div class="fs-11__head">
      <p class="fs-11__eyebrow">Proof, per feature</p>
      <h2 class="fs-11__heading" id="fs-11-heading">Four claims, and the customers who tested them</h2>
    </div>

    <div class="fs-11__rows">
      <div class="fs-11__row">
        <article class="fs-11__feature">
          <h3 class="fs-11__ftitle">Recruit participants without a spreadsheet</h3>
          <p class="fs-11__fprose">Screeners, scheduling and incentives live in one record per participant. Consent expiry is tracked automatically, so a panel does not quietly go stale between studies.</p>
        </article>
        <blockquote class="fs-11__quote">
          <p class="fs-11__qtext">We cut recruiting from nine days to two, and I stopped being the bottleneck for every study.</p>
          <footer class="fs-11__attrib">
            <span class="fs-11__avatar" aria-hidden="true">AC</span>
            <span class="fs-11__who"><b>Alex Chen</b><span>Research Lead, Sable</span></span>
          </footer>
        </blockquote>
      </div>

      <div class="fs-11__row">
        <article class="fs-11__feature">
          <h3 class="fs-11__ftitle">Transcripts that are searchable across studies</h3>
          <p class="fs-11__fprose">Every session is transcribed, speaker-labelled and indexed with the study it belongs to. Search once and get the four interviews where anyone mentioned pricing.</p>
        </article>
        <blockquote class="fs-11__quote">
          <p class="fs-11__qtext">A designer found six months of pricing objections in an afternoon. That used to be a whole project.</p>
          <footer class="fs-11__attrib">
            <span class="fs-11__avatar" aria-hidden="true">PS</span>
            <span class="fs-11__who"><b>Priya Sharma</b><span>Head of Design, Meridian</span></span>
          </footer>
        </blockquote>
      </div>

      <div class="fs-11__row">
        <article class="fs-11__feature">
          <h3 class="fs-11__ftitle">Findings that ship as a link, not a deck</h3>
          <p class="fs-11__fprose">Clip a moment, attach it to a finding, and the finding keeps the evidence with it. Product managers get the timestamped clip instead of your summary of it.</p>
        </article>
        <blockquote class="fs-11__quote">
          <p class="fs-11__qtext">Nobody asks me to make slides any more. They watch the ninety-second clip and argue about the fix instead.</p>
          <footer class="fs-11__attrib">
            <span class="fs-11__avatar" aria-hidden="true">JL</span>
            <span class="fs-11__who"><b>Jordan Lee</b><span>Staff Researcher, Orbit</span></span>
          </footer>
        </blockquote>
      </div>

      <div class="fs-11__row">
        <article class="fs-11__feature">
          <h3 class="fs-11__ftitle">Governance the legal team signs off once</h3>
          <p class="fs-11__fprose">Regional data residency, per-study retention windows and revocable consent, with an export of everything a participant asked to be forgotten.</p>
        </article>
        <blockquote class="fs-11__quote">
          <p class="fs-11__qtext">Our privacy review took four days. The previous tool took a quarter and we still shipped with caveats.</p>
          <footer class="fs-11__attrib">
            <span class="fs-11__avatar" aria-hidden="true">SR</span>
            <span class="fs-11__who"><b>Sam Rivera</b><span>Ops Manager, Vale</span></span>
          </footer>
        </blockquote>
      </div>
    </div>
  </div>

  <div class="fs-11__below" aria-hidden="true">More customer stories · Plans</div>
</section>
.fs-11 {
  width: 100%;
  min-height: 100vh;
  display: block;
  box-sizing: border-box;
  --paper: #f7f6f2;
  --paper: oklch(0.972 0.005 95);
  --ink: #16171b;
  --ink: oklch(0.2 0.008 265);
  --muted: #55575f;
  --muted: oklch(0.46 0.011 265);
  --rule: #dedcd4;
  --rule: oklch(0.89 0.008 95);
  --accent: #33418c;
  --accent: oklch(0.4 0.13 272);
  --rowpad: clamp(28px, 4.5vw, 52px);
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.fs-11 *,
.fs-11 *::before,
.fs-11 *::after {
  box-sizing: border-box;
}

.fs-11__hero {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 24px;
  border-block-end: 1px solid var(--rule);
}

.fs-11__wordmark {
  font: 400 20px/1 var(--font-display);
  letter-spacing: -0.01em;
}

.fs-11__heronav {
  font-size: 12.5px;
  color: var(--muted);
}

.fs-11__stage {
  display: grid;
  place-items: start center;
  max-inline-size: 100%;
  padding: clamp(32px, 6vw, 72px) 20px;
}

.fs-11__head {
  inline-size: 100%;
  max-inline-size: 62rem;
  min-inline-size: 0;
  margin: 0 0 clamp(20px, 3vw, 34px);
}

.fs-11__eyebrow {
  margin: 0 0 14px;
  font: 700 10.5px/1 system-ui, sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

.fs-11__heading {
  margin: 0;
  max-inline-size: 26ch;
  font: 400 clamp(28px, 5.4vw, 46px)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.fs-11__rows {
  inline-size: 100%;
  max-inline-size: 62rem;
  min-inline-size: 0;
}

.fs-11__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  padding-block: var(--rowpad);
  border-block-start: 1px solid var(--rule);
}

.fs-11__row:last-child {
  border-block-end: 1px solid var(--rule);
}

.fs-11__feature {
  min-inline-size: 0;
}

.fs-11__ftitle {
  margin: 0 0 12px;
  font: 400 clamp(20px, 2.8vw, 27px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.fs-11__fprose {
  margin: 0;
  max-inline-size: 44ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  text-wrap: pretty;
}

.fs-11__quote {
  position: relative;
  margin: 0;
  min-inline-size: 0;
  padding-inline-start: 30px;
}

.fs-11__quote::before {
  content: "\201C";
  position: absolute;
  inset-inline-start: -6px;
  inset-block-start: -14px;
  font: 400 62px/1 var(--font-display);
  color: color-mix(in oklab, var(--accent) 35%, var(--paper));
}

.fs-11__qtext {
  margin: 0 0 16px;
  font: 400 clamp(16px, 2.2vw, 20px)/1.55 var(--font-display);
  font-style: italic;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.fs-11__attrib {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
}

.fs-11__avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  font: 700 13px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent);
}

.fs-11__who {
  display: grid;
  gap: 1px;
  min-inline-size: 0;
}

.fs-11__who b {
  font-size: 13.5px;
  font-weight: 650;
}

.fs-11__who span {
  font-size: 12.5px;
  color: var(--muted);
}

.fs-11__below {
  padding: 18px 24px;
  border-block-start: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--muted);
}

@media (max-width: 780px) {
  .fs-11__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-color-scheme: dark) {
  .fs-11 {
    --paper: #14151a;
    --ink: #f1f1ee;
    --muted: #a2a3ac;
    --rule: #282a31;
    --accent: #a5b0ef;
  }
}

[data-theme="dark"] .fs-11 {
  --paper: #14151a;
  --ink: #f1f1ee;
  --muted: #a2a3ac;
  --rule: #282a31;
  --accent: #a5b0ef;
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Feature Section from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Feature Section with Customer Quote per Feature
Source: https://codefronts.com/layouts/css-feature-sections/feature-section-with-customer-quote-per-feature/

Four feature rows where each claim is answered immediately by a customer saying it worked — feature copy on one side, a pull-quote with avatar, name and role on the other. Built as real blockquote and cite markup on an editorial off-white ground with a serif display face, no cards and no shadows, so the quotes read as testimony rather than as widgets.
## HTML
```html
<section class="fs-11" aria-labelledby="fs-11-heading">
  <div class="fs-11__hero" aria-hidden="true">
    <span class="fs-11__wordmark">Aperture</span>
    <span class="fs-11__heronav">Research operations, end to end</span>
  </div>

  <div class="fs-11__stage">
    <div class="fs-11__head">
      <p class="fs-11__eyebrow">Proof, per feature</p>
      <h2 class="fs-11__heading" id="fs-11-heading">Four claims, and the customers who tested them</h2>
    </div>

    <div class="fs-11__rows">
      <div class="fs-11__row">
        <article class="fs-11__feature">
          <h3 class="fs-11__ftitle">Recruit participants without a spreadsheet</h3>
          <p class="fs-11__fprose">Screeners, scheduling and incentives live in one record per participant. Consent expiry is tracked automatically, so a panel does not quietly go stale between studies.</p>
        </article>
        <blockquote class="fs-11__quote">
          <p class="fs-11__qtext">We cut recruiting from nine days to two, and I stopped being the bottleneck for every study.</p>
          <footer class="fs-11__attrib">
            <span class="fs-11__avatar" aria-hidden="true">AC</span>
            <span class="fs-11__who"><b>Alex Chen</b><span>Research Lead, Sable</span></span>
          </footer>
        </blockquote>
      </div>

      <div class="fs-11__row">
        <article class="fs-11__feature">
          <h3 class="fs-11__ftitle">Transcripts that are searchable across studies</h3>
          <p class="fs-11__fprose">Every session is transcribed, speaker-labelled and indexed with the study it belongs to. Search once and get the four interviews where anyone mentioned pricing.</p>
        </article>
        <blockquote class="fs-11__quote">
          <p class="fs-11__qtext">A designer found six months of pricing objections in an afternoon. That used to be a whole project.</p>
          <footer class="fs-11__attrib">
            <span class="fs-11__avatar" aria-hidden="true">PS</span>
            <span class="fs-11__who"><b>Priya Sharma</b><span>Head of Design, Meridian</span></span>
          </footer>
        </blockquote>
      </div>

      <div class="fs-11__row">
        <article class="fs-11__feature">
          <h3 class="fs-11__ftitle">Findings that ship as a link, not a deck</h3>
          <p class="fs-11__fprose">Clip a moment, attach it to a finding, and the finding keeps the evidence with it. Product managers get the timestamped clip instead of your summary of it.</p>
        </article>
        <blockquote class="fs-11__quote">
          <p class="fs-11__qtext">Nobody asks me to make slides any more. They watch the ninety-second clip and argue about the fix instead.</p>
          <footer class="fs-11__attrib">
            <span class="fs-11__avatar" aria-hidden="true">JL</span>
            <span class="fs-11__who"><b>Jordan Lee</b><span>Staff Researcher, Orbit</span></span>
          </footer>
        </blockquote>
      </div>

      <div class="fs-11__row">
        <article class="fs-11__feature">
          <h3 class="fs-11__ftitle">Governance the legal team signs off once</h3>
          <p class="fs-11__fprose">Regional data residency, per-study retention windows and revocable consent, with an export of everything a participant asked to be forgotten.</p>
        </article>
        <blockquote class="fs-11__quote">
          <p class="fs-11__qtext">Our privacy review took four days. The previous tool took a quarter and we still shipped with caveats.</p>
          <footer class="fs-11__attrib">
            <span class="fs-11__avatar" aria-hidden="true">SR</span>
            <span class="fs-11__who"><b>Sam Rivera</b><span>Ops Manager, Vale</span></span>
          </footer>
        </blockquote>
      </div>
    </div>
  </div>

  <div class="fs-11__below" aria-hidden="true">More customer stories · Plans</div>
</section>
```
## CSS
```css
.fs-11 {
  width: 100%;
  min-height: 100vh;
  display: block;
  box-sizing: border-box;
  --paper: #f7f6f2;
  --paper: oklch(0.972 0.005 95);
  --ink: #16171b;
  --ink: oklch(0.2 0.008 265);
  --muted: #55575f;
  --muted: oklch(0.46 0.011 265);
  --rule: #dedcd4;
  --rule: oklch(0.89 0.008 95);
  --accent: #33418c;
  --accent: oklch(0.4 0.13 272);
  --rowpad: clamp(28px, 4.5vw, 52px);
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.fs-11 *,
.fs-11 *::before,
.fs-11 *::after {
  box-sizing: border-box;
}

.fs-11__hero {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 24px;
  border-block-end: 1px solid var(--rule);
}

.fs-11__wordmark {
  font: 400 20px/1 var(--font-display);
  letter-spacing: -0.01em;
}

.fs-11__heronav {
  font-size: 12.5px;
  color: var(--muted);
}

.fs-11__stage {
  display: grid;
  place-items: start center;
  max-inline-size: 100%;
  padding: clamp(32px, 6vw, 72px) 20px;
}

.fs-11__head {
  inline-size: 100%;
  max-inline-size: 62rem;
  min-inline-size: 0;
  margin: 0 0 clamp(20px, 3vw, 34px);
}

.fs-11__eyebrow {
  margin: 0 0 14px;
  font: 700 10.5px/1 system-ui, sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}

.fs-11__heading {
  margin: 0;
  max-inline-size: 26ch;
  font: 400 clamp(28px, 5.4vw, 46px)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.fs-11__rows {
  inline-size: 100%;
  max-inline-size: 62rem;
  min-inline-size: 0;
}

.fs-11__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  padding-block: var(--rowpad);
  border-block-start: 1px solid var(--rule);
}

.fs-11__row:last-child {
  border-block-end: 1px solid var(--rule);
}

.fs-11__feature {
  min-inline-size: 0;
}

.fs-11__ftitle {
  margin: 0 0 12px;
  font: 400 clamp(20px, 2.8vw, 27px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.fs-11__fprose {
  margin: 0;
  max-inline-size: 44ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  text-wrap: pretty;
}

.fs-11__quote {
  position: relative;
  margin: 0;
  min-inline-size: 0;
  padding-inline-start: 30px;
}

.fs-11__quote::before {
  content: "\201C";
  position: absolute;
  inset-inline-start: -6px;
  inset-block-start: -14px;
  font: 400 62px/1 var(--font-display);
  color: color-mix(in oklab, var(--accent) 35%, var(--paper));
}

.fs-11__qtext {
  margin: 0 0 16px;
  font: 400 clamp(16px, 2.2vw, 20px)/1.55 var(--font-display);
  font-style: italic;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.fs-11__attrib {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
}

.fs-11__avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  font: 700 13px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent);
}

.fs-11__who {
  display: grid;
  gap: 1px;
  min-inline-size: 0;
}

.fs-11__who b {
  font-size: 13.5px;
  font-weight: 650;
}

.fs-11__who span {
  font-size: 12.5px;
  color: var(--muted);
}

.fs-11__below {
  padding: 18px 24px;
  border-block-start: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--muted);
}

@media (max-width: 780px) {
  .fs-11__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-color-scheme: dark) {
  .fs-11 {
    --paper: #14151a;
    --ink: #f1f1ee;
    --muted: #a2a3ac;
    --rule: #282a31;
    --accent: #a5b0ef;
  }
}

[data-theme="dark"] .fs-11 {
  --paper: #14151a;
  --ink: #f1f1ee;
  --muted: #a2a3ac;
  --rule: #282a31;
  --accent: #a5b0ef;
}
```

How this works

Proof has to sit next to the claim. A testimonial carousel three sections below is generic social proof; the same sentence placed beside the feature it validates is evidence. Structurally that means each row is a two-column grid holding a feature <article> and a <blockquote>, aligned at the top so the reader's eye moves across, not down. The pairing is the pattern — break it and you have two lists again.

Use the elements the browser already has. <blockquote> with a <footer> containing <cite> gives assistive tech the quote boundaries and the attribution for free, and it is what a copy-paste into a CMS will preserve. A div with a quotation mark in the text does neither. Keep the attribution outside the quoted text itself — a name inside the <blockquote> reads as part of what the person said.

Avatars can be typography. Four small photographs are four requests, four layout shifts and four things to art-direct. Initials in a circle — display: grid; place-items: center with a tinted background derived from the accent — carry the same 'a real person said this' signal at a fraction of the cost, and they never load late. When you do have photographs, the same box takes an <img> with no other change.

The trap is a quote that says nothing. 'Great product, highly recommend' actively weakens the feature above it. A usable quote names the outcome and a number — hours saved, incidents avoided, days shortened — and reads like a person, not marketing. If the real quote is thin, cut the quote rather than the feature; an unproven claim beats a hollow endorsement.

Make it yours

  • Swap the monogram for a photo by replacing .fs-11__avatar contents with an <img> at the same size.
  • Change --accent to retint the quote mark, the avatars and the rules.
  • Reverse a row by moving the blockquote before the article in the DOM for a varied rhythm.
  • Set --rowpad to tighten the vertical rhythm between rows.
  • Drop the oversized quote glyph by removing the ::before for a plainer editorial look.
  • Add a company logotype under the cite line if your quotes come with brand permission.

Gotchas — read before shipping

  • Putting the person's name inside the <blockquote> makes assistive tech read the attribution as part of the quotation — keep it in the footer.
  • A quote with no specific outcome weakens the feature it sits beside; cut it rather than ship filler praise.
  • Photo avatars without explicit width, height and aspect-ratio cause a visible shift on slow connections.
  • <cite> is for the work or source, not the speaker's name — some validators and style guides will flag it; a plain span for the name is safer if that matters to you.
  • Long role strings in a narrow column push the layout unless the attribution row has min-inline-size: 0 and wraps.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), color-mix(), text-wrap as this demo is written. The core technique itself goes back further — Chrome 111+.

oklch() dictates the floor (Chromium 111, Safari 15.4, Firefox 113) with an sRGB hex before each value. text-wrap: balance on the headings is progressive enhancement only (Chromium 114, Safari 17.5, Firefox 121) — older engines wrap naturally with no visual regression and no layout shift.

Techniques used in this demo

text-wrap: prettyMDN ↗grid-templateMDN ↗color-mix()MDN ↗clamp()MDN ↗place-items / place-contentMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →