HTML & CSS Hero Components

(Mostly)Ready to use hero components. Copy and paste these HTML & CSS components and build your awesome website. Use this to kickstart your component and customize to meet your needs.

Back to all posts

Your Event Heading

Webinar

Tuesday, August 15, 2023

7:00 AM – 8:00 PM CST

Register Now

<section class="hero hero--event hero--image block bg-black-2 text-color-white" aria-labelledby="hero-heading">
    <div class="wrapper-lg columns gap-xl">
        <div class="hero__content col flow">
            <div class="back">
                <a class="flex flex-center" href="/blog/">
                    <div class="icon-md icon-fill-white">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
                    </div>
                    <span>Back to all posts</span>
                </a>
            </div>
            <h1 class="hero__heading" id="hero-heading">Your Event Heading</h1>
            <div>
                <div class="flex flex-center">
                    <div class="icon-sm icon-fill-white">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
                    </div>
                    <span class="ml-1 font-size-xs">Webinar</span>
                </div>
                <div class="flex flex-center">
                    <div class="icon-sm icon-fill-white">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/></svg>
                    </div>
                    <span class="ml-1 font-size-xs">Tuesday, August 15, 2023</span>
                </div>
                <div class="flex flex-center">
                    <div class="icon-sm icon-fill-white">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
                    </div>
                    <span class="ml-1 font-size-xs">7:00 AM – 8:00 PM CST</span>
                </div>
            </div>
            <a class="btn btn--primary" href="/contact/">Register Now</a>
        </div>
        <div class="hero__image col p-relative">
            <img src="https://source.unsplash.com/random/800x600?space" alt="" width="1200" height="800">
        </div>
    </div>
    <div class="hero__animation ">
        <div class="rings rings--interior"></div>
    </div>
</section>

.hero {
    position: relative;
    display: grid;

    > * {
        grid-area: 1/-1;
    }
}

.hero .col {
    margin: auto 0;
}

.hero--image .hero__image img {
    aspect-ratio: 3/2;
    width: 100%;
    object-fit: cover;
}

.hero--event .back {
    transform: translateY(-100px);
}

.hero--event .hero__image img {
    position: relative;
    z-index: 2;
}

