About this block

With Kanban Preview is a centered hero followed by a full kanban board mockup. The top section holds a headline, a one or two sentence lede, and two side by side call to action buttons. Below the copy sits a wide card framed in window chrome showing a "Q3 campaign board" label and three columns labeled Planned, In Progress, and In Review. Each column holds small task cards that show a title, a tag chip (Web, Email, Paid, etc.), and an assignee avatar. The board is built entirely from markup and theme tokens so it adapts to dark mode without any image assets.

All copy in the hero area is independent: headline, lede, and button labels can each be changed without touching the board. Within the board, the number of columns, the number of cards per column, the tag chips, and the assignee avatars are all driven by a plain data array that you can extend or trim to match your product. The second and third columns collapse on small viewports so the layout stays clean at every size.

When to use

Reach for this block when your product organizes work into stages and you want visitors to see that workflow immediately on landing. For an ecommerce storefront brand it is a natural fit for a campaign management or marketing ops tool page: the board signals at a glance that tasks move from concept through review to live, without requiring a screenshot or a recorded demo. It outperforms a plain centered hero when the product itself is visual and workflow driven, and it stays lighter than a full dashboard screenshot because no external image file is needed.

A natural flow around it on a Marketing Pro page:

Before

• A short navigation header to anchor the page before the fold
• Centered Minimal if you want a leaner, text only fallback for A/B testing

After

• Features to expand on the individual capabilities visible in the board columns
• Testimonials to follow the product proof with customer voices

What you can display

The demo shows a marketing campaign board, but the columns and cards can represent any staged workflow your product supports:

• A content calendar pipeline. Label columns by publishing state (Draft, Scheduled, Published) and tag cards by channel so editors see the whole queue at a glance.
• An order fulfillment tracker. Use columns for order stages (Received, Picking, Shipped) and tag each card by fulfilment region or carrier to match an ecommerce ops context.
• A product launch checklist. Lay out pre launch tasks across teams (Design, Copy, Engineering) so stakeholders see cross functional readiness in one view.

Tip: keep each column to two or three cards so the board fits the fold on most screens and the workflow reads cleanly without scrolling.