University of Arkansas for Medical Sciences Logo University of Arkansas for Medical Sciences
Communications and Marketing: Web Services

Hero Header Option

Last modified: November 3, 2026
You are here:

The Hero header is one of the page header options in the UAMS 2020 theme. See Header Options for all of the options. The UAMS Hero block itself is a separate block that can be placed anywhere on a page.

Example of a hero
Hero header option

While the UAMS Hero Block can be added to the page like any other block, we have included the option here to save you the step of having to also set the Hidden header option.

The hero must be used only as a navigational aid. It must not simply duplicate the site’s primary navigation. Feature an item that is not otherwise included on the site’s primary navigation or on an adjacent UAMS Action Bar block. Featuring one item that also exists on the primary navigation is acceptable.

Layout

The layout of every hero slide is fixed and cannot be adjusted. On tablet and desktop widths, the text is always on the left and the image is always on the right. On mobile widths, the layout stacks, with the image on top and the text below it. There are no options to swap the text and image, or to change the size or shape of either section.

Text Elements

All of the text elements in the hero are required.

Text element details:

  • Heading
  • Body
    • Character limit: 177 characters
    • The body text must be written in full sentences and must use proper punctuation.
  • Button Text
    • Character limit: 29 characters
    • The button text must be more than one word.
    • The button text must be an action phrase and must not be Click Here.
    • The button text must be capitalized using the AP Style rules for composition titles.
  • Button Link Description

Image(s)

The hero image is automatically composited with a color panel that is behind the text.

The hero image must be a photo, preferably one containing people. This can be a UAMS photo or a stock image relevant to the purpose and context of the particular slide. Logos must not be used.

We recommend you crop your image(s) to the appropriate aspect ratios before uploading it to your site. If you do not crop it, the system will automatically crop it down to those aspect ratios, which may result in an undesirable composition.

Image details:

  • Image, Desktop
    • The desktop image is required.
    • The desktop image will be displayed when the browser viewport size is at a width associated with desktop or laptop computers.
    • Minimum image dimensions: 1435×768
    • Recommended image dimensions: 2870×1536
    • The desktop image will automatically be cropped to a 1.8685:1 aspect ratio.
  • Image, Tablet
    • The tablet image is optional. If an image is not defined, the desktop image will automatically be cropped and resized to the necessary dimensions.
    • Define the tablet image if automatically cropping and resizing the desktop image would yield undesirable results.
    • The tablet image will be displayed when the browser viewport size is at a width associated with tablets.
    • Minimum image dimensions: 578×409
    • Recommended image dimensions: 1156×818
    • The tablet image will automatically be cropped to a 1.4132:1 aspect ratio.
  • Image, Mobile
    • The mobile image is optional. If an image is not defined, the desktop image will be cropped and resized to the necessary dimensions.
    • Define the mobile image if automatically cropping and resizing the desktop image would yield undesirable results.
    • The mobile image will be displayed when the browser viewport size is at a width associated with non-tablet mobile devices.
    • Minimum image dimensions: 768×432
    • Recommended image dimensions: 1536×864
    • The mobile image will automatically be cropped to a 16:9 aspect ratio.

Number of Slides

The hero can contain one to four slides, though the use of more than one slide in a hero is discouraged. User engagement with slides beyond the first has been proven to fall off significantly.

Background Color

The background color is the color of the panel that holds the text of the slide: the heading, body and button. On tablet and desktop widths, this panel is the left portion of the hero. On mobile widths, it is the lower portion of the hero, below the image. The shape and placement of this panel are fixed and mandatory. The color is the only part of it that can be changed.

The UAMS triangle pattern is automatically overlaid on the panel of every hero slide, regardless of the color chosen. It appears as a faint pattern and cannot be turned off. The text on the panel is always white.

If the background color is set to Auto, the slides will automatically be set to a predefined sequence of colors. The use of background color options other than Auto is discouraged. If background color options other than Auto are used, the first slide must be set as red, and the subsequent slides must not repeat the color of another slide in that hero.

Background color choices:

  • Auto (Sequence: Red, Blue, Green, Eggplant)
  • Blue
  • Green
  • Teal Blue
  • Eggplant
  • Maroon
  • Orange
Was this article helpful?
Dislike 0