<section class="hover-box-wrapper centers" role="region" aria-label="centers blurbs">
    <div class="hover-box ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/Hulvat-2017-2@2x.png" alt="" />
            </div>
            <div class="hover-box-text gold">
                <div class="hover-box-content">
                    <h2>Center for Financial Services</h2>
                    <p>Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb. - Smash Mouth</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/group_speaker@2x.png" alt="" />
            </div>
            <div class="hover-box-text brown">
                <div class="hover-box-content">
                    <h2>Center for Supply Chain Research at Lehigh</h2>
                    <p>Take this pink ribbon off my eyes. I'm exposed. And it's no big surprise. Don't you think I know. Exactly where I stand. This world is forcing me. To hold your hand. - No Doubt</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/postit_notes@2x.png" alt="" />
            </div>
            <div class="hover-box-text teal">
                <div class="hover-box-content">
                    <h2>Murray H. Goodman Center for Real Estate</h2>
                    <p>Look. If you had One shot. Or one opportunity. To seize everything you ever wanted. In one moment. Would you capture it, Or just let it slip? - Eminem</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/Hulvat-2017-2@2x.png" alt="" />
            </div>
            <div class="hover-box-text blue">
                <div class="hover-box-content">
                    <h2>Martindale Center for the Study of Private Enterprise</h2>
                    <p>Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb. - Smash Mouth</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/group_speaker@2x.png" alt="" />
            </div>
            <div class="hover-box-text gold">
                <div class="hover-box-content">
                    <h2>Dexter F. Baker Institute for Entrepreneurship, Creativity and Innovation</h2>
                    <p>Take this pink ribbon off my eyes. I'm exposed. And it's no big surprise. Don't you think I know. Exactly where I stand. This world is forcing me. To hold your hand. - No Doubt</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/postit_notes@2x.png" alt="" />
            </div>
            <div class="hover-box-text brown">
                <div class="hover-box-content">
                    <h2>Philip Rauch Center for Business Communication</h2>
                    <p>Look. If you had One shot. Or one opportunity. To seize everything you ever wanted. In one moment. Would you capture it, Or just let it slip? - Eminem</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/group_speaker@2x.png" alt="" />
            </div>
            <div class="hover-box-text teal">
                <div class="hover-box-content">
                    <h2>Financial Services Lab</h2>
                    <p>Take this pink ribbon off my eyes. I'm exposed. And it's no big surprise. Don't you think I know. Exactly where I stand. This world is forcing me. To hold your hand. - No Doubt</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/postit_notes@2x.png" alt="" />
            </div>
            <div class="hover-box-text blue">
                <div class="hover-box-content">
                    <h2>Small Business Development Center</h2>
                    <p>Look. If you had One shot. Or one opportunity. To seize everything you ever wanted. In one moment. Would you capture it, Or just let it slip? - Eminem</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box">
        <div class="hover-box-cta">
            <div class="hover-box-content">
                <h2>Visit Lehigh Business</h2>
                <ul class="cta-list">
                    <li><a href="#" class="button dark-grey" role="button">Take a Virtual Tour</a>
                    </li>
                    <li><a href="#" class="button dark-grey" role="button">Schedule Undergraduate Visit</a>
                    </li>
                    <li><a href="#" class="button dark-grey" role="button">Schedule Graduate Visit</a>
                    </li>
                </ul>
            </div>
        </div><!-- end hover-box-text -->
    </div><!-- end hover-box -->
</section>
<section class="hover-box-wrapper centers" role="region" aria-label="{{ aria_label }}">
    {% block cms_override %}
        {% for hover_boxes_item in hover_boxes_items %}
            {% include "@hover_box" with hover_boxes_item|merge({
                hover_box_card: false,
            }) only %}
        {% endfor %}
        {% include "@hover_box--cta" with hover_box_cta only %}
    {% endblock cms_override %}
