College of Business Style Guide

Media Box 

<div class="media-box">
    <div class="media-box-image">
        <img src="/images/Hulvat-2017-2.png" alt="" />
    </div>
    <div class="media-box-text gold">
        <div class="media-box-content blog--podcast">
            <h2><a href="#">Podcast</a></h2>
            <p class="tags">Tags:
                <a href="#">Taxes</a>
                <a href="#">Leadership</a>
            </p>
        </div>
    </div><!-- end media-box-text -->
</div><!-- end media-box -->
 
<div class="media-box">
    <div class="media-box-image">
      {% block cms_override_image %}
        <img src="{{ img_src }}" alt="" />
      {% endblock cms_override_image %}
    </div>
    <div class="media-box-text {{ color }}">
        <div class="media-box-content blog--{{ media_type }}">
            <h2><a href="{{ box_url }}">{{ title }}</a></h2>
            {% if tags %}
                <p class="tags">Tags:
                  {% block cms_override_tags %}
                    {% for tag in tags %}
                        <a href="{{ tag.url }}">{{ tag.tag_name }}</a>
                    {% endfor %}
                  {% endblock cms_override_tags %}
                </p>
            {% endif %}
        </div>
    </div><!-- end media-box-text -->
</div><!-- end media-box -->
 
{
  "img_src": "/images/Hulvat-2017-2.png",
  "media_type": "podcast",
  "box_url": "#",
  "title": "Podcast",
  "color": "gold",
  "number": "two",
  "tags": {
    "1": {
      "tag_name": "Taxes",
      "url": "#"
    },
    "2": {
      "tag_name": "Leadership",
      "url": "#"
    }
  }
}
  • Content: 
    .media-box {
  position: relative;
  width: inherit;
  height: inherit;
  max-width: 100%;
  min-width: 100%;

  @media only screen and (min-width: $break-tablet) {
    max-width: 50%;
    min-width: 50%;
    overflow: hidden;
  }

  @media only screen and (min-width: $break-tablet-land) {
    max-width: calc(100% / 3);
    min-width: calc(100% / 3);
    overflow: hidden;
  }

  @media only screen and (max-width: $break-tablet-land) {
    max-width: 50%;
    min-width: 50%;
    overflow: hidden;
  }

  @media only screen and (max-width: $break-tablet) {
    max-width: 100%;
    min-width: 100%;
    overflow: hidden;
  }

  a {
    color: $white;
  }

  &-image {
    height: 100%;
    width: 100%;

    img {
      width: 100%;
      transition: transform .2s;
    }
  }

  &:hover,
  &:focus {
    .media-box-image {
      img {
        transform: scale(1.25);
      }
    }
  }

  &-text {
    position: absolute;
    background: linear-gradient(rgba(80, 83, 31, 0.6), rgba(0, 0, 0, 0.8));
    width: 100%;
    height: 100%;
    padding: $space;
    color: $white;
    bottom: 0;

    &.gold {
      background: linear-gradient(rgba(251, 221, 64, 0.8), rgba(0, 0, 0, 0.8));
    }

    &.teal {
      background: linear-gradient(rgba(136, 198, 188, 0.8), rgba(0, 0, 0, 0.8));
    }

    &.blue {
      background: linear-gradient(rgba(129, 176, 210, 0.8), rgba(0, 0, 0, 0.8));
    }

    &.brown {
      background: linear-gradient(rgba(80, 45, 14, 0.8), rgba(0, 0, 0, 0.8));
    }
  }

  &-content {
    position: absolute;
    bottom: $space-double;
    padding: 0 $space-three-quarter 0 0;
    overflow-y: hidden;
    transition: all 0.25s ease;

    h2 {
      font-size: 1.5rem;
      font-weight: bold;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;

      @media only screen and (max-width: $break-desktop) {
        font-size: calc(1.1vw + 10px);
      }

      @media only screen and (max-width: $break-tablet) {
        font-size: 1.5rem;
      }

      &::before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin: 0 $space-one-half 0 0;
      }
    }

    &.blog--podcast,
    &.podcast {
      h2 {
        &::before {
          font-family: $font-awesome;
          content: "\f2ce";
          font-size: 2.5rem;
          font-weight: normal;
        }
      }
    }

    &.article,
    &.blog--article {
      h2 {
        &::before {
          font-family: $font-awesome;
          content: "\f1ea";
          font-size: 2.5rem;
          font-weight: normal;
        }
      }
    }

    &.videos,
    &.blog--videos,
    &.blog--video {
      h2 {
        &::before {
          font-family: $font-awesome;
          content: "\f01d";
          font-size: 2.5rem;
          font-weight: normal;
        }
      }
    }

    &.blog,
    &.blog--blog {
      h2 {
        &::before {
          font-family: $font-awesome;
          content: "\f14b";
          font-size: 2.5rem;
          font-weight: normal;
          //background-image: url('/images/blog.svg');
          //background-repeat: no-repeat;
          //height: 50px;
          //width: 50px;
        }
      }
    }

    .tags {
      a {
        margin: 0 -4px 0 0;

        @media only screen and (max-width: $break-desktop) {
          font-size: calc(.8vw + 10px);
        }

        @media only screen and (max-width: $break-tablet) {
          font-size: 1rem;
        }


        &::before {
          content: ',';
          margin: 0 4px 0 0;
        }
      }

      a {
        &:first-of-type {
          &::before {
            content: '';
          }
        }
      }
    }
  }
}
  • URL: /components/raw/media_box/media_box.scss
  • Filesystem Path: components/02-pieces/12-media_box/media_box.scss
  • Size: 3.7 KB

No notes defined.