Feature Section — Veritheme

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-text-center vt-mb-8">
  <h2 class="vt-text-2xl vt-font-bold">Everything you need</h2>
  <p class="vt-text-sm vt-text-mains-quaternary">Subtitle text</p>
</div>
<div class="vt-grid vt-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-mx-auto vt-mb-3 vt-bg-warning-background">...</div>
    <h3 class="vt-text-sm vt-font-semibold">Feature Title</h3>
    <p class="vt-text-xs vt-text-mains-quaternary">Description</p>
  </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-flex vt-gap-8">
  <div class="vt-flex-1">
    <span class="vt-px-3 vt-py-0.5 vt-rounded-full vt-bg-info-background vt-text-info-primary vt-text-xs">New Feature</span>
    <h2 class="vt-text-xl vt-font-bold">Built for collaboration</h2>
    <p class="vt-text-sm vt-text-mains-quaternary">Work together in real-time...</p>
    <ul class="vt-space-y-2">
      <li class="vt-flex vt-items-center vt-gap-2">...</li>
    </ul>
  </div>
  <div class="vt-flex-1">
    <div class="vt-aspect-[4/3] vt-rounded-xl vt-bg-gradient-to-br">...</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-grid vt-grid-cols-2 vt-gap-4">
  <div class="vt-rounded-2xl vt-border vt-border-border-default vt-p-5">
    <div class="vt-icon-badge vt-rounded-lg vt-bg-info-background vt-mb-3">...</div>
    <h3 class="vt-text-sm vt-font-semibold">Analytics Dashboard</h3>
    <p class="vt-text-xs vt-text-mains-quaternary">Track your metrics...</p>
  </div>
  <div class="vt-rounded-2xl vt-border vt-border-border-default vt-p-5">
    <div class="vt-icon-badge vt-rounded-lg vt-bg-info-background vt-mb-3">...</div>
    <h3 class="vt-text-sm vt-font-semibold">Team Management</h3>
    <p class="vt-text-xs vt-text-mains-quaternary">Invite members...</p>
  </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-text-center vt-mb-8">
  <h2 class="vt-text-xl vt-font-bold">How it works</h2>
  <p class="vt-text-sm vt-text-mains-quaternary">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-primary vt-text-generic-white">1</div>
    <div>
      <h3 class="vt-text-sm vt-font-semibold">Create your account</h3>
      <p class="vt-text-xs vt-text-mains-quaternary">Sign up in seconds...</p>
    </div>
  </div>
  ...
</div>

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-background`	Color	Blue tint background for icon containers
`vt-bg-warning-background`	Color	Orange tint background for icon containers
`vt-text-info-primary`	Color	Blue accent color for icons
`vt-text-warning-primary`	Color	Orange accent color for icons
`vt-text-mains-quaternary`	Color	Muted text for descriptions and subtitles
`vt-rounded-full`	Shape	Fully rounded for numbered step circles
`vt-bg-info-primary`	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"