Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Manifesto Quad Grid Features Block for Solid

A centred manifesto feature section for a deploy tool: a statement over a full-width two-by-two of numbered principles, each written as what you give up against what you get, crossing at one plus mark.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A manifesto feature section for Solid with Ark UI. A centred statement and one sentence sit over a quad that runs from rail to rail: four numbered principles in cells that share their hairlines, crossing at a single + mark in the middle. Each principle opens with a contrast, the thing you used to keep up struck through and what you get in its place ("12 settings" then "3 defaults"), then a title and a short paragraph. Below md the four stack as rows and the centre mark goes. It's built from Guides, with CSS for the entrance and your theme's tokens for every colour. For products with a point of view, where four rules say more than a feature grid.

FAQ

How do I change the principles?

Edit PRINCIPLES at the top of the file: each has an instead (what other tools ask of you), a now (what you do instead), a title and a description. The numbers come from the order. Keep it to four: the quad is two by two, and the middle mark marks where the four meet.

How is the contrast read aloud?

The struck-through phrase is wrapped in <s> with a screen-reader-only "Instead of" before it, and the new phrase has "you get" before it, so a screen reader hears "Instead of 12 settings you get 3 defaults". The arrow between them is decoration and mirrors in right-to-left layouts.

How does the centre mark line up?

The cells share one-pixel hairlines, so the vertical and the horizontal line cross at the exact middle of the two-by-two. The + is drawn there with the same stroke as the page's other marks. It's hidden below md, where the cells stack and there is no crossing.

Does it follow my theme?

Yes. Every colour is a theme token and there's no dark scope or primary surface, so the section follows light and dark and every preset. Emphasis is weight and the struck-through contrast, not colour.

What moves, and what happens with reduced motion?

The statement and the quad fade up once when the page loads, with a CSS transition. With reduced motion the transition is off and the section appears at once.

How does it fit on a phone?

The statement stays centred, then the four principles stack one per row between hairlines, each starting with its number and its contrast. The long phrases wrap rather than overflow, so nothing scrolls sideways at 320 pixels.

All 170 features blocks