List 2 - Numbered list with large numeralsPro
An editorial ordered list where each item leads with an oversized, light-weight two-digit numeral, followed by a bold title and paragraph, laid out in a sticky-heading split. Use it for how-it-works steps, principles, onboarding sequences or any ordered set of ideas.
About List 2
An editorial ordered list where each item leads with an oversized, light-weight two-digit numeral, followed by a bold title and paragraph, laid out in a sticky-heading split. Use it for how-it-works steps, principles, onboarding sequences or any ordered set of ideas.
List 2 is a list block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 80 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- list
- numbered
- ordered
- steps
- editorial
- how-it-works
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add list-02Dependencies installed automatically: lucide-react.
Uses: button, reveal, utils.
Usage
import List02 from "@/components/blocks/list-02"
export default function Page() {
return <List02 />
}