Staffordshire University Components

Lists: Icon Bullets

There are no notes for this item.

<p>A class of <code>list--icon-bullets</code> adds margin to icons for use as bullets</p>

<ul class="list--icon-bullets">
    <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
    <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
    <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
    <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
</ul>

<p>It can be combined with <code>list--inline</code> to display inline</p>

<ul class="list--icon-bullets  list--inline">
    <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
    <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
    <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
    <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
</ul>

<p>And/or <code>list--links</code> to remove underlines</p>

<ul class="list--icon-bullets  list--links">
    <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
    <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
    <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
    <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
</ul>

<ul class="list--icon-bullets  list--inline  list--links">
    <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
    <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
    <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
    <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
</ul>

<hr />

<h2 class="h4">Example in card (non-links)</h2>

<div class="card">
    <div class="card__content">
        <ul class="list--icon-bullets">
            <li><i class="icon  icon--calendar"></i><strong>Saturday 25 January 2020</strong></li>
            <li><i class="icon  icon--clock"></i>10.30am - 4pm</strong></li>

            <li><i class="icon  icon--pin"></i>Room T101<br />
                Beacon Building<br />
                Staffordshire University<br />
                College Road,<br />
                Stoke-on-Trent<br />
                ST4 2DE
            </li>

            <li><i class="icon  icon--pricetag"></i>FREE EVENT</li>
        </ul>
    </div>
</div>
 
<p>A class of <code>list--icon-bullets</code> adds margin to icons for use as bullets</p>

<ul class="list--icon-bullets">
  <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
  <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
  <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
  <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
</ul>

<p>It can be combined with <code>list--inline</code> to display inline</p>

<ul class="list--icon-bullets  list--inline">
  <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
  <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
  <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
  <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
</ul>

<p>And/or <code>list--links</code> to remove underlines</p>


<ul class="list--icon-bullets  list--links">
  <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
  <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
  <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
  <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
</ul>

<ul class="list--icon-bullets  list--inline  list--links">
  <li><a href=""><i class="icon  icon--envelope"></i>comms@staffs.ac.uk</a></li>
  <li><a href=""><i class="icon  icon--phone"></i>+44 7900 123456</a></li>
  <li><a href=""><i class="icon  icon--twitter"></i>StaffsUniNews</a></li>
  <li><a href=""><i class="icon  icon--twitter"></i>PressOffice</a></li>
</ul>

<hr/>

<h2 class="h4">Example in card (non-links)</h2>


<div class="card">
  <div class="card__content">
    <ul class="list--icon-bullets">
      <li><i class="icon  icon--calendar"></i><strong>Saturday 25 January 2020</strong></li>
      <li><i class="icon  icon--clock"></i>10.30am - 4pm</strong></li>

      <li><i class="icon  icon--pin"></i>Room T101<br/>
        Beacon Building<br/>
        Staffordshire University<br/>
        College Road,<br/>
        Stoke-on-Trent<br/>
        ST4 2DE
      </li>

      <li><i class="icon  icon--pricetag"></i>FREE EVENT</li>
    </ul>
  </div>
</div>
  • Content: 
    .list--unbulleted,
.list--unstyled {
  list-style: none;
  padding-left: 0;
}

.list--spaced {
  > li {
    margin-bottom: $spacing-lg;
  }
}

.list--inline {
  padding: 0;

  li {
    display: inline;
    margin-right: $spacing-xs;
  }
}

.list--links {
  @include line-height('normal');

  li {
    margin-bottom: $spacing-sm;
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.list--icon-bullets {
  list-style: none;
  padding: 0;

  li {
    padding-left: 1.5em;
  }

  .icon {
    float: left;
    top: 0.5em;
    margin-left: -1.5em;
  }

  a {
    display: inline-table; // prevents icon/text wrapping line
  }

  &.list--inline {
    li {
      margin-right: 1em;
    }
  }

  &.list--links {
    .icon {
      top: 0.2em;
    }
  }
}

.list--icon-bullets {

}

.list--inline-bulleted {
  padding: 0;

  li {
    display: inline;
    margin-right: $spacing-xs;

    &:before {
      content: '•';
      margin-right: $spacing-xs;
      font-weight: bold;
      color: $primary;
    }

    &:first-child {
      &:before {
        display: none;
      }
    }
  }
}



//.list-bordered-items {
//  list-style: none;
//  padding-left: 0;
//
//  li {
//    padding: $spacing-sm 0;
//    border-bottom: 1px solid $grey-light;
//  }
//}

//.list-icon-bullets {
//  list-style: none;
//  padding-left: 0;
//
//  li {
//    @include clearfix;
//    border-bottom: 1px solid $grey-light;
//  }
//
//  a {
//    @include typescale('md');
//    display: block;
//    text-decoration: none;
//    text-decoration-color: black;
//    padding: $spacing-md $spacing-md $spacing-md 3.5rem;
//
//    &:after {
//      bottom: 1.2rem;
//    }
//
//    .icon {
//      font-size: 2.5rem;
//      float: left;
//      margin-top: -0.75rem;
//      margin-left: -3.5rem;
//    }
//
//    &:hover {
//      text-decoration: underline;
//      @include link-pointy--hover;
//    }
//  }
//}
//
//.list-block {
//  list-style: none;
//  padding-left: 0;
//  margin-bottom: $spacing-4xl;
//
//  > li,
//  .item {
//    border-top: 1px solid $grey-light;
//    padding-top: $spacing-xl;
//    margin-bottom: $spacing-xl;
//  }
//
//  .item__title {
//    margin-top: 0;
//  }
//}
  • URL: /components/raw/list/_lists.scss
  • Filesystem Path: src/components/list/_lists.scss
  • Size: 2.2 KB