Hero

Place your most important content in a prominent space, often at the top of your website.

When to use

Use a hero when you want users to immediately understand what your website offers.

How to use

Show what makes your website unique. Help users quickly decide if they're in the right place and to encourage exploration. Use clear language that your users will recognize. Avoid jargon and technical terms.

Size your images for all screens. Use art direction to display the right image for each screen size.

Credit the image. Add a caption with a short link to the source, so people can find the original.

Choose the right placement. While heroes are often used at the top with the header, you can place them anywhere you need to highlight important content.

Use art direction

<pennlibs-hero>
  <!-- use <picture>, <source>, and <img> elements for hero art direction, with a source per breakpoint -->
  <picture hero="art-direction">
    <source srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1080,/0/default.jpg 1080w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg 1440w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/2000,/0/default.jpg 2000w" media="(min-width: 48em)" sizes="100vw" />
    <source srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/460,/0/default.jpg 460w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/920,/0/default.jpg 920w" media="(max-width: 47.99em)" sizes="100vw" />
    <img src="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg" alt="A crowned figure in a yellow gown seated on a marble bench, holding a book, with the campus chapel behind" />
  </picture>
</pennlibs-hero>

Add a heading

<pennlibs-hero>
  <picture hero="art-direction">
    <source srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1080,/0/default.jpg 1080w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg 1440w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/2000,/0/default.jpg 2000w" media="(min-width: 48em)" sizes="100vw" />
    <source srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/460,/0/default.jpg 460w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/920,/0/default.jpg 920w" media="(max-width: 47.99em)" sizes="100vw" />
    <img src="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg" alt="A crowned figure in a yellow gown seated on a marble bench, holding a book, with the campus chapel behind" />
  </picture>

  <!-- add a heading and sub heading -->
  <h1 hero="heading">Class of 1906</h1>
  <p hero="sub-heading">From <a href="/">The Record of the Class of 1906</a>, a University of Pennsylvania yearbook</p>
</pennlibs-hero>

Combine with other elements

<pennlibs-hero>
  <picture hero="art-direction">
    <source srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1080,/0/default.jpg 1080w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg 1440w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/2000,/0/default.jpg 2000w" media="(min-width: 48em)" sizes="100vw" />
    <source srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/460,/0/default.jpg 460w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/920,/0/default.jpg 920w" media="(max-width: 47.99em)" sizes="100vw" />
    <img src="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg" alt="A crowned figure in a yellow gown seated on a marble bench, holding a book, with the campus chapel behind" />
  </picture>

  <!-- use attribute slot="start" to place another element at the top of the hero -->
  <pennlibs-header service-name="Website Name" theme="dark" slot="start"></pennlibs-header>
</pennlibs-hero>

Cite the source

<pennlibs-hero>
  <!-- wrap the picture in a figure, with a figcaption linking to the source -->
  <figure>
    <picture hero="art-direction">
      <source srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1080,/0/default.jpg 1080w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg 1440w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/2000,/0/default.jpg 2000w" media="(min-width: 48em)" sizes="100vw" />
      <source srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/460,/0/default.jpg 460w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/920,/0/default.jpg 920w" media="(max-width: 47.99em)" sizes="100vw" />
      <img src="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg" alt="A crowned figure in a yellow gown seated on a marble bench, holding a book, with the campus chapel behind" />
    </picture>
    <figcaption><a href="https://digitalcollections.library.upenn.edu/items/d569461c-73cc-4f68-a09c-5a9fe5a66ca0?asset-id=6c59afac-7ab4-47f4-8780-b7ac511b8679">The Record of the Class of 1906</a></figcaption>
  </figure>

  <h1 hero="heading">Class of 1906</h1>
</pennlibs-hero>

Slots

Slot	Description
start	Content to display at the start (top) of the hero.

Custom properties

Name	Description
--pl-viewport-margins-max-width	The maximum width of the hero inner content.
--pl-viewport-margins-gutter	The gutter width of the hero inner content.
--pl-hero-bg	The colour behind the image, shown while it loads and anywhere it doesn't cover.

Where it's used

• Digital Collections