1. Design System
2. Patterns
3. Hero

Hero

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

Draw attention to your main content.

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.

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 -->
  <picture hero="art-direction">
    <source srcset="https://upenn-library-digital-collections.netlify.app/img/collection-10.jpg" media="(min-width: 600px)" />
    <img src="https://upenn-library-digital-collections.netlify.app/img/collection-9.jpg" alt="" />
  </picture>
</pennlibs-hero>

Add a heading

<pennlibs-hero>
  <picture hero="art-direction">
    <source srcset="https://upenn-library-digital-collections.netlify.app/img/collection-10.jpg" media="(min-width: 600px)" />
    <img src="https://upenn-library-digital-collections.netlify.app/img/collection-9.jpg" alt="" />
  </picture>

  <!-- add a heading and sub heading -->
  <h1 hero="heading">Boys wearing sailor suits, playing music to a dancing turtle</h1>
  <p hero="sub-heading"><a href="/">Arnold and Deanne Kaplan Collection</a> of Early American Judaica</p>
</pennlibs-hero>

Combine with other elements

<pennlibs-hero>
  <picture hero="art-direction">
    <source srcset="https://upenn-library-digital-collections.netlify.app/img/collection-10.jpg" media="(min-width: 600px)" />
    <img src="https://upenn-library-digital-collections.netlify.app/img/collection-9.jpg" alt="" />
  </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>

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.