Blog 31 block design & features
Blog31 is an editorial post grid built with Shadcn UI cards on a muted background. It opens with a masthead-scale heading, followed by a large two-tone statement paragraph with an indented first line and a small muted note to its side. The grid below holds up to seven posts. The first is a full-image card with a dark gradient rising from the bottom, carrying the date, title, and summary in light text. The rest are tall plain cards with a thumbnail and a small decorative plus icon at the top, and the date, title, and summary pinned to the bottom.
Contrast is the main tool: plain card surfaces sit against the gray section, and the lead card's dark overlay stands out against both. Corners are rounded, borders and shadows are absent, and each card has a generous minimum height that leaves open space between the image and the text. The statement intro is set large and medium-weight, shifting from foreground to muted gray mid-sentence. The heading, statement, and note fade up into view on scroll with a light stagger. The lead card hovers as one unit, dimming the image and underlining the title, while the other cards dim the thumbnail and underline the title separately.
The result is bold and art-directed, closer to a studio journal than a typical blog index. The oversized masthead, two-tone statement, and overlay lead make it the most expressive block in this family. Complexity is moderate to high and largely content-driven: seven images, plus a statement and note that read well at display size.
The grid moves from one column on mobile to two on tablets and four on wide screens, where the lead spans two columns. Post links open in a new tab.