Centered With Feature Pills
A centered headline, lede, and dual CTAs above a wrapped row of bordered icon feature pills.
A centered headline, lede, and dual CTAs above a wrapped row of bordered icon feature pills.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Centered With Feature Pills opens with a large centered headline followed by a short lede paragraph and two side-by-side call-to-action buttons. Below those sits a wrapped row of small bordered pills, each pairing a compact icon with a one-phrase feature label. The six pills cover distinct capability areas so a visitor can read the product surface in a single glance without needing a screenshot or diagram.
All of the text layers are independent. The headline, lede, and button labels are plain strings you can rewrite freely. The pills are driven by a small array, so you can add, remove, or relabel entries and the row reflows automatically. Nothing in the layout depends on having exactly six pills.
This layout suits a product that has several distinct capabilities worth naming upfront. For an online education platform, listing features like course builder, live sessions, and progress tracking in pill form tells a prospective student or instructor what the tool covers before they scroll. It works better than a pure text hero when the feature set is the headline argument, and better than a mockup hero when no single screenshot captures the breadth of the product.
A natural flow around it on a Marketing Pro page:
Before
After
One focused sentence sets the frame, then the pills name the specifics. A few angles that work well:
Tip: keep each pill label to two or three words so the row stays compact and readable at smaller viewport widths.