v1.1.1

Feature Section

Landing page sections to showcase product features and benefits.

Icon Grid

Features displayed in a grid with icons.

html

Everything you need

All the tools and features to build, ship, and scale your product.

Lightning Fast

Optimized for speed with sub-second response times.

Secure by Default

Enterprise-grade security with end-to-end encryption.

Auto Sync

Real-time sync across all your devices seamlessly.

<div class="vt-max-w-2xl vt-mx-auto vt-py-4">
  <div class="vt-text-center vt-mb-8">
    <h2 class="vt-text-2xl vt-font-bold vt-mb-2">Everything you need</h2>
    <p class="vt-text-sm vt-text-foreground-muted vt-max-w-md vt-mx-auto">All the tools and features to build, ship, and scale your product.</p>
  </div>
  <div class="vt-grid vt-grid-cols-1 vt-sm:grid-cols-3 vt-gap-6">
    <div class="vt-text-center">
      <div class="vt-icon-badge vt-w-12 vt-h-12 vt-rounded-xl vt-bg-warning-surface vt-mx-auto vt-mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-zap vt-w-6 vt-h-6 vt-text-warning-fill">
          <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path>
        </svg>
      </div>
      <h3 class="vt-text-sm vt-font-semibold vt-mb-1">Lightning Fast</h3>
      <p class="vt-text-xs vt-text-foreground-muted">Optimized for speed with sub-second response times.</p>
    </div>
    <div class="vt-text-center">
      <div class="vt-icon-badge vt-w-12 vt-h-12 vt-rounded-xl vt-bg-info-surface vt-mx-auto vt-mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-lock vt-w-6 vt-h-6 vt-text-info-fill">
          <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
        </svg>
      </div>
      <h3 class="vt-text-sm vt-font-semibold vt-mb-1">Secure by Default</h3>
      <p class="vt-text-xs vt-text-foreground-muted">Enterprise-grade security with end-to-end encryption.</p>
    </div>
    <div class="vt-text-center">
      <div class="vt-icon-badge vt-w-12 vt-h-12 vt-rounded-xl vt-bg-info-surface vt-mx-auto vt-mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-refresh-cw vt-w-6 vt-h-6 vt-text-info-fill">
          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path>
        </svg>
      </div>
      <h3 class="vt-text-sm vt-font-semibold vt-mb-1">Auto Sync</h3>
      <p class="vt-text-xs vt-text-foreground-muted">Real-time sync across all your devices seamlessly.</p>
    </div>
  </div>
</div>

Left-Right

Feature with image placeholder on one side and text on the other.

html
New Feature

Built for collaboration

Work together in real-time with your entire team. Share, comment, and iterate faster than ever before.

  • Real-time cursors
  • Inline comments
  • Version history 
<div class="vt-max-w-2xl vt-mx-auto vt-py-4">
  <div class="vt-flex vt-flex-col vt-sm:flex-row vt-items-center vt-gap-8">
    <div class="vt-flex-1">
      <span class="vt-badge vt-bg-info-surface vt-text-info-fill vt-mb-3">New Feature</span>
      <h2 class="vt-text-xl vt-font-bold vt-mb-2">Built for collaboration</h2>
      <p class="vt-text-sm vt-text-foreground-muted vt-mb-4">Work together in real-time with your entire team. Share, comment, and iterate faster than ever before.</p>
      <ul class="vt-space-y-2">
        <li class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          Real-time cursors
        </li>
        <li class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          Inline comments
        </li>
        <li class="vt-flex vt-items-center vt-gap-2 vt-text-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-4 vt-h-4 vt-text-info-fill vt-flex-shrink-0">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
          Version history
        </li>
      </ul>
    </div>
    <div class="vt-flex-1 vt-w-full">
      <div class="vt-aspect-[4/3] vt-rounded-xl vt-bg-gradient-to-br vt-from-info-surface vt-via-success-surface vt-to-warning-surface vt-border vt-border-border-default vt-flex vt-items-center vt-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-image vt-w-12 vt-h-12 vt-text-foreground-muted/30">
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
        </svg>
      </div>
    </div>
  </div>
</div>

Feature Cards

Features in card containers with borders.

html

Analytics Dashboard

Track your metrics and KPIs with beautiful, real-time dashboards.

Team Management

Invite members, set roles and permissions with ease.

Smart Notifications

Get notified about what matters, filter out the noise.

API Access

Full REST API with SDKs for all major languages.