</section>
{
  "aria_label": "centers blurbs",
  "hover_boxes_items": [
    {
      "img_src": "/images/Hulvat-2017-2@2x.png",
      "title": "Center for Financial Services",
      "content": "Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb. - Smash Mouth",
      "color": "gold"
    },
    {
      "img_src": "/images/group_speaker@2x.png",
      "title": "Center for Supply Chain Research at Lehigh",
      "content": "Take this pink ribbon off my eyes. I'm exposed. And it's no big surprise. Don't you think I know. Exactly where I stand. This world is forcing me. To hold your hand. - No Doubt",
      "color": "brown"
    },
    {
      "img_src": "/images/postit_notes@2x.png",
      "title": "Murray H. Goodman Center for Real Estate",
      "content": "Look. If you had One shot. Or one opportunity. To seize everything you ever wanted. In one moment. Would you capture it, Or just let it slip? - Eminem",
      "color": "teal"
    },
    {
      "img_src": "/images/Hulvat-2017-2@2x.png",
      "title": "Martindale Center for the Study of Private Enterprise",
      "content": "Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb. - Smash Mouth",
      "color": "blue"
    },
    {
      "img_src": "/images/group_speaker@2x.png",
      "title": "Dexter F. Baker Institute for Entrepreneurship, Creativity and Innovation",
      "content": "Take this pink ribbon off my eyes. I'm exposed. And it's no big surprise. Don't you think I know. Exactly where I stand. This world is forcing me. To hold your hand. - No Doubt",
      "color": "gold"
    },
    {
      "img_src": "/images/postit_notes@2x.png",
      "title": "Philip Rauch Center for Business Communication",
      "content": "Look. If you had One shot. Or one opportunity. To seize everything you ever wanted. In one moment. Would you capture it, Or just let it slip? - Eminem",
      "color": "brown"
    },
    {
      "img_src": "/images/group_speaker@2x.png",
      "title": "Financial Services Lab",
      "content": "Take this pink ribbon off my eyes. I'm exposed. And it's no big surprise. Don't you think I know. Exactly where I stand. This world is forcing me. To hold your hand. - No Doubt",
      "color": "teal"
    },
    {
      "img_src": "/images/postit_notes@2x.png",
      "title": "Small Business Development Center",
      "content": "Look. If you had One shot. Or one opportunity. To seize everything you ever wanted. In one moment. Would you capture it, Or just let it slip? - Eminem",
      "color": "blue"
    }
  ],
  "hover_box_cta": {
    "background-color": "light-grey",
    "title": "Visit Lehigh Business",
    "buttons": [
      {
        "text": "Take a Virtual Tour",
        "url": "#",
        "color": "dark-grey"
      },
      {
        "text": "Schedule Undergraduate Visit",
        "url": "#",
        "color": "dark-grey"
      },
      {
        "text": "Schedule Graduate Visit",
        "url": "#",
        "color": "dark-grey"
      }
    ]
  }
}
  • Content:
    .hover-box-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      background-color: $white;
    
      @media only screen and (min-width: $break-desktop) {
        padding: $space-triple;
      }
    
      .hover-box {
        margin: $space 0;
        border-bottom: 1px solid $grey_light;
        overflow: hidden;
    
        @media only screen and (min-width: $break-desktop) {
          margin: $space;
          border: 0;
        }
      }
    
      &-zoom {
        display: flex;
        flex-direction: column;
        justify-content: center;
    
        @media only screen and (min-width: $break-tablet) {
          flex-direction: row;
          flex-wrap: wrap;
        }
    
        @media only screen and (min-width: $break-desktop) {
          flex-direction: row;
          flex-wrap: nowrap;
        }
      }
    }
    
    .spotlight-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    
  • URL: /components/raw/hover_box_section/hover_box_section.scss
  • Filesystem Path: components/03-sections/22-hover_box_section/hover_box_section.scss
  • Size: 838 Bytes

No notes defined.