Components

Sections

Templates

Framer

Hero with Title & Image 01

Hero with Title & Image 01

Hero with Title & Image 01

Hero with Title & Image 01

Hero layout with breadcrumbs, headline, image, and short intro—ideal for CMS detail pages or showcasing creative work in your portfolio.

Desktop

desktop version of a hero section with project title, featured workspace image, breadcrumbs, and a short project description

Tablet

tablet version of a hero section with project title, featured workspace image, breadcrumbs, and a short project description

Mobile

mobile version of a hero section with project title, featured workspace image, breadcrumbs, and a short project description

Section Details:

Variables:

Heading

Paragraph

Category

Hero Image

Code:

Negative Margin

Effects:

Appear

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