<div class="vt-max-w-2xl vt-mx-auto vt-py-4">
  <div class="vt-grid vt-grid-cols-1 vt-sm:grid-cols-2 vt-gap-4">
    <div class="vt-card vt-p-5">
      <div class="vt-icon-badge vt-rounded-lg vt-bg-info-surface vt-mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chart-column-big vt-w-5 vt-h-5 vt-text-info-fill">
          <path d="M3 3v16a2 2 0 0 0 2 2h16"></path><rect x="15" y="5" width="4" height="12" rx="1"></rect><rect x="7" y="8" width="4" height="9" rx="1"></rect>
        </svg>
      </div>
      <h3 class="vt-text-sm vt-font-semibold vt-mb-1">Analytics Dashboard</h3>
      <p class="vt-text-xs vt-text-foreground-muted">Track your metrics and KPIs with beautiful, real-time dashboards.</p>
    </div>
    <div class="vt-card vt-p-5">
      <div class="vt-icon-badge vt-rounded-lg vt-bg-info-surface vt-mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-users vt-w-5 vt-h-5 vt-text-info-fill">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle>
        </svg>
      </div>
      <h3 class="vt-text-sm vt-font-semibold vt-mb-1">Team Management</h3>
      <p class="vt-text-xs vt-text-foreground-muted">Invite members, set roles and permissions with ease.</p>
    </div>
    <div class="vt-card vt-p-5">
      <div class="vt-icon-badge vt-rounded-lg vt-bg-warning-surface vt-mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-bell vt-w-5 vt-h-5 vt-text-warning-fill">
          <path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
        </svg>
      </div>
      <h3 class="vt-text-sm vt-font-semibold vt-mb-1">Smart Notifications</h3>
      <p class="vt-text-xs vt-text-foreground-muted">Get notified about what matters, filter out the noise.</p>
    </div>
    <div class="vt-card vt-p-5">
      <div class="vt-icon-badge vt-rounded-lg vt-bg-error-surface vt-mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-code vt-w-5 vt-h-5 vt-text-error-fill">
          <path d="m16 18 6-6-6-6"></path><path d="m8 6-6 6 6 6"></path>
        </svg>
      </div>
      <h3 class="vt-text-sm vt-font-semibold vt-mb-1">API Access</h3>
      <p class="vt-text-xs vt-text-foreground-muted">Full REST API with SDKs for all major languages.</p>
    </div>
  </div>
</div>

Numbered Steps

Features presented as sequential steps.

html

How it works

Get started in three simple steps.

1

Create your account

Sign up in seconds with your email or social accounts.

2

Set up your workspace

Customize your workspace and invite your team members.

3

Start building

Use our templates or start from scratch to build something amazing.

<div class="vt-max-w-md vt-mx-auto vt-py-4">
  <div class="vt-text-center vt-mb-8">
    <h2 class="vt-text-xl vt-font-bold vt-mb-2">How it works</h2>
    <p class="vt-text-sm vt-text-foreground-muted">Get started in three simple steps.</p>
  </div>
  <div class="vt-space-y-6">
    <div class="vt-flex vt-gap-4">
      <div class="vt-icon-badge vt-w-8 vt-h-8 vt-bg-info-fill vt-text-generic-white vt-text-sm vt-font-bold">1</div>
      <div>
        <h3 class="vt-text-sm vt-font-semibold vt-mb-0.5">Create your account</h3>
        <p class="vt-text-xs vt-text-foreground-muted">Sign up in seconds with your email or social accounts.</p>
      </div>
    </div>
    <div class="vt-flex vt-gap-4">
      <div class="vt-icon-badge vt-w-8 vt-h-8 vt-bg-info-fill vt-text-generic-white vt-text-sm vt-font-bold">2</div>
      <div>
        <h3 class="vt-text-sm vt-font-semibold vt-mb-0.5">Set up your workspace</h3>
        <p class="vt-text-xs vt-text-foreground-muted">Customize your workspace and invite your team members.</p>
      </div>
    </div>
    <div class="vt-flex vt-gap-4">
      <div class="vt-icon-badge vt-w-8 vt-h-8 vt-bg-warning-fill vt-text-generic-white vt-text-sm vt-font-bold">3</div>
      <div>
        <h3 class="vt-text-sm vt-font-semibold vt-mb-0.5">Start building</h3>
        <p class="vt-text-xs vt-text-foreground-muted">Use our templates or start from scratch to build something amazing.</p>
      </div>
    </div>
  </div>
</div>

Guidelines

Landing-page blocks that showcase product features — icon grids, alternating media, cards, or numbered steps.

Lightning Fast

Sub-second response times, everywhere.

Do
Keep each feature to a short, scannable description.

Lightning Fast

Our platform is optimized end to end for speed with a globally distributed edge network, aggressive caching, prefetching, and background sync so every interaction feels instant no matter where users are located.

Don't
Don't bury a feature under a wall of text.

API Reference

All CSS classes available for the Feature Section component.

Class Type Description
vt-grid Layout CSS grid container for feature items
vt-grid-cols-1 Layout Single column grid (mobile default)
vt-sm:grid-cols-2 Layout Two columns on small screens and up
vt-sm:grid-cols-3 Layout Three columns on small screens and up
vt-gap-6 Spacing Gap between grid items (1.5rem)
vt-text-center Typography Centers text for icon grid items
vt-rounded-2xl Shape Large border radius for feature cards
vt-border vt-border-border-default Border Default border for card variant
vt-bg-info-surface Color Blue tint background for icon containers
vt-bg-warning-surface Color Orange tint background for icon containers
vt-text-info-fill Color Blue accent color for icons
vt-text-warning-fill Color Orange accent color for icons
vt-text-foreground-muted Color Muted text for descriptions and subtitles
vt-rounded-full Shape Fully rounded for numbered step circles
vt-bg-info-fill Color Solid blue for step number backgrounds
vt-text-generic-white Color White text on colored backgrounds

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Use section element with a heading for each feature block
Images Feature images need descriptive alt text
Heading hierarchy Ensure heading levels follow document outline (h2 > h3)
Links CTA links should have descriptive text, avoid "Click here"