{"id":337,"date":"2018-06-08T16:58:01","date_gmt":"2018-06-08T16:58:01","guid":{"rendered":"http:\/\/bfuller.local\/wordpress\/styleguide\/?page_id=337"},"modified":"2026-04-01T14:03:56","modified_gmt":"2026-04-01T14:03:56","slug":"heroes","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/heroes\/","title":{"rendered":"Heroes"},"content":{"rendered":"\n

Use heroes to engage with the visitor and create the sense of desire. Hero images and videos should be aspirational. Your visitor should want to be the subject of the hero \u2014 or visit it, possess it, experience it, etc. Heroes are frequently used as introductions on prominent landing pages like a college’s front page, but can also be used to introduce sections in longer pages.<\/p>\n\n\n\n

\n\n\n\n

Overview<\/h2>\n\n\n\n

Here’s an example hero:<\/p>\n\n\n

A small, beautiful place<\/h1>

Big thinking starts here<\/p>Begin<\/a><\/div><\/div>

<\/div>
Accessibility controls<\/div>
Pause motion<\/div>
Motion: On<\/span><\/div><\/div>
Play motion<\/div>
Motion: Off<\/span><\/div><\/div><\/div>
Increase text contrast<\/div>
Contrast: Standard<\/span><\/div><\/div>
Reset text contrast<\/div>
Contrast: High<\/span><\/div><\/div><\/div>
<\/div>
Apply site-wide<\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n\n\n

A hero must contain either an image or a video (looping videos work best). Videos need to be on YouTube or Vimeo in order to work. Heroes can also contain any combination of a title, a subtitle (or body text), and a button, but do not require any of these elements to function. The most effective heroes, however, generally include at least a title to provide viewers context and, where applicable, a button to drive action. For accessibility and responsiveness reasons, the hero image or video should not contain any text of its own.<\/p>\n\n\n\n

Heroes can also display a caption and credit underneath them. This can be useful for providing additional context and attributing media to its creator. For captioning images, heroes can use the value of the caption field in the WordPress media library, if desired.<\/p>\n\n\n\n

Adding a Hero<\/h2>\n\n\n\n

Heroes (\"Hero) can be added from the block library, under the Component Library section. Hero content can be edited directly, and options can be set in the sidebar.<\/p>\n\n\n

\n\t