Marketing blocks
Features sections
Feature sections: icon grids, bordered cards, icon-left lists, image split, screenshot and alternating rows. Figma: Features section.
import
{ FeaturesSection, type FeatureItem, type FeaturesLayout } from "@pepulux/ui"Grid
Centered icon, title and text; columns 2, 3 or 4.
Features
Everything you need to ship
Powerful features that work together out of the box.
Cards (muted)
Built for modern teams
Pick a feature and dive deeper.
Icon left
Designed to stay out of your way
Image split
Platform
One workspace, every workflow
Bring your team together.
Lightning fast
Pages render instantly with optimised, edge-cached delivery.
Secure by default
Role-based access, audit logs and encryption at rest.
Insightful analytics
Understand usage with dashboards that update in real time.
Screenshot
See it all in one place
A unified dashboard for everything.
Alternating rows (brand)
A closer look
Lightning fast
Pages render instantly with optimised, edge-cached delivery.
Secure by default
Role-based access, audit logs and encryption at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layout | "grid" | "cards" | "icon-left" | "image-split" | "screenshot" | "alternating" | "grid" | Figma layout |
| tone | "light" | "muted" | "brand" | "light" | Background tone — Figma Light / Muted / Brand |
| features | FeatureItem[] | — | { icon?; title; description; linkLabel?; href?; image? } |
| columns | 2 | 3 | 4 | 3 | Grid columns |
| image | string | — | Artwork for image-split / screenshot |
| title / description / eyebrow | ReactNode | — | Heading content |
| primaryAction / secondaryAction | { label; onClick? } | — | Buttons under the heading |