Illustrated Cards
A gradient lead headline over two equal isometric cards: a backlog sorted into stacked lanes and cubes converging on one focused point.
A gradient lead headline over two equal isometric cards: a backlog sorted into stacked lanes and cubes converging on one focused point.
The source for every Modern SaaS block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
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.