---
title: "Triple Hero — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Joshua Roberts · Sections. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/triple-hero"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Triple Hero

# Triple Hero

An interactive three-item section.

[View on Framer](https://framer.com/marketplace/components/triple-hero/?via=elliot-li)

![Triple Hero preview image 1](https://framer.elliotli.dev/og/component/triple-hero/6ac49dcebdd42a3f/1600x1200.jpg)

## Summary

Triple Hero!

## Description

## Triple Hero! 🦸🏾‍♂️🦸🏻‍♀️🦸🏼

A dynamic section which displays three items of content in a full-screen interactive and eye-catching layout using animated masks and z-index layering to create a unique effect.

### Best Use Cases:

Hero sections, Work/product/project showcases, Single-screen websites, "Featured" sections

### How to Use:

1.  **Drag and drop** the component onto the main desktop breakpoint and set it's width to "fill" and it's height to "viewport: 100vh".
    
2.  **Upload your content** as needed via the property panel
    
3.  **Customize the properties** until the visual style of the component's UI works for you.
    

### Highlights:

-   Two unique layouts to choose from (Diagonal & Mosaic).
    
-   Lightweight animations utilizing masking effects.
    
-   Dynamic links to internal or external pages.
    
-   Support for both images and videos.
    
-   Full typography customization options.
    
-   Mobile responsive via adjustable trigger zones.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-stjdsvos-su6a9YS2KQB5JriawjhDT8Qh83o2ST)

## Rank history [How rankings work →](/terms#rankings)

-   All · #6666

## Details

- **Author**: Joshua Roberts
- **Price**: $5.00
- **Published**: 2026-04-29
- **Updated**: 2026-04-29
- **Added**: 2026-04-09
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes