Hero

Hero images are optional and are the first image seen at the top of a page. Heroes, depending on size, include additional options for a heading, brief text intro and up to two buttons.

Insert the block

An hero is created by first inserting the UDS Hero block onto the page and then “initializing” the block.

  • Pick the UDS Hero block from the block picker or quickly add the block to a page by typing /hero in a normal paragraph block.
  • Clicking on the switch to preview icon in the block toolbar will create the example content for you to customize.
  • You can directly edit the text for hero title, a description and a call-to-action button.

Block options

The hero block has two main options.

  • The block settings panel provides an interface to upload a background image for the hero.
  • It also contains a dropdown to control the desired size of the hero.

Hero images can either be uploaded to the media file or be used via a direct URL to a different resource.

Image Sizes

For best results, hero images should be resized and cropped to the specific dimensions of the desired hero size.

The image size in px for each hero format is:

  • Small – 1920 x 256
  • Medium – 1920 x 512
  • Large – 1920 x 684

Images that are larger than the expected format size will display from the center of the image.
Images that are cropped to 1920 x 684 generally work well for both the large and medium hero size.

Subtitles

The example content within a UDS Hero block includes an empty block called the UDS Subtitle block which can be used to add subtitle text above the hero title. This text is useful as a way to provide additional context about the page hierarchy if desired.

Add the text of the subtitle in the block options panel.

You can also chose one of three optional formats to highlight the subtitle. Those options correspond with the highlighting options that are present within a standard header tag but within the hero, the highlighting is applied to the entire text of the subtitle. Choose from:

  • Black text on a gold background
  • Black text on a white background
  • White text on a black background

Adding back missing blocks

Hero blocks can change and be reconfigured over time. Today you may not need a call to action button on your page but you might tomorrow. The hero block has some additional features which make it easy to manage this piece of content over a longer term need for published pages.

Tip 1: Keep the blocks but make them blank

If a button block is present within the UDS Hero, but the button doesn’t contain an actual link, the published result will be a hero without a button present.

The same thing applies for the subtitle block. This block will not render on the front end of the website unless there is an actual text provided in the subtitle field.

Tip 2: Add the missing block and drag it back using the block editor.

The block inserter within the UDS Hero block is difficult to spot and use under normal circumstances. If you find yourself needing to add back a missing core/group or core/buttons block, the best practice is to create those separately on the page and drag them into place using the list view panel.

Video heroes

Options for including a background video instead of a static image within a hero can be accessed by using the dedicated acf/hero-video block instead of the regular acf/hero block.

  • Although you have the choice to use any of the three available hero sizes for a video hero, generally speaking its better to use either the medium or large video format for best results.
  • Video files for a hero block can be uploaded directly to the media library but are subject to any restrictions on the file upload size that may be in place for your website. Contact your site administrator if you have concerns about your file not uploading correctly.
  • Videos need to be produced to fit the exact dimensions of the desired video hero display setting.
  • For more details on the preferred quality, frame rate, and other production specifications, please see https://brandguide.asu.edu/execution-guidelines/photo-video/specs.
  • Don’t forget to include a fall back or cover image for the video in case the end user has disabled video playback or javascript within the browser.