Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Card Inset Feature Checklist CTA Block for Solid

A card-in-card enterprise CTA: a start-aligned header with a Shine Button at its end, over a hairline-divided grid of six features in two columns, each with an info button that opens a one-sentence explanation.

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 closing call to action for Solid with Ark UI for plans that need a few lines of explaining. A muted shell with + marks on its corners wraps a raised panel that follows your theme. A start-aligned header holds the headline and a short pitch, with the Shine Button at its end; below it, six features sit in one grid of two columns whose cells are divided by shared hairlines. Every line ends in a small info button that opens a one-sentence explanation of the feature on tap, click or Enter, and closes on Escape. On a phone the button follows the pitch and the cells become one column. It's built from Guides, Toggle Tooltip, Button and Shine Button, with CSS only for the entrance and your theme's tokens for every colour. For enterprise and contact-sales sections where the buyer wants to know what "SSO and SCIM" means before they write.

FAQ

How do I change the features and what they say?

Edit FEATURES at the top of the file: each entry has the line that shows (name) and the sentence the info button opens (tip). The grid is two columns from the sm breakpoint and one on a phone, in the order of the array, so put the lines you most want read first.

How do the info buttons work?

Each is a real button named "More about" and the feature, wrapped in Toggle Tooltip, which is a popover: it opens on click, tap or Enter, closes on Escape or a second press, and gives focus back to the button. It doesn't depend on hover, so it works the same with a finger as with a mouse.

Why does the tip look different from the panel?

The tip is drawn outside the panel, at the page level, so it takes your page's colours, and it is drawn as the inverse of the page behind it: dark on a light page and light on a dark page, so it stays distinct from the panel.

What happens with reduced motion?

The shell doesn't fade in and the tips open without animating. Nothing else moves.

Does it work right to left?

Yes. The ticks sit at the start of each cell and the info buttons at the end, so both swap sides, and the tips open in the page's direction. The header's button sits at the end too.

All 100 cta blocks