Full Bleed Case
A case study section with a full-width container image and an attached ruled panel carrying the title, summary, and outcome figures.
A case study section with a full-width container image and an attached ruled panel carrying the title, summary, and outcome figures.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Full Bleed Case leads with a wide 16/10 Placeholder spanning the full container, then a ruled panel directly below that runs flush: the project line Ledger, Onboarding redesign, 2025, the heading Getting teams to the first invite, a summary paragraph, and three result figures plus labels in a horizontal row. The panel border meets the image border so the two surfaces read as one card.
Results are one array; the summary and heading are inline copy. The full-width visual followed by an attached text panel is the distinctive structural choice, the image gets the space a case lead deserves and the summary panel stays anchored to it.
Reach for this block as the lead section of a project page or a featured-case panel on a portfolio homepage. The installer swaps the Placeholder for a real hero screenshot or mockup and keeps the result figures honest.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the project-page hero with outcome figures. Other full-bleed case shapes:
Tip: the panel border that meets the image bottom is load-bearing, remove the border-t-0 and the card reads as two separate elements instead of one.