Hero component: Styles, sizes, and best practices (VIDEO)

This tutorial helps you understand Hero styles, sizes, and best practices in HarvardSites. Hero components are one of the most visible parts of your page. They introduce your page and help users understand what to focus on. 

The stacked style separates content from the image for clearer reading. The floating style places content directly over the image. The split vertical style places content next to the image, and split horizontal puts content below it. 

Choose a style based on how clearly your content can be read and understood. All of these styles can be adjusted in size. This large hero is used for primary page introductions. Medium size works well for most pages. Smaller heroes are best for supporting content or secondary actions. 

Hero size should match the importance of your content. Keep your hero focused with a clear message, short text and one or two actions. The image should support your message, not compete with it. Avoid long text, too many links or competing messages. Most pages work best with one clear hero message. 

This tutorial explained the importance of hero components in your page design and how they guide user focus effectively. Happy building in Harvard sites.