Split Image with Bullet List

A two-column feature section: text content (eyebrow, heading, description, a checked bullet list, and an optional CTA button) on one side, a full-bleed image on the other. The `reverse` boolean flips which side the image renders on, stacking image-below-text on mobile either way.

By Staaarter Team

Feature

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/split-image-bullet-list.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature136.tsx instead.

Usage

The file also exports feature136Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature136, feature136Demo } from "@/components/blocks/feature/feature136";

export default function Page() {
  return <Feature136 {...feature136Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading; omitted entirely when unset.
heading	string	none	Section heading.
description	string	undefined	Supporting copy under the heading.
bullets	string[]	none	Checked bullet list items.
image	MediaSlotImage	none	Image rendered on the opposite side from the text column.
cta	{ label: string; href: string }	undefined	Optional call-to-action button under the bullet list.
reverse	boolean	false	When true, the image renders on the left and the text column on the right (on large screens; mobile always stacks text first).
className	string	undefined	Extra classes for the outer section element.

Behavior notes

Plain server component, no interactivity; the CTA is an inert link (`href="#"` in the demo).
`reverse` only changes column order at the `lg` breakpoint via `lg:order-1`/`lg:order-2`; on mobile the text column always renders first regardless of `reverse`.
Bullet check marks use a fixed `Check` icon in a `bg-primary/10` circle, not a per-item icon choice.

More Feature Blocks

View all →

Full-Bleed Workspace Band

Two-column header above a full-bleed image band with a live view switcher, closing on three numbered captions.

Center-Line Journey Timeline

Vertical hairline timeline alternating stages either side, dropping a phone frame on one step.

Figure-Led Evidence Rows

Tall image with a floating before-and-after card, leading into oversized-figure evidence rows.

Staircase Asset Trio

Three image tiles stepping down the page in a staircase, each floating a different live asset.

Sticky Reference List

Sticky heading column beside three labelled groups of checked capabilities, closing on a footnote.

Day Timeline Rows

Hairline rows walking through one working day, stamped with time and a live approval card inline.