Hero Split Panel
A full-width hero section with text on one side, an image on the other, and optional animated counters.
Hero Split Panel
A full-width hero section that places text content on one side and a large image on the other. It supports animated counters, multiple CTA buttons, and tag labels above the title. Two mobile layout variants let you control how the content stacks on smaller screens.
Adding in Strapi
- Go to Content Manager > Pages > select your page
- In the Design dynamic zone, click "Add component"
- Select "Heroes" > "Hero Split Panel"
- Fill in the title, subtitle, and upload a hero image
- Optionally add tags, buttons, counters, and a scroll button
- Save and publish
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| textType | enumeration | No | Text rendering mode for the hero content |
| tags | Component (repeatable) | No | Tag labels displayed above the title |
| title | Component | No | Main headline text |
| subtitle | Component | No | Secondary text below the title |
| image | Media | No | Hero image displayed on one side |
| background | Component | No | Background styling (color, image, gradient) |
| buttons | Component (repeatable) | No | CTA buttons below the text content |
| scrollButton | Component | No | Scroll-down indicator button |
| mobileTypes | Enum | No | Mobile layout variant: types_1 (default) or types_2 |
| counters | Component (repeatable) | No | Animated counter items -- see sub-fields below |
| richtext | customField | No | Optional rich-text body content (blocks editor) |
Counters Sub-fields
| Field | Type | Required | Description |
|---|---|---|---|
| value | Integer | Yes | The target number the counter animates to |
| title | String | Yes | Label displayed below the counter value |
| prefixType | Enum | No | Prefix style: ICON or TEXT |
| prefixContent | String | No | Text shown before the number (when prefixType is TEXT) |
| icon | Component | No | Icon shown before the number (when prefixType is ICON) |
| speed | Integer | No | Animation duration in milliseconds (default 2000) |
Variants
Default
The standard split-panel layout with a headline, subtitle, image, and CTA buttons. The text panel sits on the left and the image fills the right half.
Best for: Landing pages and product introductions where a strong visual pairs with a clear call to action.
LongText
Demonstrates how the layout adapts when the title and subtitle are longer than usual. The text panel expands vertically while the image remains proportional.
DifferentImage
Shows the hero with an alternative image to illustrate how different aspect ratios and subjects render in the image panel.
MobileView
Previews the stacked mobile layout. On narrow screens the image and text stack vertically based on the selected mobileTypes variant.
Tips
- Use
types_1for image-on-top mobile stacking andtypes_2for text-on-top -- choose whichever order feels most natural for the page. - Keep counter values meaningful: three to four counters with round numbers (e.g. 50+, 1000+) create the strongest visual impact.
- The
scrollButtonis optional -- add it on full-viewport heroes to hint that more content is below. - Tag labels work well for short phrases like "New" or "Featured" to draw attention above the headline.