Capability Columns
A split lead over three capability columns, each framing a schematic SVG figure with corner crop marks, a caption tag, and a Learn more cue.
A split lead over three capability columns, each framing a schematic SVG figure with corner crop marks, a caption tag, and a Learn more cue.
Search blocks by description or jump to a page.
The source for every Modern SaaS block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
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.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.