Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CTA blocks

Pro

Split Numbered Module List CTA Block for React

A split CTA for a course: the pitch, a ruled row of totals and a Shine Button beside a numbered accordion whose modules are full-width rows ruled by solid hairlines, each opening to its lessons and durations.

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 split call to action for a course, a bootcamp or a guided programme, for React with Base UI, drawn between solid rails. At the start are a badge, the headline, a short pitch, a ruled row of three totals and a Shine Button. At the end, past a solid divider that meets the top rule, an accordion of numbered modules runs flush to the rail: each module is a full-width row ruled by a solid hairline, with + marks where the line meets the divider and the rail. A module shows its number, its title, how many lessons it has and how long they take, and opens to list its lessons with their durations. The totals are added up from the lessons, so they stay true when you edit them. The course is a made-up one from Thistle Academy. On a phone the text comes first and the modules follow. For online courses, workshops, onboarding programmes and training pages.

FAQ

How do I change the modules and lessons?

Edit MODULES at the top of the file: each module has an id, a title and its lessons, and each lesson a title and its length in minutes. The two-digit numbers, the lesson counts and durations in each row, the lesson numbers inside it and the three totals beside the pitch are all worked out from that list, so add or remove a module or a lesson and nothing else needs touching.

How are the totals worked out?

TOTAL_LESSONS and TOTAL_MINUTES add up the lessons of every module, and durationText turns minutes into the shortest honest wording: 55 minutes is "55 min", 240 is "4 hr" and 95 is "1 hr 35 min". Each module's own time is the sum of its lessons. The figures are wrapped so a right-to-left page keeps their digits and units together.

How does the accordion behave?

One module is open at a time, and the first starts open so the block shows lessons from the first paint. Opening another closes the first, and pressing the open one closes it. The first module is open through defaultValue, and each trigger sits inside its own heading. The headings stay in the page's outline: the block's headline is an h2 and each module's title is an h3.

How do I use it with a keyboard and a screen reader?

Tab moves to a module, Enter or Space opens and closes it, and the arrow keys, Home and End move between modules where the library supports them. Each trigger is a button named by its title, with its lesson count and time read after it, and it announces whether it is expanded. The lessons are an ordered list, with each lesson's number written out (such as 1.2) and its length at the end of the row.

How does it fit a phone?

The two parts stack below the lg breakpoint, with the text first and the module list under it, still ruled edge to edge. The totals stay on one row, long module and lesson titles wrap, and lesson durations never break across lines, so nothing scrolls sideways down to 320 px.

What moves, and can I turn it off?

Both parts fade up on load, the second just after the first, and the accordion opens and closes with a short height transition. It's all CSS, with no animation library. With reduced motion on, the parts appear in place and the lessons open without the transition.

  • Pro

    Centered Light Numbered Steps CTA

    Lists and steps

    A centred card-in-card call to action for a deploy platform: a headline, a sentence and the Shine Button, over a closing band of three setup steps staggered along a dashed path that draws itself once.

  • Pro

    Card Inset Step List CTA

    Lists and steps

    A reverse-split card-in-card call to action for a migration: a ruled timeline of three steps with a time chip each and a closing total, beside the headline and a Shine Button, with trust points on the shell beneath.

  • Pro

    Split Attribution Window CTA

    Pickers and toggles

    A reverse split call to action for a partner program: a slider tool in a hairline frame that shows whether a referral still counts on the day a visitor buys, beside the pitch, four benefits and a Shine Button.

  • Pro

    Centered Three-Step Process Hero

    Updates and timelines

    A compact centred how-it-works hero for an invoicing app: a headline, a Shine Button with an outline action and trust copy over a closing band of three step cells, each with a small drawing of its screen.

  • Pro

    Split Layout Numbered Feature List Hero

    Features and tables

    A split hero between solid rails: an announcement link, a headline and a Shine Button with an outline button on one side, a divider, and a numbered list of six features as ruled rows on the other.

  • Pro

    Accordion Plans Pricing

    Plan rows

    Three plan rows for an email API, each its own band with its price and call to action in view, opening in place to list its features, with a monthly and annual switch in the header row.

All 100 cta blocks