Edinburgh GEL

Grouped list

Long lists have to be split into related groups.

Lists should split into multiple columns, as well, where space allows. Sub headings should be available for long lists to aid readability.

Accessibility review

Not yet tested.

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<ul class="pagination atoz">
  <li class="active"><a href="#All">All</a></li>
  <li><a href="#A">A</a></li>
  <li><a href="#B">B</a></li>
  <li><a href="#C">C</a></li>
</ul>

<a id="All"></a>

<div class="panel panel-default">

    <div id="A" class="panel-heading">
      <h1 class="panel-title">A</h1>
    </div>
    <div class="list-group">
      <a class="list-group-item" href="#">Cras justo odio</a>
      <a class="list-group-item" href="#">Dapibus ac facilisis in</a>
      <a class="list-group-item" href="#">Morbi leo risus</a>
      <a class="list-group-item" href="#">Porta ac consectetur ac</a>
      <a class="list-group-item" href="#">Vestibulum at eros</a>
      <a class="list-group-item" href="#">Cras justo odio</a>
      <a class="list-group-item" href="#">Dapibus ac facilisis in</a>
      <a class="list-group-item" href="#">Morbi leo risus</a>
      <a class="list-group-item" href="#">Porta ac consectetur ac</a>
      <a class="list-group-item" href="#">Vestibulum at eros</a>
      <a class="list-group-item" href="#">Cras justo odio</a>
      <a class="list-group-item" href="#">Dapibus ac facilisis in</a>
      <a class="list-group-item" href="#">Morbi leo risus</a>
      <a class="list-group-item" href="#">Porta ac consectetur ac</a>
      <a class="list-group-item" href="#">Vestibulum at eros</a>
    </div>
  </div>

<div class="panel panel-default">

    <div id="B" class="panel-heading">
      <h1 class="panel-title">B</h1>
    </div>
     
      <ul class="list-group">
        <li><a class="list-group-item" href="#">Cras justo odio</a></li>
        <li><a class="list-group-item" href="#">Dapibus ac facilisis in</a></li>
        <li><a class="list-group-item" href="#">Morbi leo risus</a></li>
        <li><a class="list-group-item" href="#">Porta ac consectetur ac</a></li>
        <li><a class="list-group-item" href="#">Vestibulum at eros</a></li>
        <li><a class="list-group-item" href="#">Cras justo odio</a></li>
        <li><a class="list-group-item" href="#">Dapibus ac facilisis in</a></li>
        <li><a class="list-group-item" href="#">Morbi leo risus</a></li>
        <li><a class="list-group-item" href="#">Porta ac consectetur ac</a></li>
        <li><a class="list-group-item" href="#">Vestibulum at eros</a></li>
        <li><a class="list-group-item" href="#">Cras justo odio</a></li>
        <li><a class="list-group-item" href="#">Dapibus ac facilisis in</a></li>
        <li><a class="list-group-item" href="#">Morbi leo risus</a></li>
        <li><a class="list-group-item" href="#">Porta ac consectetur ac</a></li>
        <li><a class="list-group-item" href="#">Vestibulum at eros</a></li>
      </ul>
   
  </div>
 
<div class="panel panel-default">

    <div id="C" class="panel-heading">
      <h1 class="panel-title">C</h1>
    </div>
     
    <div class="list-group">
      <a class="list-group-item" href="#">Cras justo odio</a>
      <a class="list-group-item" href="#">Dapibus ac facilisis in</a>
      <a class="list-group-item" href="#">Morbi leo risus</a>
      <a class="list-group-item" href="#">Porta ac consectetur ac</a>
      <a class="list-group-item" href="#">Vestibulum at eros</a>
      <a class="list-group-item" href="#">Cras justo odio</a>
      <a class="list-group-item" href="#">Dapibus ac facilisis in</a>
      <a class="list-group-item" href="#">Morbi leo risus</a>
      <a class="list-group-item" href="#">Porta ac consectetur ac</a>
      <a class="list-group-item" href="#">Vestibulum at eros</a>
      <a class="list-group-item" href="#">Cras justo odio</a>
      <a class="list-group-item" href="#">Dapibus ac facilisis in</a>
      <a class="list-group-item" href="#">Morbi leo risus</a>
      <a class="list-group-item" href="#">Porta ac consectetur ac</a>
      <a class="list-group-item" href="#">Vestibulum at eros</a>
    </div>
   
  </div>