LibGuides Login Reusable Assets

Lists

Use lists to organize groups of similar data.

Standard lists

Standard lists can be generated here, or from within the WYSIWYG editor. You may also choose any Font Awesome icon to delineate your lists by adding the fa-ul class to the <ul> element, and fa-li class to the <li> element of any list.

  • Content
  • Content
  • Content
<ul class='fa-ul'>
   <li><i class='fa fa-li fa-check-square-o fa-spacer-right'></i>Content</li>
   <li><i class='fa fa-li fa-check-square-o fa-spacer-right'></i>Content</li>
   <li><i class='fa fa-li fa-check-square-o fa-spacer-right'></i>Content</li>
</ul>

Definition lists

Definition lists are useful in setting up simple key-value pairs. They can be oriented horizontally or vertically for large screens, with horizontal definition lists automatically stacking vertically on smaller screens.

Title
Content
Title
Content
Title
Content
<dl class=''>
<dt>Title</dt><dd>Content</dd>
<dt>Title</dt><dd>Content</dd>
<dt>Title</dt><dd>Content</dd>
</dl>

Media Lists

Media lists pair images, links, and short descriptions. They are also well-suited to pages with several subpages, where they cam serve as a strongly visual table of contents. Don't forget to replace the URL for each placeholder image with the link to an image from your Image Library.

x

  • Media Heading

    Use media lists to pair visual components with textual description.

  • Media Heading

    Use media lists to pair visual components with textual description.

<ul class='media-list'>
   <li class='media'>
      <div class='pull-left'><img class='media-object' src='http://www.placehold.it/100x100' alt=''>
      </div>
      <div class='media-body'><h4 class='media-heading'><a href='#' target='_blank'>Media Heading</a></h4><p>Use media lists to pair visual components with textual description.</p>
      </div>
   </li>
   <li class='media'>
      <div class='pull-left'><img class='media-object' src='http://www.placehold.it/100x100' alt=''></div><div class='media-body'><h4 class='media-heading'><a href='#' target='_blank'>Media Heading</a></h4><p>Use media lists to pair visual components with textual description.</p></div>
   </li>
</ul>

Simple Styled Lists

Accent colors include: .list-group-item-active (primary blue),  .list-group-item-success (green),  .list-group-item-info (light blue),  .list-group-item-warning (yellow),  .list-group-item-danger (red).

<ul class="list-group">
   <li class="list-group-item">
      <a href="">Linked list item 1</a>
   </li>
   <li class="list-group-item list-group-item-info">
      <a href="">Linked list item 1</a>
   </li>

   <li class="list-group-item list-group-item-success">
      Unlinked list item 2
   </li>
   <li class="list-group-item list-group-item-warning">
      Unlinked list item 3
   </li>
   <li class="list-group-item list-group-item-danger">
      Unlinked list item 3
   </li>
</ul>