A hero is one of the first things people see when they visit our sites. It can contain a heading, description and image.

Demo

Science

Scientists Unlock Secrets of H-bomb Element Einsteinium Read More

<div class="mb-6 md:mb-0" data-track-gtm="Featured Top">
  <div class="max-w-full bg-cover bg-no-repeat bg-center bg-scroll" style="background-image: url(https://cdn.hswstatic.com/gif/einsteinium.jpg);">
    <div class="max-w-full  bg-gradient-to-r from-black to-transparent bg-opacity-65 text-white lg:py-4">
      <div class="w-full px-4 lg:w-11/12 w-max-1600 mx-auto">
        <div class="flex flex-col justify-end md:justify-center items-start min-h-24 md:min-h-30 xxl:min-h-35 lg:w-3/4 px-4 py-4 md:py-12">
          <h1 class="uppercase text-lg leading-tighter mb-2 lg:text-xl md:mb-4 xl:mb-5">Science</h1>
          <a class="text-white hover:text-white animated-underline after:bg-white mb-6 xl:mb-8 text-3xl font-bold md:font-normal md:text-5xl xl:text-6xl font-headline leading-tighter" style="text-shadow: 2px 3px rgba(0, 0, 0, 0.75);" href="https://science.howstuffworks.com/einsteinium.htm" data-track-gtm="Headline">Scientists Unlock Secrets of H-bomb Element Einsteinium</a><a class="btn py-2 px-7 xl:py-3 xl:px-10 text-sm xl:text-lg" href="https://science.howstuffworks.com/einsteinium.htm">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

/* HSW components use Tailwind! 
Individual utility classes are added to the HTML. */

No JS! 😀

Note

Also referred to as a 'Jumbotron'.
The standard hero is located on all category pages.

States & Variations

Homepage Hero

There's a Pooping Man in the Catalan Nativity Scene

<div class="mb-8 lg:mb-0 lg:col-span-3" data-track-gtm="Featured">
  <a href="https://people.howstuffworks.com/culture-traditions/holidays-christmas/pooping-man-catalan-nativity-scene.htm" class="group animated-underline-heavy">
    <div class="relative">
      <picture>
        <source media="(max-width: 320px)" srcset="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhZ2VuZXIuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjozMjB9LCJ0b0Zvcm1hdCI6ImF2aWYifX0=" type="image/avif"><source media="(min-width: 321px) and (max-width: 599px)" srcset="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhZ2VuZXIuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo0MjB9LCJ0b0Zvcm1hdCI6ImF2aWYifX0=" type="image/avif"><source media="(min-width: 600px)" srcset="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhZ2VuZXIuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo5ODB9LCJ0b0Zvcm1hdCI6ImF2aWYifX0=" type="image/avif">
        <source media="(max-width: 320px)" srcset="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhZ2VuZXIuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjozMjB9fX0="><source media="(min-width: 321px) and (max-width: 599px)" srcset="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhZ2VuZXIuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo0MjB9fX0="><source media="(min-width: 600px)" srcset="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhZ2VuZXIuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo5ODB9fX0=">
        <img class=" " src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhZ2VuZXIuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo5ODB9fX0=" alt="There's a Pooping Man in the Catalan Nativity Scene" width="980" height="551" border="0">
      </picture>
      <noscript>
        "<img src="https://media.hswstatic.com/eyJidWNrZXQiOiJjb250ZW50Lmhzd3N0YXRpYy5jb20iLCJrZXkiOiJnaWZcL2NhZ2VuZXIuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjo5ODB9fX0=" width="980" alt="There's a Pooping Man in the Catalan Nativity Scene" border="0">"
      </noscript>
      <div class="absolute w-100 bottom-0 left-0 right-0 bg-gradient-to-t from-royal-blue transition-all ease-in-out duration-250 group-hover:from-dark-blue p-6">
        <p class="text-3xl leading-tight mb-0 text-white md:font-bold lg:text-4xl z-10 line-clamp-3 font-headline" style="text-shadow: 2px 2px 0px #2B2B5C;">There's a Pooping Man in the Catalan Nativity Scene</p>
      </div>
    </div>
  </a>
</div>

Anatomy

Hero
Hero Category
Hero Heading/Post Title
Hero Button