About this block

Illustrated Cards opens with a large two line headline whose ink fades from a solid foreground at the top to a soft muted grey at the bottom, with a short supporting line set to its right and bottom aligned to the heading. Beneath it sit two equal cards, each one stacking a self contained isometric SVG over a title, a one line description, and a small corner action button. The first card shows three isometric stacks of slabs read as lanes of work, the tallest with its top slab picked out in the accent; the second shows isometric cubes scattered on the ground plane, each tied by a thin line to one raised primary cube at the centre.

Both illustrations are plain isometric SVG built from theme tokens in the same language as the collection's Benefits Isometric block, so they carry no external dependencies and adapt to light and dark themes automatically. The two cards are independent, so you can rewrite either title and description, swap an illustration, or repoint the action without disturbing the other.

When to use

Reach for this block as the lead feature moment on a Modern SaaS page, just under the hero, when you want two capabilities to share equal billing without the density of a full bento grid. The gradient headline gives the section a clear focal point while the paired cards keep each idea distinct. For a project management workspace it works well as the section that frames the two halves of the product: organizing the work and focusing the team on it.

A natural flow around it on a Modern SaaS page:

Before

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

After

• Bento Grid to follow the pair with a denser overview of the remaining capabilities
• A testimonials section to reinforce each capability with real user reactions

What you can customize

• Headline and lede. Swap the two phrases in the headline and the supporting line; the vertical gradient ramps across whatever copy you set, so the top of the heading always reads darkest.
• Card content. Each card takes a title, a one line description, and an action. Keep the descriptions to a single line so both cards stay balanced.
• Illustrations. The isometric stacks and converging cubes are self contained SVG components built from small Slab and Cube primitives. Replace either with your own inline markup, keeping currentColor and the text-* token classes so the new art inherits the theme.

Tip: the cards read best as a true pair, so give each one a distinct title and illustration rather than repeating the same idea on both sides.