Promotion Hero with Links

By Christine Siu

F6
hero header image ecommerce links promotion
How do I use This?

A simple promotional header containing featured links to other shopping categories.

HTML
<div class="promotion-hero">
    <div class="promotion-hero-header">
      <h1>50% off all items!</h1>
    </div>

    <div class="promotion-hero-links">
      <ul class="vertical menu promotion-hero-link-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
      <ul class="vertical menu promotion-hero-link-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
      <ul class="vertical menu promotion-hero-link-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
      <ul class="vertical menu promotion-hero-link-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
      <ul class="vertical menu promotion-hero-link-menu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </div>
  </div>


.promotion-hero {
  background-image: url('https://placehold.it/150x500');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  height: 400px;
  padding: 3rem;
}

.promotion-hero-header {
  h1 {
    background-color: $white;
    width: auto;
    padding: 1rem;
    font-weight: bold;
    display: inline-block;
  }
}

.promotion-hero-links {
  padding: 1rem;
  background-color: $white;
  border: 2px solid $black;
  display: flex;
  justify-content: space-between;
}



.promotion-hero {
  background-image: url("https://placehold.it/150x500");
  background-size: cover;
  height: 400px;
  padding: 3rem;
}

.promotion-hero-header h1 {
  background-color: #fefefe;
  width: auto;
  padding: 1rem;
  font-weight: bold;
  display: inline-block;
}

.promotion-hero-links {
  padding: 1rem;
  background-color: #fefefe;
  border: 2px solid #0a0a0a;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
JS

Similar Building Blocks

media

Large Article Header

F6
by Christine Siu
media

eCommerce Loading Button

F6
by Harry Manchanda
media

Clean Hero Slider

F6
by Ben Owen