10 CSS Feature Sections 04 / 10

CSS Animated Feature Cards Scroll Reveal

A clean light-background feature section with four alternating left-right rows that fade-in via IntersectionObserver on scroll.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="fs04">
  <div class="fs04__inner">
    <div class="fs04__head">
      <div class="fs04__kicker">How it works</div>
      <h2 class="fs04__h2">Fewer tools.<br><span>Better results.</span></h2>
      <p class="fs04__desc">Four core capabilities that replace a whole stack of point solutions your team is already paying for.</p>
    </div>

    <div class="fs04__list">
      <div class="fs04__item">
        <div class="fs04__item-content">
          <div class="fs04__item-num">CAPABILITY 01</div>
          <div class="fs04__item-title">Unified data pipeline with zero ETL</div>
          <div class="fs04__item-body">Stream events from any source directly into your warehouse or lakehouse. Schema inference, deduplication, and backfill handled automatically — no pipeline code required.</div>
          <div class="fs04__item-pills">
            <span class="fs04__pill">Firehose</span>
            <span class="fs04__pill">Auto-schema</span>
            <span class="fs04__pill">Backfill</span>
          </div>
        </div>
        <div class="fs04__item-visual fs04__vis--a">
          <div class="fs04__mockup">
            <div class="fs04__mock-bar fs04__mock-bar--accent"></div>
            <div class="fs04__mock-bar fs04__mock-bar--sm"></div>
            <div class="fs04__mock-chart">
              <div class="fs04__mock-bar2" style="height:40%"></div>
              <div class="fs04__mock-bar2" style="height:65%"></div>
              <div class="fs04__mock-bar2" style="height:50%"></div>
              <div class="fs04__mock-bar2" style="height:80%"></div>
              <div class="fs04__mock-bar2" style="height:60%"></div>
              <div class="fs04__mock-bar2" style="height:90%"></div>
              <div class="fs04__mock-bar2" style="height:70%"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="fs04__item">
        <div class="fs04__item-content">
          <div class="fs04__item-num">CAPABILITY 02</div>
          <div class="fs04__item-title">Semantic search across all your content</div>
          <div class="fs04__item-body">Vector embeddings generated for every document, ticket, and message. Natural language queries return results ranked by meaning, not just keywords — in under 100ms.</div>
          <div class="fs04__item-pills">
            <span class="fs04__pill">Vector DB</span>
            <span class="fs04__pill">RAG-ready</span>
            <span class="fs04__pill">&lt;100ms p99</span>
          </div>
        </div>
        <div class="fs04__item-visual fs04__vis--b">
          <div class="fs04__mockup">
            <div class="fs04__mock-bar fs04__mock-bar--accent" style="background: linear-gradient(90deg,#f7a840,#f7d040);width:80%"></div>
            <div class="fs04__mock-bar fs04__mock-bar--lg"></div>
            <div class="fs04__mock-grid">
              <div class="fs04__mock-block fs04__mock-block--c"></div>
              <div class="fs04__mock-block fs04__mock-block--c"></div>
              <div class="fs04__mock-block fs04__mock-block--c"></div>
              <div class="fs04__mock-block fs04__mock-block--c"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="fs04__item">
        <div class="fs04__item-content">
          <div class="fs04__item-num">CAPABILITY 03</div>
          <div class="fs04__item-title">Visual workflow builder, no code needed</div>
          <div class="fs04__item-body">Drag-and-drop automations that talk to your existing APIs. Built-in retry logic, dead-letter queues, and SLA alerts keep processes running without hand-holding.</div>
          <div class="fs04__item-pills">
            <span class="fs04__pill">No-code</span>
            <span class="fs04__pill">API webhooks</span>
            <span class="fs04__pill">SLA alerts</span>
          </div>
        </div>
        <div class="fs04__item-visual fs04__vis--c">
          <div class="fs04__mockup">
            <div class="fs04__mock-bar fs04__mock-bar--accent" style="background:linear-gradient(90deg,#52c97b,#a0eda0);width:50%"></div>
            <div class="fs04__mock-bar fs04__mock-bar--md"></div>
            <div class="fs04__mock-grid">
              <div class="fs04__mock-block fs04__mock-block--d"></div>
              <div class="fs04__mock-block fs04__mock-block--d"></div>
              <div class="fs04__mock-block" style="background:rgba(82,201,123,0.3)"></div>
              <div class="fs04__mock-block"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="fs04__item fs04__last">
        <div class="fs04__item-content">
          <div class="fs04__item-num">CAPABILITY 04</div>
          <div class="fs04__item-title">Role-aware access with fine-grained audit</div>
          <div class="fs04__item-body">Attribute-based permissions that follow your org chart. Every action logged to an immutable audit trail, queryable by time, user, resource, and outcome.</div>
          <div class="fs04__item-pills">
            <span class="fs04__pill">ABAC</span>
            <span class="fs04__pill">Immutable logs</span>
            <span class="fs04__pill">SOC 2 ready</span>
          </div>
        </div>
        <div class="fs04__item-visual fs04__vis--d">
          <div class="fs04__mockup">
            <div class="fs04__mock-bar fs04__mock-bar--accent" style="background:linear-gradient(90deg,#b86cf7,#e49cf7);width:70%"></div>
            <div class="fs04__mock-bar fs04__mock-bar--sm"></div>
            <div class="fs04__mock-grid">
              <div class="fs04__mock-block fs04__mock-block--b"></div>
              <div class="fs04__mock-block fs04__mock-block--b"></div>
              <div class="fs04__mock-block"></div>
              <div class="fs04__mock-block fs04__mock-block--b"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fs04 {
  --bg: #fafafa;
  --ink: #111;
  --muted: #777;
  --line: #e8e8e8;
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding: 100px 24px;
}

