- Craft a benefit-focused title so visitors are inspired to read through your whole page.
- Choose an image that illustrates the topic of your page or the offer you're making.
- Ensure the image you use has alt text before you bring it into your page.
- Use compelling copy that keeps visitors on the page and/or drives them to action.
- If you use a button/link, make sure the words convey a clear directive to act.
- The Hero component can also be used as a text-only component; an image is not required.
- Do not use the H1 heading in a hero that is not at the top of a page.
A Hero component at the top of the page needs the H1 headline level. The image is always on the right side of the hero.
A text-only Hero component centers its text block on the page.
Use an image
It's best practice to use an image in a Hero component if it's at the top of your page.
Because the Campaign Template hero is derived from the Rivet design system, the image should use a 3:2 aspect ratio, such as 900 x 600. Learn more about the Rivet hero design.
Note: Be sure to include alternative text for your image. Alt text is a description of what's in the photo, not a caption, and is required for accessibility purposes. See the WebAIM website for more information on writing alt text for images.
Add a button/link
Select the "With Button?" checkbox under the Description field.
Use Hero as a text-only component
Deselect the "With Image?" checkbox at the top of the Hero chunk.