9.kss-section.kss-depth-1

9Lists

Lists of links, images and specs

List Item
List Item
List Item

.list-simple

Simple List

List Item
List Item
List Item

.list-inline

Inline list

List Item
List Item
List Item

<ul class="{$modifiers}">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

9.1.kss-section.kss-depth-2

9.1Vertically gridded

To vertically order, add the column to multiple UL elements.

Adelaide
Albany
Albury-Wodonga
Australian Capital Territory
Ballarat
Bathurst
Bendigo
Bowral-Mittagong
Brisbane
Bunbury
Bundaberg
Busselton
Cairns
Canberra-Queanbeyan
Coffs Harbour
Darwin

Devonport
Dubbo
Geelong
Geraldton
Gladstone-Tannum Sands
Gold Coast-Tweed
Hervey Bay
Hobart
Kalgoorlie-Boulder
Launceston
Mackay
Melbourne
Mildura-Wentworth
Newcastle-Maitland
Nowra-Bomaderry
Orange

Perth
Port Macquarie
Rockhampton
Shepparton-Mooroopna
Sunshine Coast
Sydney
Tamworth
Toowoomba
Townsville
Traralgon-Morwell
Wagga Wagga
Warragul-Drouin
Warrnambool
Wollongong

<div class="row">
  <ul class="col-4">
    <li>Adelaide</li>
    <li>Albany</li>
    <li>Albury-Wodonga</li>
    <li>Australian Capital Territory</li>
    <li>Ballarat</li>
    <li>Bathurst</li>
    <li>Bendigo</li>
    <li>Bowral-Mittagong</li>
    <li>Brisbane</li>
    <li>Bunbury</li>
    <li>Bundaberg</li>
    <li>Busselton</li>
    <li>Cairns</li>
    <li>Canberra-Queanbeyan</li>
    <li>Coffs Harbour</li>
    <li>Darwin</li>
  </ul>
  <ul class="col-4">
    <li>Devonport</li>
    <li>Dubbo</li>
    <li>Geelong</li>
    <li>Geraldton</li>
    <li>Gladstone-Tannum Sands</li>
    <li>Gold Coast-Tweed</li>
    <li>Hervey Bay</li>
    <li>Hobart</li>
    <li>Kalgoorlie-Boulder</li>
    <li>Launceston</li>
    <li>Mackay</li>
    <li>Melbourne</li>
    <li>Mildura-Wentworth</li>
    <li>Newcastle-Maitland</li>
    <li>Nowra-Bomaderry</li>
    <li>Orange</li>
  </ul>
  <ul class="col-4">
    <li>Perth</li>
    <li>Port Macquarie</li>
    <li>Rockhampton</li>
    <li>Shepparton-Mooroopna</li>
    <li>Sunshine Coast</li>
    <li>Sydney</li>
    <li>Tamworth</li>
    <li>Toowoomba</li>
    <li>Townsville</li>
    <li>Traralgon-Morwell</li>
    <li>Wagga Wagga</li>
    <li>Warragul-Drouin</li>
    <li>Warrnambool</li>
    <li>Wollongong</li>
  </ul>
</div>

9.2.kss-section.kss-depth-2

9.2Horizontally gridded

Horizontally ordering is easier, just add the column class to each LI element. Drawbacks to this method include the fact that if the contents of a LI element break to a second line, the it will align with the left of the bullet instead of the left of the top line of text.

Adelaide
Albany
Albury-Wodonga
Australian Capital Territory
Ballarat
Bathurst
Bendigo
Bowral-Mittagong
Brisbane
Bunbury
Bundaberg
Busselton
Cairns
Canberra-Queanbeyan
Coffs Harbour
Darwin
Devonport
Dubbo
Geelong
Geraldton
Gladstone-Tannum Sands
Gold Coast-Tweed
Hervey Bay
Hobart
Kalgoorlie-Boulder
Launceston
Mackay
Melbourne
Mildura-Wentworth
Newcastle-Maitland
Nowra-Bomaderry
Orange
Perth
Port Macquarie
Rockhampton
Shepparton-Mooroopna
Sunshine Coast
Sydney
Tamworth
Toowoomba
Townsville
Traralgon-Morwell
Wagga Wagga
Warragul-Drouin
Warrnambool
Wollongong

<ul class="row">
  <li class="col-4">Adelaide</li>
  <li class="col-4">Albany</li>
  <li class="col-4">Albury-Wodonga</li>
  <li class="col-4">Australian Capital Territory</li>
  <li class="col-4">Ballarat</li>
  <li class="col-4">Bathurst</li>
  <li class="col-4">Bendigo</li>
  <li class="col-4">Bowral-Mittagong</li>
  <li class="col-4">Brisbane</li>
  <li class="col-4">Bunbury</li>
  <li class="col-4">Bundaberg</li>
  <li class="col-4">Busselton</li>
  <li class="col-4">Cairns</li>
  <li class="col-4">Canberra-Queanbeyan</li>
  <li class="col-4">Coffs Harbour</li>
  <li class="col-4">Darwin</li>
  <li class="col-4">Devonport</li>
  <li class="col-4">Dubbo</li>
  <li class="col-4">Geelong</li>
  <li class="col-4">Geraldton</li>
  <li class="col-4">Gladstone-Tannum Sands</li>
  <li class="col-4">Gold Coast-Tweed</li>
  <li class="col-4">Hervey Bay</li>
  <li class="col-4">Hobart</li>
  <li class="col-4">Kalgoorlie-Boulder</li>
  <li class="col-4">Launceston</li>
  <li class="col-4">Mackay</li>
  <li class="col-4">Melbourne</li>
  <li class="col-4">Mildura-Wentworth</li>
  <li class="col-4">Newcastle-Maitland</li>
  <li class="col-4">Nowra-Bomaderry</li>
  <li class="col-4">Orange</li>
  <li class="col-4">Perth</li>
  <li class="col-4">Port Macquarie</li>
  <li class="col-4">Rockhampton</li>
  <li class="col-4">Shepparton-Mooroopna</li>
  <li class="col-4">Sunshine Coast</li>
  <li class="col-4">Sydney</li>
  <li class="col-4">Tamworth</li>
  <li class="col-4">Toowoomba</li>
  <li class="col-4">Townsville</li>
  <li class="col-4">Traralgon-Morwell</li>
  <li class="col-4">Wagga Wagga</li>
  <li class="col-4">Warragul-Drouin</li>
  <li class="col-4">Warrnambool</li>
  <li class="col-4">Wollongong</li>
</ul>