About this block

Capability Columns opens with a split lead: the headline sits on the left and a short supporting line sits bottom aligned to its right. Beneath it, three equal columns each stack a small letterspaced caption, a schematic SVG figure framed by two corner crop marks, a title, a one or two line description, and a "Learn more" cue. Each column is one link, so the whole card is clickable; on hover the caption and crop marks sharpen to full ink, a quiet cue with no motion. Thin vertical rules divide the columns on large screens; on smaller viewports they stack with generous spacing.

The figures read like drawings from a product spec. The first resolves a loose pile of scattered strokes into a small plan board: staggered bars over week gridlines and a dashed today line, the active bar picked out in primary with a ring handle and an incoming dependency elbow. The second stacks documents with the deciding line highlighted and tied by an elbow connector to a rail of small annotation cards. The third climbs a delivery curve over progress hatching toward a circled check. All three are self contained inline SVG built from theme tokens, so they carry no external dependencies and adapt to light and dark themes automatically.

When to use

Reach for this block when a product has exactly three core capabilities that deserve equal billing and a slightly technical, engineered presentation. The crop marks and caption tags give the section the feel of an annotated blueprint, which suits developer tools, project management products, and any SaaS that wants to signal precision. It works well midway down a Modern SaaS page, after the hero has set the promise and before social proof closes the argument.

A natural flow around it on a Modern SaaS page:

Before

• A hero section to introduce the product before the capability detail comes in
• A logo cloud to establish trust ahead of the breakdown

After

• Product Showcase to ground the three capabilities in one concrete view of the app
• A testimonials section to back each capability with real user reactions

What you can customize

• Lead copy. Swap the headline and the supporting line; the split layout keeps them balanced as long as both stay within two lines.
• Captions and titles. Each column takes a caption tag, a title, and a description. The captions render in letterspaced uppercase, so keep them to a product name plus one word.
• Figures. Each schematic is its own SVG component. Replace any of them with your own inline markup, keeping currentColor and the text-* token classes so the new art inherits the theme, and reserve primary for the one element you want the eye to land on.
• Links. Every column is a single link ending in a "Learn more" cue; point each href at the relevant docs or feature page. To make the columns non-interactive, swap the anchor for a div and drop the cue.

Tip: the section reads best when each figure keeps a single primary accent. If you redraw one, resist coloring more than one element per column.