Steps (normal & Hero)

by James Connolly

HTML

<div class="steps featured">

  <!-- start normal -->
  <!--<div class="step-list">
    <div class="step">

      <div class="step-icon">X</div>

      <div class="step-timeline">
        <span>
          <strong>Step Title</strong><br />
          1-2 weeks
        </span>
      </div>

    </div>

    <div class="step">

      <div class="step-icon">X</div>

      <div class="step-timeline">
        <span>
          <strong>Step Title</strong><br />
          1-2 weeks
        </span>
      </div>

    </div>
  </div>
  <!-- end normal -->




  <!-- start featured -->
  <div class="step-list">
    
    <div class="step">
      <header class="step-title">
        <img src="https://via.placeholder.com/400" />
        <h3>$step_title</h3>
      </header>

      <div class="step-timeline">
        <span>$step_timeline</span>
      </div>

      <footer class="step-details">
        <p>Lorem Ipsum Dolor Sit Amet</p>
      </footer>
    </div>
    
    <div class="step">
      <header class="step-title">
        <img src="https://via.placeholder.com/400" />
        <h3>Offering and Marketing Process</h3>
      </header>

      <div class="step-timeline">
        <span>7 - 10 Business Days</span>
      </div>

      <footer class="step-details">
        <p>Lorem Ipsum Dolor Sit Amet</p>
      </footer>
    </div>
    
  </div>
  <!-- end featured -->

</div>
<!-- end steps -->

SCSS

body {
  margin: 0;
  padding: 0;
  font-family: arial, helvetica, sans-serif;
}

.steps {
  width: 100%;
  height: 100vh;
  background: white;
  position: relative;
  
  

  .step-list {
    padding: 10px;
  }
  
  .step {
    display: inline-block;
    width: 15%;
    position: relative;
    margin: 0.5%;
  }
  
  .step-icon {
    display: block;
    margin-bottom: 5px;
    margin-left: 10px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    background: red;
    color: white;
    text-align: center;
    font-size: 16px;
    border-radius: 500px;
    z-index: 20;
    position: relative;
    
    &::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 18px 11px 0 11px;
      border-color: red transparent transparent transparent;
      position: absolute;
      bottom: -15px;
      left: 50%;
      margin-left: -11px;
    }
  }

  .step-timeline {
    padding: 16px 5px 16px 30px;
    color: white;
    position: relative;

    span {
      z-index: 10;
      position: relative;
    }

    &::before,
    &::after {
      content: "";
      width: 100%;
      height: 50%;
      background: darkblue;
      position: absolute;
      left: 0;
      z-index: 1;
    }

    &::before {
      top: 0;
      transform: skewX(30deg);
    }

    &::after {
      bottom: 0;
      transform: skewX(-30deg);
    }
  }

  // featured styles
  &.featured {
    background: skyblue;

    .step {
      background: pink;
    }

    .step-title {
      text-align: center;
      margin-bottom: 15px;
      position: relative;

      img {
        width: 100%;
      }

      h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing:border-box;
        margin: 0;
        padding: 10%;
        width: 100%;
        height: 100%;
        background: #fff;
        border: 8px solid navy;
        border-radius: 5000px;
        position: absolute;
        left: 0;
        top: 0;
   ...