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="uc-text-center uc-mb-8">
  <h2 class="uc-text-2xl uc-font-bold">Everything you need</h2>
  <p class="uc-text-sm uc-text-fg-disabled">Subtitle text</p>
</div>
<div class="uc-grid uc-grid-cols-3 uc-gap-6">
  <div class="uc-text-center">
    <div class="uc-w-12 uc-h-12 uc-rounded-xl uc-bg-tint-orange">...</div>
    <h3 class="uc-text-sm uc-font-semibold">Feature Title</h3>
    <p class="uc-text-xs uc-text-fg-disabled">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="uc-flex uc-gap-8">
  <div class="uc-flex-1">
    <span class="uc-px-3 uc-py-0.5 uc-rounded-full uc-bg-tint-blue uc-text-accents-blue uc-text-xs">New Feature</span>
    <h2 class="uc-text-xl uc-font-bold">Built for collaboration</h2>
    <p class="uc-text-sm uc-text-fg-disabled">Work together in real-time...</p>
    <ul class="uc-space-y-2">
      <li class="uc-flex uc-items-center uc-gap-2">...</li>
    </ul>
  </div>
  <div class="uc-flex-1">
    <div class="uc-aspect-[4/3] uc-rounded-xl uc-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="uc-grid uc-grid-cols-2 uc-gap-4">
  <div class="uc-rounded-2xl uc-border uc-border-border-default uc-p-5">
    <div class="uc-w-10 uc-h-10 uc-rounded-lg uc-bg-tint-blue">...</div>
    <h3 class="uc-text-sm uc-font-semibold">Analytics Dashboard</h3>
    <p class="uc-text-xs uc-text-fg-disabled">Track your metrics...</p>
  </div>
  <div class="uc-rounded-2xl uc-border uc-border-border-default uc-p-5">
    <div class="uc-w-10 uc-h-10 uc-rounded-lg uc-bg-tint-blue">...</div>
    <h3 class="uc-text-sm uc-font-semibold">Team Management</h3>
    <p class="uc-text-xs uc-text-fg-disabled">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="uc-text-center uc-mb-8">
  <h2 class="uc-text-xl uc-font-bold">How it works</h2>
  <p class="uc-text-sm uc-text-fg-disabled">Get started in three simple steps.</p>
</div>
<div class="uc-space-y-6">
  <div class="uc-flex uc-gap-4">
    <div class="uc-w-8 uc-h-8 uc-rounded-full uc-bg-accents-blue uc-text-constant-white">1</div>
    <div>
      <h3 class="uc-text-sm uc-font-semibold">Create your account</h3>
      <p class="uc-text-xs uc-text-fg-disabled">Sign up in seconds...</p>
    </div>
  </div>
  ...
</div>

API Reference

All CSS classes available for the Feature Section component.

Class Type Description
uc-grid Layout CSS grid container for feature items
uc-grid-cols-1 Layout Single column grid (mobile default)
uc-sm:grid-cols-2 Layout Two columns on small screens and up
uc-sm:grid-cols-3 Layout Three columns on small screens and up
uc-gap-6 Spacing Gap between grid items (1.5rem)
uc-text-center Typography Centers text for icon grid items
uc-rounded-2xl Shape Large border radius for feature cards
uc-border uc-border-border-default Border Default border for card variant
uc-bg-tint-blue Color Blue tint background for icon containers
uc-bg-tint-orange Color Orange tint background for icon containers
uc-text-accents-blue Color Blue accent color for icons
uc-text-accents-orange Color Orange accent color for icons
uc-text-fg-disabled Color Muted text for descriptions and subtitles
uc-rounded-full Shape Fully rounded for numbered step circles
uc-bg-accents-blue Color Solid blue for step number backgrounds
uc-text-constant-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"