Project 5 G block design & features
The header uses a five-column grid. Three columns hold a studio and year label, a two-tone title where the second word renders in muted foreground, and a body paragraph. The remaining two columns display a tall 3:4 portrait image in a rounded container. A main section uses a three-column grid with a 16:10 wide image spanning two columns and a sidebar containing a bold "Exhibition" heading, two border-left metadata items (museum, medium), and a square image. A two-column closing section pairs a vision narrative on the left with right-aligned visiting hours and a shadcn/ui Button on the right.
The two-tone title creates a typographic hierarchy within a single heading. The border-left metadata items use a 2 px left rule in border color. The visiting hours text is right-aligned with the button placed below. Entry animations use staggered fade-in-up variants throughout.
The asymmetric grid layout and mixed image sizes give the block a dynamic, art-directed quality. The border-left metadata treatment provides a subtle vertical accent. Built with Shadcn UI tokens.
On mobile the five-column and three-column grids collapse to single-column layouts, and the closing section stacks vertically.