.hero__animation {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.rings {
    position: absolute;
    z-index: 1;
}

.rings--interior {
    height: 100vw;
    width: 100vw;
    top: 50%;
    right: 0;
    transform: translateX(25%);

    @include breakpoint(md) {
        height: 400px;
        width: 400px;
        top: 75px;
    }
}

.rings::before, 
.rings::after {
    height: 100%;
    width: 100%;
    border: 2px solid $primary-color;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    border-radius: 100%;
    animation: 20s linear infinite forwards rotation;
}

.rings::before {
    transform-origin: 48% 48%;
}

.rings::after {
    transform-origin: 52% 52%;
    animation-delay: 2s;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Hero Heading

Pop-up man braid gorpcore hexagon 3 wolf moon affogato ramps, praxis portland godard fam. Air plant meditation kombucha pickled beard street art gentrify shabby chic intelligentsia pour-over same pork belly 3 wolf moon.

Contact Us

<section class="hero--centered block" aria-labelledby="hero-heading">
    <div class="wrapper-sm text-align-center text-color-white flow gap-xl">
        <h1 id="hero-heading">Hero Heading</h1>
        <div class="flow">Pop-up man braid gorpcore hexagon 3 wolf moon affogato ramps, praxis portland godard fam. Air plant meditation kombucha pickled beard street art gentrify shabby chic intelligentsia pour-over same pork belly 3 wolf moon.</div>
        <a class="btn btn--primary" href="/contact/">Contact Us</a>
    </div>
</section>

Hero Heading

Readymade quinoa ennui art party squid ascot beard umami before they sold out forage irony lumbersexual pop-up trust fund chillwave.

Contact Us

<section class="hero--centered block" aria-labelledby="hero-heading">
    <div class="wrapper-sm text-align-center text-color-white flow gap-xl">
        <h1 id="hero-heading">Hero Heading</h1>
        <div class="flow">Readymade quinoa ennui art party squid ascot beard umami before they sold out forage irony lumbersexual pop-up trust fund chillwave.</div>
        <a class="btn btn--primary" href="/contact/">Contact Us</a>
    </div>
    <div class="hero__image wrapper-md mt-4 p-relative">
        <img src="https://source.unsplash.com/random/1600x400?space" alt="" width="1200" height="800">
    </div>
</section>

.hero--centered .hero__image img {
  aspect-ratio: 4/2;
  width: 100%;
  object-fit: cover;
}

Hero Heading

Echo park wayfarers art party wolf. Put a bird on it Brooklyn wayfarers everyday carry succulents, fixie palo santo. Solarpunk kogi godard fit, wayfarers cold-pressed ascot artisan waistcoat.

Contact Us

<section class="hero hero--background-image" aria-labelledby="hero-heading">
  <div class="hero__image">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/1800x600?space" alt="" width="1800" height="600">
    </picture>
  </div>
  <div class="hero__content">
    <div class="wrapper-sm text-color-white text-align-center flow">
      <h1 id="hero-heading">Hero Heading</h1>
      <div class="flow">Echo park wayfarers art party wolf. Put a bird on it Brooklyn wayfarers everyday carry succulents, fixie palo santo. Solarpunk kogi godard fit, wayfarers cold-pressed ascot artisan waistcoat.</div>
      <a class="btn btn--primary" href="/contact/">Contact Us</a>
    </div>
  </div>
</section>

.hero--background-image {
  max-height: 500px;
  height: 50vh;
  overflow: hidden;
}

.hero--background-image::after {
  content: "";
  background-color: rgba($black,.7);
  grid-area: 1/-1;
}

.hero--background-image .hero__content {
  z-index: 1;
  margin: auto;
}

.hero--background-image .hero__image {
  position: relative;
}

.hero--background-image .hero__image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Hero Heading

Ugh tilde lyft, praxis raclette cloud bread affogato cliche venmo poutine typewriter yuccie helvetica.

Contact Us

<section class="hero--split-hero columns" aria-labelledby="hero-heading">
  <div class="hero__content col">
    <div class="wrapper-sm text-color-white flow">
      <h1 id="hero-heading">Hero Heading</h1>
      <div class="flow">Ugh tilde lyft, praxis raclette cloud bread affogato cliche venmo poutine typewriter yuccie helvetica.</div>
      <a class="btn btn--primary" href="/contact/">Contact Us</a>
    </div>
  </div>
  <div class="hero__image col">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
    </picture>
  </div>
</section>

.hero--split-hero {
  height: 70vh; 
  max-height: 500px;
  overflow: hidden;
}

.hero--split-hero .hero__content {
  margin: auto 0;
}

.hero--split-hero .hero__image {
  position: relative;
}

.hero--split-hero .hero__image img {
  position: absolute;
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Hero Heading

Ugh tilde lyft, praxis raclette cloud bread affogato cliche venmo poutine typewriter yuccie helvetica.

Contact Us

Trusted By:

<section class="hero--split-hero columns" aria-labelledby="hero-heading">
  <div class="hero__content col">
    <div class="wrapper-sm text-color-white flow">
      <h1 id="hero-heading">Hero Heading</h1>
      <div class="flow">Ugh tilde lyft, praxis raclette cloud bread affogato cliche venmo poutine typewriter yuccie helvetica.</div>
      <a class="btn btn--primary" href="/contact/">Contact Us</a>
      <div class="text-style-slub">Trusted By:</div>
      <div class="auto-grid gap-sm hero--split-hero__logos">
        <img src="//localhost:1313/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
        <img src="//localhost:1313/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
        <img src="//localhost:1313/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="img-responsive dim" width="200" height="100">
      </div>
    </div>
  </div>
  <div class="hero__image col">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
    </picture>
  </div>
</section>

.hero--split-hero {
  height: 70vh; 
  max-height: 500px;
  overflow: hidden;
}

.hero--split-hero .hero__content {
  margin: auto 0;
}

.hero--split-hero .hero__image {
  position: relative;
}

.hero--split-hero .hero__image img {
  position: absolute;
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--split-hero__logos img {
  filter: grayscale(1) brightness(0.7);
}

Hero Heading

Ugh tilde lyft, praxis raclette cloud bread affogato cliche venmo poutine typewriter yuccie helvetica.

View Services Contact Us

4.8 / 5 - from 12k reviews

<section class="hero--split-hero columns" aria-labelledby="hero-heading">
  <div class="hero__content col">
    <div class="wrapper-sm text-color-white flow">
      <h1 id="hero-heading">Hero Heading</h1>
      <div class="flow">Ugh tilde lyft, praxis raclette cloud bread affogato cliche venmo poutine typewriter yuccie helvetica.</div>
      <a class="btn btn--primary" href="/services/">View Services</a>
      <a class="btn btn--secondary" href="/contact/">Contact Us</a>
      <div>
        <div class="stars-wrapper flex">
          <div class="icon-md icon-fill-primary">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.0001 14.3916L15.1501 17.5L13.7834 11.6416L18.3334 7.69996L12.3417 7.19163L10.0001 1.66663L7.65841 7.19163L1.66675 7.69996L6.21675 11.6416L4.85008 17.5L10.0001 14.3916Z"></path>
            </svg>
          </div>
          <div class="icon-md icon-fill-primary">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.0001 14.3916L15.1501 17.5L13.7834 11.6416L18.3334 7.69996L12.3417 7.19163L10.0001 1.66663L7.65841 7.19163L1.66675 7.69996L6.21675 11.6416L4.85008 17.5L10.0001 14.3916Z"></path>
            </svg>
          </div>
          <div class="icon-md icon-fill-primary">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.0001 14.3916L15.1501 17.5L13.7834 11.6416L18.3334 7.69996L12.3417 7.19163L10.0001 1.66663L7.65841 7.19163L1.66675 7.69996L6.21675 11.6416L4.85008 17.5L10.0001 14.3916Z"></path>
            </svg>
          </div>
          <div class="icon-md icon-fill-primary">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.0001 14.3916L15.1501 17.5L13.7834 11.6416L18.3334 7.69996L12.3417 7.19163L10.0001 1.66663L7.65841 7.19163L1.66675 7.69996L6.21675 11.6416L4.85008 17.5L10.0001 14.3916Z"></path>
            </svg>
          </div>
          <div class="icon-md icon-fill-primary">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.0001 14.3916L15.1501 17.5L13.7834 11.6416L18.3334 7.69996L12.3417 7.19163L10.0001 1.66663L7.65841 7.19163L1.66675 7.69996L6.21675 11.6416L4.85008 17.5L10.0001 14.3916Z"></path>
            </svg>
          </div>
        </div>
        <div class="font-size-xs"><strong>4.8 / 5</strong> - from 12k reviews</div>
      </div>
    </div>
  </div>
  <div class="hero__image col">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
    </picture>
  </div>
</section>

.hero--split-hero {
  height: 70vh; 
  max-height: 500px;
  overflow: hidden;
}

.hero--split-hero .hero__content {
  margin: auto 0;
}

.hero--split-hero .hero__image {
  position: relative;
}

.hero--split-hero .hero__image img {
  position: absolute;
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--split-hero__logos img {
  filter: grayscale(1) brightness(0.7);
}

Hero Heading

Ugh tilde lyft, praxis raclette cloud bread affogato cliche venmo poutine typewriter yuccie helvetica.

Contact Us

<section class="hero--split-image-grid columns" aria-labelledby="hero-heading">
  <div class="hero__content col">
    <div class="wrapper-sm text-color-white flow">
      <h1 id="hero-heading">Hero Heading</h1>
      <div class="flow">Ugh tilde lyft, praxis raclette cloud bread affogato cliche venmo poutine typewriter yuccie helvetica.</div>
      <a class="btn btn--primary" href="/contact/">Contact Us</a>
    </div>
  </div>
  <div class="hero__image-grid col">
    <img class="hero__image-grid-1" src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
    <img class="hero__image-grid-2" src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
    <img class="hero__image-grid-3" src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
  </div>
</section>

.hero--split-image-grid .hero__content {
  margin: auto 0;
}

.hero--split-image-grid .hero__image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2rem;
}

.hero--split-image-grid .hero__image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
}

.hero--split-image-grid .hero__image-grid-1 {
  grid-area: 1 / 1 / 4 / 3;
  height: 80% !important;
  margin-block: auto;
}

.hero--split-image-grid .hero__image-grid-2 {
  grid-area: 1 / 3 / 2 / 4;
}

.hero--split-image-grid .hero__image-grid-3 {
  grid-area: 2 / 3 / 4 / 4;
}

Hero Heading

Bitters kinfolk master cleanse celiac pug blue bottle kickstarter vice PBR&B tofu meditation flexitarian polaroid. Listicle hoodie venmo four dollar toast fanny pack pitchfork solarpunk single-origin coffee green juice.

Contact Us

<section class="hero hero--image block bg-white" aria-labelledby="hero-heading">
    <div class="wrapper-lg columns gap-xl">
        <div class="hero__content col flow">
            <h1 class="hero__heading" id="hero-heading">Hero Heading</h1>
            <div class="hero__body flow">Bitters kinfolk master cleanse celiac pug blue bottle kickstarter vice PBR&B tofu meditation flexitarian polaroid. Listicle hoodie venmo four dollar toast fanny pack pitchfork solarpunk single-origin coffee green juice.</div>
            <a class="btn btn--primary" href="/contact/">Contact Us</a>
        </div>
        <div class="hero__image col p-relative">
            <img src="https://source.unsplash.com/random/800x600?space" alt="" width="1200" height="800">
        </div>
    </div>
</section>

.hero {
    position: relative;
    background: $white;
    display: grid;

    > * {
        grid-area: 1/-1;
    }
}

.hero .col {
    margin: auto 0;
}

.hero--image .hero__image img {
    aspect-ratio: 3/2;
    width: 100%;
    object-fit: cover;
}

HTML & CSS Hero Components

Events Hero

Your Event Heading

Hero Centered

Hero Heading

Hero Centered With Image

Hero Heading

Hero With Background Image

Hero Heading

Split Hero With Background Image

Hero Heading

Split Hero With Logos

Hero Heading

Split Hero With Reviews

Hero Heading

Split Hero With Three Images

Hero Heading

Two Column Hero With Image

Hero Heading