Components

Sections

Templates

Framer

Hero with Image 01

Hero with Image 01

Hero with Image 01

Hero with Image 01

Hero Section with breadcrumb, bold heading, and full-width image collage—perfect for case studies, project intros, or strong visual storytelling.

Desktop

desktop section of a hero section with large heading and multi-column workspace image collage under breadcrumb navigation

Tablet

tablet section of a hero section with large heading and multi-column workspace image collage under breadcrumb navigation

Mobile

mobile section of a hero section with large heading and multi-column workspace image collage under breadcrumb navigation

Section Details:

Variables:

Heading

Image 1

Image 2

Image 3

Image 4

Image 5

Code:

Negative Margin

Effects:

Appear

Scroll

Text

How to use:

  • Click the Copy button on any Section card or preview page.

  • Paste it anywhere in your Framer project where you need the layout.

  • Adjust Text, Images, and Variants using built-in Variables.

  • Unlink the section for full control and deeper customization.

Copy Options

Copy

Copy Options

Copy Options

Copy

Copy Options

Copy Options

Copy

Copy Options