Project 2 A - Centered project detail with label and divider

Pro

Center-aligned project page with a label, large serif title, horizontal divider, three-column metadata, a captioned image, and a description section with a button.

Vue
Shadcn Project 2 A block

Component Data

  • ID:project2a
  • Access:pro
  • Created:Oct 1, 2025
  • Type:block

Project 2 A block design & features

The layout centers a shadcn/ui Label reading "Project" above a large serif title that can span two lines. A short horizontal divider separates the title from a three-column metadata row showing year, category, and client, all center-justified in uppercase. A full-width 16:10 image follows, with a centered italic caption in small muted text beneath it. A description area holds a large light-weight summary heading, a body paragraph, and an outline Button with an arrow icon.

The serif title is rendered at up to 9xl scale in a light weight, giving the opening a refined editorial quality. The horizontal divider is a narrow background-colored line centered on the page. Metadata text uses uppercase tracking with muted foreground labels and foreground values. The image caption adds an extra layer of context below the visual.

The block has a magazine-cover feel with its centered alignment and restrained typography. All content fields are prop-driven, making the block fully configurable. No animations are present.

On smaller screens the three-column metadata row stacks naturally and the serif title scales through responsive breakpoints.