College of Business Style Guide

Hover Box Section: Zoom 

<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/Faculty@2x.png" alt="" />
            </div>
            <div class="hover-box-text gold">
                <div class="hover-box-content">
                    <h2>Bye Bye Bye</h2>
                    <p>I know that I can't take no more. It ain't no lie. I want to see you out that door. Baby bye bye bye</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/faculty_walking@2x.png" alt="" />
            </div>
            <div class="hover-box-text blue">
                <div class="hover-box-content">
                    <h2>Everybody (Backstreet's Back)</h2>
                    <p>Everybody. Rock your body. Everybody. Rock your body right. Backstreet's back, Alright!</p>
                </div>
            </div><!-- end hover-box-text -->
        </a>
    </div><!-- end hover-box -->
</section>
 
{% set number = hover_boxes_items|length %}
<section class="hover-box-wrapper-zoom" role="region" aria-label="{{ aria_label }}">
    {% block cms_override %}
        {% for hover_boxes_item in hover_boxes_items %}
            {# Don't use "with only" here, so that the hover box component
            has access to the "number" variable calculated above. #}
            {% include "@hover_box--zoom" with hover_boxes_item %}
        {% endfor %}
    {% endblock cms_override %}
</section>
 
{
  "aria_label": "Faculty and Alumni connections",
  "hover_boxes_items": [
    {
      "img_src": "/images/Faculty@2x.png",
      "title": "Bye Bye Bye",
      "content": "I know that I can't take no more. It ain't no lie. I want to see you out that door. Baby bye bye bye",
      "color": "gold"
    },
    {
      "img_src": "/images/faculty_walking@2x.png",
      "title": "Everybody (Backstreet's Back)",
      "content": "Everybody. Rock your body. Everybody. Rock your body right. Backstreet's back, Alright!",
      "color": "blue"
    }
  ]
}
  • 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.