Component overview
The Hero component is a large visual element that can be added at the top of a page or used as a disruptive visual in the middle or bottom of a page. Hero visuals can be images or background videos. It offers multiple styling options, including parallax scrolling, call-to-action buttons and the ability to change text block placement and add spacing above and below the image.
- Heroes can be used on all page schemas: Although designed for the Section Front schema, Heroes can also be used on Section Detail, Profile Detail and Degree Detail pages.
- Heroes should have text: When used at the top of the page, Hero components should include text.
- Heroes may include a background video: The video source will need to come from a Vimeo Premium, Business or Pro account. When including a video, you must upload a static background image for mobile. Background video needs a title and description added through the schema metadata of the video asset for accessibility.
- Hero videos should be used sparingly: Videos will slow down your page, and they are not designed to be used widely across your site. Videos are restricted to Section Front schemas.
- Be mindful of your image choice: Hero images, especially when used with parallax, will cut off the top portion of your image. Be aware of how your image displays across screen sizes.
- Hero videos should be short: Videos should be approximately 15 seconds and it is recommended they start and end on the same frame for seamless looping.
- Hero videos should be relatively simple: Avoid adding text or custom images, such as logos, icons, certificates, etc. The overlaying text on top of the video will make it difficult to see these elements.
- Heroes offer a WYSIWYG but styling should be limited: The Hero is designed for a header, short sub-head and an optional call-to-action button. Text in the body copy area should use limited styling and links should be placed in the CTA area to keep the design clean and accessible.
- Keep text in Heroes short: The Hero text box does not expand to accomodate long text. Be mindful of the length of text, as anything more than 2-3 lines may be cut off on smaller screen sizes.
- Heroes offer multiple text box options: You can choose the placement of your text on your image. You can also choose to have your text placed on a grey text box or on a transparent background.
- Heroes can be full-width or min-width. When used on Section Fronts, Heroes can have two size options. On Section Detail pages, full-width and min-width Heroes will look the same.
- Heroes can be set to different heights on desktop. By default, heroes will be 100%. You can also set your hero height to 50% or 75% if you want it to take up less vertical space.
- Heroes can have additional spacing added at the top and bottom.
- Be aware of your heading structure: Hero headlines can be your H1. This option should only be used on Section Front pages to avoid duplicating H1s. If you choose it, be mindful of search engine optimization when creating your text. Make sure you do not have multiple H1s on a page if you use a Hero as an element further down on your page.
- Hero images must include alt-text: Hero images require descriptive alt-text.
- Hero anchor text (links) must be unique: Each anchor text must be unique to that link to ensure you do not create a multiple destination link accessibility error.
- Do not include links in body copy: Heroes are designed to have links in the CTA field. Including links in the body copy may cause color contrast accessibility errors.
- Heroes require a text background box. To avoid color contrast issues, all hero text will be placed on top of a black box.
- Hero videos do not have captions: Hero videos are intended to be a decorative element and will not have captions. Do not use video that shows people speaking directly into the camera to avoid confusion.
- Hero videos need text alternatives: Hero videos need a text alternative for visually-impaired users. A short title and description must be added to the schema metadata of the video asset. This information will be available to the end-user via the information icon.
- Hero videos should avoid excessive movement: Do not use videos with fast or excessive panning, shaky or unstabilized footage and quick cuts.
In order to maintain image consistency across desktop, mobile and tablet displays, you must upload three versions of the same image with the following dimensions:
- Large: 1920 x 1080 px
- Medium: 1200 x 675 px
- Small: 800 x 450 px
HERO: UNIT NAME - Purpose
- Example: HERO: HOUSING - Great Basin Hall
Example Hero components
Min-width
Text-box position: center-bottom
This is a Hero headline.
This is a Hero text box field where you may include call-to-action content for your users.
Min-width, with transparent text box
Text-box position: center-bottom
This is a Hero headline.
This is a Hero text box field where you may include call-to-action content for your users.
Full-width
Text-box position: center-center
This is a Hero headline.
This is a Hero text box field where you may include call-to-action content for your users.
Full-width, 75% height
Text-box position: center-center
This is a Hero headline.
This is a Hero text box field where you may include call-to-action content for your users.
Full-width, 50% height
Text-box position: center-center
This is a Hero headline.
This is a Hero text box field where you may include call-to-action content for your users.
Full-width, with parallax scrolling
Text-box position: center-left
This is a Hero headline.
This is a Hero text box field where you may include call-to-action content for your users.
Have questions? Need website assistance?
Email us at: cms@unr.edu