DNT-2930 Hero Component

https://jiraprod.duke-energy.com/browse/DNT-2930jiraprod.duke-energy.com

https://electron.duke-energy.com/components/hero/electron.duke-energy.com

Hero

Features a full-width image (light or dark) with superimposed text (light or dark contrasting). See a demo page with a site header.

Usage Guidance

Do

• Use on home pages and landing pages with multiple child pages.

• When used on pages other than Home Pages or Section Landing Pages, the headline (H1) must be the page title.

• Include a title/headline (required), a description (optional), and call-to-action link button(s) (optional).

• Ensure that images clearly communicate the concept across all breakpoints and that critical information is not cropped out.

Do Not

• Use more than ONE Hero on a page.

Toggle Component Options

Theme Black to Gray-Darker Blue-Dark to Blue Blue to Teal-Darker Green-Dark to Green Blue-Dark to Green-Dark Green-Dark to Blue-Dark Gray-Light to white Gray-Light to Gray-Lighter Teal-Light to Teal-Lighter Image Business Solar Chef Family Landscape One Person Store Solar Solar Cell Two Person Store Content Content 1 Content 2 Content 3 Too Much Content Action No Actions Primary Action Primary and Secondary Action

Say Yes to Renewables

Striving for sustainability is just smart business

START NOW

<!--
  Hero Section wrapper
  - Component below hero is required to use a white background color
-->

<section class="relative 2xl:px-24 2xl:pt-24">

  <!--
    Hero Container
  -->

  <div class="relative container-5xl flex flex-col justify-center aspect-16/12 sm:aspect-16/9 md:aspect-16/7 lg:aspect-16/6 xl:aspect-16/5 px-24 sm:px-32 md:px-48 py-64 md:py-48">

    <!--
      - Leave alt attribute empty
      - Use 'srcset' and 'sizes' attributes to optimize the hero image
    -->

    <img
      class="absolute top-0 left-0 object-cover object-right w-full h-full 2xl:rounded-lg bg-gray-light"
      src="image.jpg?w=800&as=1&bc=ffffff"
      srcset="image.jpg?w=800&as=1&bc=ffffff 800w,
              image.jpg?w=1600&as=1&bc=ffffff 1600w"
      sizes="(min-width: 768px) 1600px, 800px"
      alt=""
      width="1600"
      height="500"
      loading="lazy"
    >

    <!--
      Overlay
      - Change background gradient colors based on theme of hero
      - Default - "from-blue-dark to-blue sm:via-blue"
    -->

    <div
      class="absolute top-0 left-0 h-full w-full 2xl:rounded-l-lg md:w-3/4 bg-gradient-to-tr md:bg-gradient-to-r md:to-transparent opacity-80"
      aria-hidden="true"
    ></div>

    <!--
      Content Container
    -->

    <div class="relative w-full container-xs md:container-4xl">

      <!--
        If dark theme/gradient, text is white
          - Use "text-white"
        If light theme/gradient, text can be gray or blue
          - Use "text-gray-dark" -or- "text-blue"
        Default
          - "text-white"
      -->

      <div class="w-full md:w-1/2 text-center md:text-left">

        <!-- Hero Title
          - If this is the page title, you should use an <h1> element
          - Use an <h2> element if you already have a page title on the page
        -->
        <h2
          class="text-3xl md:text-2xl-fixed xl:text-3xl"
          id="hero-title"
        >
          Hero Title
        </h2>

        <!-- Hero Short Description-->
        <p class="text-lg xl:text-xl mt-12 lg:mt-16">
          Description goes here.
        </p>

        <!-- Hero Actions -->
        <div class="flex justify-center md:justify-start gap-16 lg:gap-24 mt-16 lg:mt-24">
          <!--
            If dark theme/gradient
              - Use "btn-primary-reversed"
            If light theme/gradient
              - Use "btn-primary"
            Default
              - "btn-primary-reversed"
          -->
          <a
            class="btn btn-primary-reversed btn-md"
            href="#"
            id="hero-primary-action"
            aria-labelledby="hero-primary-action hero-title"
          >
            Primary Action
          </a>
          <!--
            If dark theme/gradient
              - Use "btn-secondary-reversed"
            If light theme/gradient
              - Use "btn-secondary"
            Default
              - "btn-secondary-reversed"
          -->
          <a
            class="btn btn-secondary-reversed btn-sm lg:btn-md"
            href="#"
            id="hero-secondary-action"
            aria-labelledby="hero-secondary-action hero-title"
          >
            Secondary Action
          </a>
        </div>
      </div>

    </div>

  </div>

</section>

Accessibility

Labeling Expectations

• Use a unique `id=""` on the title.

• Use a unique `id=""` on the action link button(s).

• Use `aria-labelledby=""` on the link buttons referencing the id of the link button(s) and the id of the title.

Keyboard Expectations

• When you TAB into the `Hero` component, focus will go onto the link button(s).

Resources

• Web Accessibility: Links