College of Business Style Guide

Hover Box Section 

<section class="hover-box-wrapper" role="region" aria-label="graduate, undergraduate and executive education blurbs">
    <div class="hover-box card">
        <a href="http://es.pn">
            <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>Undergraduate</h2>
                    <p>Choose your majors (one or two) to begin your acclaimed career in business.</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box card">
        <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>Graduate</h2>
                    <p>Learn about our innovative degree programs, including our accelerated one-year 1-MBA.</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
    <div class="hover-box card">
        <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>Executive Education</h2>
                    <p>Strengthen your professionals' skills with collaborative, customized learning for businesses.</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
</section>
 
<section class="hover-box-wrapper" 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: true
            }) only %}
        {% endfor %}
    {% endblock cms_override %}
</section>
 
{
  "aria_label": "graduate, undergraduate and executive education blurbs",
  "hover_boxes_items": [
    {
      "img_src": "/images/Hulvat-2017-2@2x.png",
      "url": "http://es.pn",
      "title": "Undergraduate",
      "content": "Choose your majors (one or two) to begin your acclaimed career in business.",
      "color": "blue"
    },
    {
      "img_src": "/images/group_speaker@2x.png",
      "url": "#",
      "title": "Graduate",
      "content": "Learn about our innovative degree programs, including our accelerated one-year 1-MBA.",
      "color": "gold"
    },
    {
      "img_src": "/images/postit_notes@2x.png",
      "url": "#",
      "title": "Executive Education",
      "content": "Strengthen your professionals' skills with collaborative, customized learning for businesses.",
      "color": "brown"
    }
  ]
}
  • 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.