crossorigin="anonymous">

# Lists

Lists are a common way to organize and present data on webpages. You can easily create elegant unordered lists with ul, ordered lists with ol, and description lists with dl. ul will show bullets, ol will show numbers for ordering, and dl will indent itself if the list item is a sub item. In addition to basic lists, you can create navigation menus and custom drop down menus.

  • Item 1
  • Item 2
  1. Item 1
  2. Item 2
Main description
Sub item description
    <div class="row">
    <div class="col-4">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
    <div class="col-4">
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </div>
    <div class="col-4">
        <dl>
            <dt>Main description</dt>
            <dd>Sub item description</dd>
        </dl>
    </div>
</div>
Types

Bulleted (Default)

A standard list with bullets preceding the list item.

  • Apple
  • Google
  • Facebook
  • Microsoft
<ul>
    <li>Apple</li>
    <li>Google</li>
    <li>Facebook</li>
    <li>Microsoft</li>
</ul>

Numbered

An ordered list with numbers for each item.

  1. Apple
  2. Google
  3. Facebook
  4. Microsoft
<ol>
    <li>Apple</li>
    <li>Google</li>
    <li>Facebook</li>
    <li>Microsoft</li>
</ol>

Plain

A list with no item decorations.

  • Apple
  • Google
  • Facebook
  • Microsoft
<ul class="no-bullets">
    <li>Apple</li>
    <li>Google</li>
    <li>Facebook</li>
    <li>Microsoft</li>
</ul>

Details

A list designed for detailed descriptions.

Apple
Apple Inc. is an American multinational technology company headquartered in Cupertino, California that designs, develops, and sells consumer electronics, ...
<dl>
    <dt>Apple</dt>
    <dd>Apple Inc. is an American multinational technology company headquartered in Cupertino, California that designs, develops, and sells consumer electronics, ...</dd>
</dl>
Nested Lists

Cirrus will automatically style and pad nested lists so you don't have to. Just add the nested-list class to the div containing the list.

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.a
    • List Item 3.b
    • List Item 3.c
      • List Item 3.c.i
      • List Item 3.c.ii
      • List Item 3.c.iii
  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.a
    2. List Item 3.b
    3. List Item 3.c
      1. List Item 3.c.i
      2. List Item 3.c.ii
      3. List Item 3.c.iii
  • List Item 1
  • List Item 2
  • List Item 3
    1. List Item 3.a
    2. List Item 3.b
    3. List Item 3.c
      • List Item 3.c.i
      • List Item 3.c.ii
      • List Item 3.c.iii
<!-- Unordered List -->
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3
        <ul>
            <li>List Item 3.a</li>
            <li>List Item 3.b</li>
            <li>List Item 3.c
                <ul>
                    <li>List Item 3.c.i</li>
                    <li>List Item 3.c.ii</li>
                    <li>List Item 3.c.iii</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

# Trees

A tree is a CSS only list that lays out menu-items in a vertical menu with a toggle. A tree has children that are denoted with the tree-item class. The tree-item can then have menu list of menu-items in the tree-item-body with the title above it being a tree-item-header. The toggle is created by a simple input (checkbox or radiobutton depending on the behavior you want) with a check property.

Regular Tree (Checkboxes)

Exclusive Tree (Radio)

Mixed Tree

<!-- Normal Tree Behavior -->
<div class="tree">
    <div class="tree-item">
        <input type="checkbox" id="tree1" class="u-hide" /> <!-- Allows for multiple trees to be opened or closed -->
        <label class="tree-item-header" for="tree1"> <!-- Title for tree branch, make sure label 'for' matches with input id -->
            <span class="icon">
                <i class="fa fa-wrapper fa-chevron-right small"></i> <!-- Dropdown Icon -->
            </span>
            Trees
        </label>
        <div class="tree-item-body"> <!-- Contains the dropdown items -->
            <ul class="menu">
                <!-- Add menu-items... -->

                <li class="menu-item"> <!-- Nested Tree -->
                    <div class="tree">
                        <input type="checkbox" id="tree2" class="u-hide" />
                        <label class="tree-item-header" for="tree2">
                            <span class="icon">
                                <i class="fa fa-wrapper fa-chevron-right small"></i>
                            </span>
                            Evergreens
                        </label>
                        <div class="tree-item-body">
                            <ul class="menu">
                                <!-- Menu items... -->
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Add another tree -->

<!-- Mutually exclusive trees use radio buttons as the method of input -->
<div class="tree">
    <div class="tree-item">
        <input type="radio" id="tree3" class="u-hide" /> <!-- Note the radio button -->
        <label class="tree-item-header" for="tree3">
            <span class="icon">
                <i class="fa fa-wrapper fa-chevron-right small"></i>
            </span>
            Fruits
        </label>
        <div class="tree-item-body">
            <ul class="menu">
                <!-- Menu items... -->
            </ul>
        </div>
    </div>
</div>
<!-- Add other trees with radio inputs -->

Keep in mind that the icon is still optional, so creating a list without the dropdown indicator is as simple as excluding the icon from the header.

<div class="tree">
    <div class="tree-item">
        <input type="checkbox" id="color1" class="u-hide" />
        <label class="tree-item-header" for="color1">
            <p class="title no-margin">Color Palette 1</p>
        </label>
        <div class="tree-item-body">
            <ul class="menu">
                <li class="menu-item">
                    <a>#364b60</a>
                </li>
                <li class="menu-item">
                    <a>#169f83</a>
                </li>
                <li class="menu-item">
                    <a>#2dcc71</a>
                </li>
                <li class="menu-item">
                    <a>#e57d1f</a>
                </li>
                <li class="menu-item">
                    <a>#eec10e</a>
                </li>
            </ul>
        </div>
    </div>
</div>
Tree Outline

# Tree Nav Layout

A great way to use the tree class is by embedding it inside a tree-nav as a fixed menu on the side of the page. The best way to use the tree-nav is to embed it inside the tree-nav-body. That will serve as the container for all the child elements with the tree-nav on the left side and a tree-nav-content that will house the rest of the page contents with a scrollable view.

For mobile devices (<= 768px), the tree-nav-header will be visble to show a toggle switch to show the tree-nav.

Outline