.fs04__inner { max-width: 1060px; margin: 0 auto; }

.fs04__head {
  text-align: center;
  margin-bottom: 80px;
}

.fs04__kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.fs04__h2 {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.07;
  margin-bottom: 18px;
}

.fs04__h2 span {
  position: relative;
  display: inline-block;
}

.fs04__h2 span::after {
  content: '';
  position: absolute;
  left: 0; bottom: 4px;
  width: 100%; height: 8px;
  background: #ffe045;
  z-index: -1;
  border-radius: 2px;
}

.fs04__desc {
  font-size: 17px;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Cards list — alternating layout */
.fs04__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fs04__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  padding: 64px 0;
  align-items: center;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}

.fs04__item.fs04--visible {
  opacity: 1;
  transform: none;
}

.fs04__item:nth-child(even) .fs04__item-visual { order: -1; }

.fs04__item-content { padding: 0 48px 0 0; }
.fs04__item:nth-child(even) .fs04__item-content { padding: 0 0 0 48px; }

.fs04__item-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 20px;
}

.fs04__item-title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.fs04__item-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 24px;
}

.fs04__item-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}

.fs04__pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 100px;
  background: #f0f0f0;
  color: #444;
}

/* Visual areas */
.fs04__item-visual {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs04__vis--a { background: linear-gradient(135deg, #e8f4ff 0%, #d5eaff 100%); }
.fs04__vis--b { background: linear-gradient(135deg, #fff4e0 0%, #ffe8cc 100%); }
.fs04__vis--c { background: linear-gradient(135deg, #f0ffe8 0%, #d8f5cc 100%); }
.fs04__vis--d { background: linear-gradient(135deg, #f8e8ff 0%, #eecefd 100%); }

/* Abstract UI mockup inside each */
.fs04__mockup {
  width: 85%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  padding: 20px;
}

.fs04__mock-bar {
  height: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: #eee;
}
.fs04__mock-bar--accent { background: linear-gradient(90deg, #6c8ef7, #9c6cf7); width: 60%; }
.fs04__mock-bar--sm { width: 40%; }
.fs04__mock-bar--md { width: 70%; }
.fs04__mock-bar--lg { width: 90%; }

.fs04__mock-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.fs04__mock-block {
  height: 48px;
  border-radius: 8px;
  background: #f5f5f5;
}
.fs04__mock-block--a { background: rgba(108,142,247,0.15); }
.fs04__mock-block--b { background: rgba(156,108,247,0.15); }
.fs04__mock-block--c { background: rgba(247,160,108,0.15); }
.fs04__mock-block--d { background: rgba(108,220,180,0.15); }

.fs04__mock-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 12px;
}
.fs04__mock-bar2 {
  flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, #6c8ef7, #c8d8ff);
}

.fs04__last { border-bottom: 1px solid var(--line); }

@media (max-width: 700px) {
  .fs04__item { grid-template-columns: 1fr; gap: 32px; }
  .fs04__item:nth-child(even) .fs04__item-visual { order: 0; }
  .fs04__item-content, .fs04__item:nth-child(even) .fs04__item-content { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fs04__item { opacity: 1; transform: none; transition: none; }
}
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.classList.add('fs04--visible');
      observer.unobserve(e.target);
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.fs04__item').forEach((el, i) => {
  el.style.transitionDelay = `${i * 0.08}s`;
  observer.observe(el);
});

More from 10 CSS Feature Sections

CSS Bento Grid Features LayoutCSS Feature Section Dark GlassmorphismCSS Feature Section with Code PreviewCSS Feature Comparison SectionCSS SaaS Features Section 2025CSS Feature Section with Floating MockupCSS Feature Section 3D Perspective CardsCSS Feature Section Timeline LayoutCSS Feature Section with Icon Grid
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →