Staffordshire University Components

IconBox

There are no notes for this item.

<div class="grid  grid-3-cols">
    <div>
        <div class="iconBox">
            <div class="iconBox__icon">
                <i class="icon">
                    <img src="../../img/icon-clock-white.svg" />
                </i>
            </div>
            <div class="iconBox__content">
                <div class="h6  iconBox__title">unthemed iconBox</div>
                <p>With any ol' random white SVG you desire</p>
            </div>
        </div>
    </div>

    <div>
        <a class="iconBox  iconBox--twitter" href="">
            <div class="iconBox__icon">
                <i class="icon  icon--twitter-white"></i>
            </div>
            <div class="iconBox__content">
                <div class="h6  iconBox__title">Follow on Twitter</div>
                <p>Staffordshire University Biological & Biodedical Sciences</p>
            </div>
        </a>
    </div>

    <div>
        <a class="iconBox  iconBox--facebook" href="">
            <div class="iconBox__icon">
                <i class="icon  icon--facebook-white"></i>
            </div>
            <div class="iconBox__content">
                <div class="h6  iconBox__title">Facebook page</div>
                <p>Our official page for students, alumni, staff and friends from any of our awards</p>
            </div>
        </a>
    </div>
</div>
 
<div class="grid  grid-3-cols">
  <div>
    <div class="iconBox">
      <div class="iconBox__icon">
        <i class="icon">
          <img src="{{ '/img/icon-clock-white.svg' | path }}" />
        </i>
      </div>
      <div class="iconBox__content">
        <div class="h6  iconBox__title">unthemed iconBox</div>
        <p>With any ol' random white SVG you desire</p>
      </div>
    </div>
  </div>

  <div>
    <a class="iconBox  iconBox--twitter" href="">
      <div class="iconBox__icon">
        <i class="icon  icon--twitter-white"></i>
      </div>
      <div class="iconBox__content">
        <div class="h6  iconBox__title">Follow on Twitter</div>
        <p>Staffordshire University Biological & Biodedical Sciences</p>
      </div>
    </a>
  </div>

  <div>
    <a class="iconBox  iconBox--facebook" href="">
      <div class="iconBox__icon">
        <i class="icon  icon--facebook-white"></i>
      </div>
      <div class="iconBox__content">
        <div class="h6  iconBox__title">Facebook page</div>
        <p>Our official page for students, alumni, staff and friends from any of our awards</p>
      </div>
    </a>
  </div>
</div>
  • Content: 
    .iconBox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: calc(#{$spacing-md} + 2.5%) $spacing-xs;
  margin: 0 0 $spacing-md;
  background: $neutral--primary;
  color: white;
  text-decoration: none;

  // --

  &__icon {
    flex: 1 1 $spacing-3xl;
    padding: 0 calc(#{$spacing-xs} + 1.25%);
    box-sizing: border-box;
    @include typescale('3xl');
    text-align: center;

    .icon, img {
      display: block;
      margin: auto auto $spacing-lg;
    }
  }

  &__content {
    flex: 1 1 80%;
    padding: 0 calc(#{$spacing-xs} + 1.25%);
    box-sizing: border-box;

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  &__title {
    margin: 0 0 $spacing-sm;
    opacity: 0.75;
  }

  // --

  &--facebook {
    background: $blue--facebook;
    color: white;
  }

  &--twitter {
    background: $blue--twitter;
    color: white;
  }
}

a.iconBox {
  &:hover {
    color: white;

    .iconBox__title {
      color: white;
      text-decoration: underline;
    }
  }
}
  • URL: /components/raw/iconbox/_iconBox.scss
  • Filesystem Path: src/components/iconBox/_iconBox.scss
  • Size: 1.1 KB