GOV
List Groups
Displaying lists of links
Overview
List groups are normally used to display lists of links. Below we have a .list-group ul and a .list-group ol. Often we put these inside .content-block divs as well, but this is not required.
ul and ol list groups
<ul class="list-group"> <li><a href="#">Item One</a></li> <li><a href="#">Item Two</a></li> <li><a href="#">Item Three</a></li> </ul> <ol class="list-group"> <li><a href="#">Item One</a></li> <li><a href="#">Item Two</a></li> <li><a href="#">Item Three</a></li> </ol>
Two Column List Groups
The .list-group lists can use two columns by adding the class .list-group-2-col.
Two column list group
<div class="content-block"> <ul class="list-group list-group-2-col"> <li><a href="#">Item One</a></li> <li><a href="#">Item Two</a></li> <li><a href="#">Item Three</a></li> <li><a href="#">Item Four</a></li> </ul> </div>
Spacing
Using the class .condensed uses less padding inside list group items.
Condensed list group
<div class="content-block"> <ul class="list-group list-group-2-col condensed"> <li><a href="#">Item One</a></li> <li><a href="#">Item Two</a></li> <li><a href="#">Item Three</a></li> <li><a href="#">Item Four</a></li> </ul> </div>
Links With Descriptions
Adding the class .has-descriptions makes the links slightly larger and all other text a lighter shade of gray.
-
Item One
Item one description -
Item Two
Item two description -
Item Three
Item three description -
Item Four
Item four description
List group with descriptions
<div class="content-block"> <ul class="list-group list-group-2-col has-descriptions"> <li> <a href="#">Item One</a> <br> Item one description </li> <li> <a href="#">Item Two</a> <br> Item two description </li> <li> <a href="#">Item Three</a> <br> Item three description </li> <li> <a href="#">Item Four</a> <br> Item four description </li> </ul> </div>
Icons
Add icons to your list items and give the ul the class .has-icons.
List group with icons
<div class="content-block"> <ul class="list-group list-group-2-col has-descriptions has-icons"> <li> <span class="glyphicons glyphicons-snowflake list-item-icon"></span> <a href="#">Item One</a> <br> Item one description </li> <li> <span class="glyphicons glyphicons-wrench list-item-icon"></span> <a href="#">Item Two</a> <br> Item two description </li> <li> <span class="glyphicons glyphicons-alert list-item-icon"></span> <a href="#">Item Three</a> <br> Item three description </li> <li> <span class="glyphicons glyphicons-user list-item-icon"></span> <a href="#">Item Four</a> <br> Item four description </li> </ul> </div>
Event List Groups
To display a list of events that link to details, add the class .event-list to your list group. Inside each list item there are separate divs with .event-list-date and .event-list-details.
-
Aug 28
-
Aug 28
-
Aug 29
Event list group
<ul class="list-group event-list"> <li> <div class="event-list-date"> <span class="event-list-month"> Aug </span> <span class="event-list-day"> 28 </span> </div> <div class="event-list-details"> <a href="#"> ERS Board of Trustees </a> <br> <span class="small"> 01:30 PM, Employees Retirement System Board of Trustees </span> </div> </li> <li> <div class="event-list-date"> <span class="event-list-month"> Aug </span> <span class="event-list-day"> 28 </span> </div> <div class="event-list-details"> <a href="#"> Preservation Board Meeting </a> <br> <span class="small"> 04:00 PM, Preservation Board </span> </div> </li> <li> <div class="event-list-date"> <span class="event-list-month"> Aug </span> <span class="event-list-day"> 29 </span> </div> <div class="event-list-details"> <a href="#"> Land Tax Sale 189 </a> <br> <span class="small"> 09:00 AM, Office of the Sheriff </span> </div> </li> </ul>
Feedback is anonymous.
