College of Business Style Guide

Hover Box Section: Zoom 3 

<section class="hover-box-wrapper-zoom" role="region" aria-label="Faculty and Alumni connections">

    <div class="hover-box zoom ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/graduates@2x.png" alt="" />
            </div>
            <div class="hover-box-text gold">
                <div class="hover-box-content">
                    <h2>Financial Aid</h2>
                    <p>See how the Office of Financial Aid helps provide access to a Lehigh education.</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->

    <div class="hover-box zoom ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/studentsinclass@2x.png" alt="" />
            </div>
            <div class="hover-box-text blue">
                <div class="hover-box-content">
                    <h2>Residence Life</h2>
                    <p>Learn about Lehigh Living environments, including unique theme housing options.</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->

    <div class="hover-box zoom ">
        <a href="">
            <div class="hover-box-image">
                <img src="/images/cheerleader@2x.png" alt="" />
            </div>
            <div class="hover-box-text teal">
                <div class="hover-box-content">
                    <h2>Current Students</h2>
                    <p>Connect to services, events, activities, resources and special opportunities.</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
</section>
 
{% extends '@hover_box_section--zoom' %}
 
{
  "aria_label": "Faculty and Alumni connections",
  "hover_boxes_items": [
    {
      "img_src": "/images/graduates@2x.png",
      "title": "Financial Aid",
      "content": "See how the Office of Financial Aid helps provide access to a Lehigh education.",
      "color": "gold",
      "number": "three"
    },
    {
      "img_src": "/images/studentsinclass@2x.png",
      "title": "Residence Life",
      "content": "Learn about Lehigh Living environments, including unique theme housing options.",
      "color": "blue",
      "number": "three"
    },
    {
      "img_src": "/images/cheerleader@2x.png",
      "title": "Current Students",
      "content": "Connect to services, events, activities, resources and special opportunities.",
      "color": "teal",
      "number": "three"
    }
  ]
}
  • 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.