Split Hero

Heroes

A full-width pattern designed to fill the hero or header area of a high-level or landing page. Contains title, space for an image, optional super heading, brief overview text, and optional call to action link. Media may be aligned left or right using the pattern’s toolbar. The text area slightly overlaps the image and there is an offset orange background to add a splash of color.

This pattern was intentionally designed to be a “little sibling” of the hero pattern on the homepage of utk.edu.

How to use
Specifications

Use Cases:

Reserve for home, landing, and routing pages that need to make a big visual impact.
Introduce users to the main subject of a page
Orient or introduce users to the information on your page
Give users a clear call to action—the most important link on the page
Surface important information above the fold of the page

Guidelines:

Optional superheading – Aim for 25 characters or fewer, should be supplemental to the large heading (to summarize, add context, add an editorial line for voice/tone, etc.).
Large heading – The main H1 page title. Use short words, aiming for 30 characters or fewer. As with all H1 page titles, follow best SEO practices regarding use of keywords. As the page title, this heading should convey the overall meaning of your page whether or not you use the optional super/subheadings.
Paragraph text – Orient the user to the page’s main purpose or unblock any barriers that would keep them from clicking the CTA. Aim for 25 words or fewer.
Optional call-to-action link – One link, should be a true action — something you want the user to do (not just a place for them to go).

Avoid:

This pattern should only be used as the page hero — do not place more than one per page (see accessibility note in Specifications)

Accessibility:

This pattern codes the heading field at H1 level for the page title, and it’s bad practice for accessibility and SEO to use more than one H1 per page, so be sure to use the no-title page template.

Regarding the order of the superheading and page title—be aware that assistive devices will read the H1 page title first, so once again, make sure that the page title conveys the overall meaning of the page and is not dependent on the superheading text for understanding.

Also, please include descriptive alt text for the image.

Dependencies:

This component is available on these page templates:

Blank page
Page without title

You must switch the page template from the default to one of these before you will see it as an option in the block editor.

Component Viewer

Preview various component colors, widths, and alignments.

Copy Block

Optional superheading

Split Hero

Paragraph 25 words or fewer. Use to orient users or unblock any barriers that would keep them from clicking a CTA link.

Optional CTA Link

<!-- wp:group -->
<div class="wp-block-group alignfull utkwds-hero-split"><!-- wp:media-text -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://brand.utk.edu/web-design-system/wp-content/themes/utkwds/assets/images/repeat-placeholder-1700x700.jpg" alt="" /></figure><div class="wp-block-media-text__content"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:group -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p class="utkwds-superhead">Optional superheading</p>
<!-- /wp:paragraph -->

<!-- wp:post-title /--></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p>Paragraph 25 words or fewer. Use to orient users or unblock any barriers that would keep them from clicking a CTA link.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p class="is-style-utkwds-cta-link"><a href="https://www.utk.edu/">Optional CTA Link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->