Feature List

vel-src: components/feature-list.css

A responsive grid of feature cards for showcasing product highlights. Each card has an icon container with color variants, a heading, and a description. Cards lift on hover with a purple border glow.

Class	Properties
vel-features	section wrapper — padding: 16 (vertical) and 6 (horizontal)
vel-features-grid	CSS grid with auto-fill columns, minmax(280px, 1fr), gap: 6
vel-feature-card	flex column, surface-2 bg, border, border-radius: 2xl, hover: translateY(-4px) + shadow-xl + primary border
vel-feature-icon	3rem square icon container, border-radius: xl, default primary bg tint
vel-feature-icon-primary	primary bg tint, primary-400 icon color
vel-feature-icon-success	green bg tint, success-400 icon color
vel-feature-icon-info	cyan bg tint, info-400 icon color
vel-feature-icon-danger	red bg tint, danger-400 icon color
vel-feature-icon-warning	amber bg tint, warning-400 icon color
vel-feature-title	lg font-size, semibold, color: text, margin: 0, snug line-height
vel-feature-text	base font-size, color: muted, relaxed line-height, margin: 0

Examples

Three feature cards with different icon colors

Lightning Fast

Utility-first architecture keeps CSS bundles small. Only ship what you actually use.

Fully Accessible

Components are built with semantic HTML and ARIA patterns baked in from day one.

Design Tokens

Every value is a CSS custom property. Override the entire system with a single token swap.

example.html

<div style="padding:24px;background:#060b17;font-family:system-ui,sans-serif;border-radius:12px;">
  <div class="vel-features-grid" style="padding:0;">
    <!-- Feature 1 -->
    <div class="vel-feature-card">
      <div class="vel-feature-icon vel-feature-icon-primary">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:1.5rem;height:1.5rem;">
          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
        </svg>
      </div>
      <h3 class="vel-feature-title">Lightning Fast</h3>
      <p class="vel-feature-text">Utility-first architecture keeps CSS bundles small. Only ship what you actually use.</p>
    </div>
    <!-- Feature 2 -->
    <div class="vel-feature-card">
      <div class="vel-feature-icon vel-feature-icon-success">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:1.5rem;height:1.5rem;">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      </div>
      <h3 class="vel-feature-title">Fully Accessible</h3>
      <p class="vel-feature-text">Components are built with semantic HTML and ARIA patterns baked in from day one.</p>
    </div>
    <!-- Feature 3 -->
    <div class="vel-feature-card">
      <div class="vel-feature-icon vel-feature-icon-info">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:1.5rem;height:1.5rem;">
          <circle cx="12" cy="12" r="10"/>
          <line x1="2" y1="12" x2="22" y2="12"/>
          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
        </svg>
      </div>
      <h3 class="vel-feature-title">Design Tokens</h3>
      <p class="vel-feature-text">Every value is a CSS custom property. Override the entire system with a single token swap.</p>
    </div>
  </div>
</div>

Feature cards with warning and danger icon variants

Smart Warnings

Surface issues in your UI before they reach production with clear visual feedback.

Secure by Default

No external CDN dependencies, no runtime JavaScript. Pure CSS, fully in your control.

example.html

<div style="padding:24px;background:#060b17;font-family:system-ui,sans-serif;border-radius:12px;">
  <div class="vel-features-grid" style="padding:0;">
    <div class="vel-feature-card">
      <div class="vel-feature-icon vel-feature-icon-warning">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:1.5rem;height:1.5rem;">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
          <line x1="12" y1="9" x2="12" y2="13"/>
          <line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
      </div>
      <h3 class="vel-feature-title">Smart Warnings</h3>
      <p class="vel-feature-text">Surface issues in your UI before they reach production with clear visual feedback.</p>
    </div>
    <div class="vel-feature-card">
      <div class="vel-feature-icon vel-feature-icon-danger">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" style="width:1.5rem;height:1.5rem;">
          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
        </svg>
      </div>
      <h3 class="vel-feature-title">Secure by Default</h3>
      <p class="vel-feature-text">No external CDN dependencies, no runtime JavaScript. Pure CSS, fully in your control.</p>
    </div>
  </div>
</div>