Project 2 D block design & features
The block splits into a seven-column title area and a five-column sidebar on large screens. The title section includes a horizontal rule, a "Project" label, and a large serif heading. The sidebar holds a rounded muted-background card containing three label-value rows (year, category, client) separated by bottom borders. A 5:3 aspect image with large rounded corners follows, with an optional floating caption card positioned at the lower right using a semi-transparent background. A twelve-column description section pairs a sticky four-column heading with an eight-column content area holding a summary, a body paragraph, and a shadcn/ui outline Button.
The metadata card uses muted half-opacity background, and the floating caption card uses a high-opacity background token with padding. These surface treatments add depth without relying on shadows. The serif title is rendered at up to 9xl with very tight line height. The horizontal rule before the project label is a thin foreground line.
The block has a layered, editorial feel with its floating caption and card-based metadata. Complexity is moderate due to the overlay positioning, but no animations are included. Built with Shadcn UI tokens throughout.
On smaller screens the twelve-column splits stack vertically, the floating caption repositions inline, and the sidebar card appears below the title.