#Lists

Besides basic styling for lists, Cirrus also ships with classes that allow lists to be incorporated with other classes in unique ways.

#Basics

Minimal styles are used to tweak the look of lists.

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.

Apple
Google
Facebook
Microsoft

<ol>
    <li>Apple</li>
    <li>Google</li>
    <li>Facebook</li>
    <li>Microsoft</li>
</ol>

Plain

A list with no item decorations using the no-bullets class.

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

List Item 1
List Item 2
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

<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>

#Menu Lists

A menu can be thought of a stylized list created to be incorporated into other Cirrus components or used standalone.

This can be created by adding the menu class to your ol or ul and adding the menu-item class to each li. To select a list item, add the selected class to the menu-item. Note that for the style to apply, you must add a child a, div, or span tag.

Structure

menu
- menu-item
  - a,div, orspan

<ul class="menu">
  <li class="menu-item selected">
    <a>One</a>
  </li>
  <li class="menu-item">
    <a>Two</a>
  </li>
  <li class="menu-item">
    <a>Three</a>
  </li>
</ul>

#Dropdown List

Drop down menus are easy to configure in Cirrus using lists. Simply wrap the button and the menu in a list-dropdown container and Cirrus will automatically style all the components for the dropdown menu. To display the menu on the right side, just add the dropdown-right class to the list-dropdown container. These dropdown menus can work straight out of the box and also support JavaScript events when needed.

Dropdown with Separate Button

<div class="list-dropdown">
    <div class="btn-group">
        <button class="btn-primary">Dropdown</button>
        <button class="btn-primary btn--sm btn-dropdown"><i class="fa fa-wrapper fa-caret-down" aria-hidden="true"></i>
        </button>
        <ul class="menu">
            <li class="menu-item"><a href="#">Google Chrome</a></li>
            <li class="menu-item"><a href="#">Firefox</a></li>
            <li class="menu-item"><a href="#">Polarity</a></li>
        </ul>
    </div>
</div>

Dropdown Right Aligned

<div class="list-dropdown dropdown-right">
    <button class="btn-primary btn-dropdown m-0">Dropdown
        <i class="fa fa-wrapper fa-caret-down" aria-hidden="true"></i>
    </button>
    <ul class="menu">
        <li class="menu-item"><a href="#">Google Chrome</a></li>
        <li class="menu-item"><a href="#">Firefox</a></li>
        <li class="menu-item"><a href="#">Polarity</a></li>
    </ul>
</div>

Dropdown Transparent Button

<div class="list-dropdown">
    <button class="btn-transparent btn-dropdown m-0">
        Dropdown <i class="fa fa-wrapper fa-caret-down" aria-hidden="true"></i></button>
    <ul class="menu">
        <li class="menu-item">
            <a href="#">Google Chrome</a>
        </li>
        <li class="menu-item">
            <a href="#">Firefox</a>
        </li>
        <li class="menu-item">
            <a href="#">Polarity</a>
        </li>
    </ul>
</div>

#Other Examples

More examples to help you get started.

Menu in Frame

<div class="frame">
    <div class="frame__body">
        <div class="frame__header">
            <div class="tile level">
                <div class="tile__icon">
                    <figure class="avatar"><img src="https://crunchbase-production-res.cloudinary.com/image/upload/c_thumb,h_256,w_256,f_auto,g_faces,z_0.7,q_auto:eco/v1398292826/a1tq244sp7uqhb5a0utg.png"></figure>
                </div>
                <div class="tile__container">
                    <p class="tile__title">Richard Hendricks.</p>
                    <p class="tile__subtitle">Founder and CEO of Pied Piper.</p>
                </div>
            </div>
        </div>
        <ul class="menu">
            <li class="divider"></li>
            <li class="menu-item selected">
                <div class="menu-addon right"></div><a href="#">News Feed</a></li>
            <li class="menu-item"><a href="#">Messenger <span class="menu-addon u-pull-right icon"><i class="fa fa-wrapper fa-ellipsis-h small" aria-hidden="true"></i></span></a></li>
            <p class="menu-title uppercase">Shortcuts</p>
            <li class="menu-item"><a href="#">Some App</a></li>
        </ul>
    </div>
</div>

Menu in Card

Unsplash Viewer

Rate this photo.

Did you like the photo?

<div class="card">
    <div class="card__container">
        <div class="card__image" style="background-image: url(&quot;https://source.unsplash.com/random/640x480&quot;);"></div>
        <div class="card__title-container">
            <p class="title">Unsplash Viewer</p><span class="subtitle">Rate this photo.</span></div>
    </div>
    <div class="content">
        <p>Did you like the photo?</p>
        <ul class="menu">
            <li class="menu-item"><a href="#"><span class="icon"><i class="fa fa-wrapper fa-check small" aria-hidden="true"></i></span>Yes</a></li>
            <li class="menu-item"><a href="#"><span class="icon"><i class="fa fa-wrapper fa-times small" aria-hidden="true"></i></span>No</a></li>
        </ul>
    </div>
</div>

Navigation Menus

<div class="frame">
    <div class="frame__header">
        <p class="title m-0">Bookmarks</p>
    </div>
    <div class="frame__body">
        <ul class="menu">
            <li class="divider" data-label="TECH"></li>
            <li class="menu-item"><a href="#">Github</a></li>
            <li class="menu-item selected">
                <a href="#">Tech News<span class="menu-addon u-pull-right icon"><i class="fa fa-wrapper fa-folder small" aria-hidden="true"></i></span></a>
                <ul class="menu">
                    <li class="menu-item"><a href="#">Hacker News</a></li>
                    <li class="menu-item"><a href="#">Lobste.rs</a></li>
                </ul>
            </li>
        </ul>
        <ul class="menu">
            <li class="divider" data-label="PROCRASTINATION"></li>
            <li class="menu-item"><a href="#">Facebook</a></li>
            <li class="menu-item"><a href="#">Twitter</a></li>
            <li class="menu-item"><a href="#">Instagram</a></li>
        </ul>
    </div>
    <div class="frame-footer"></div>
</div>

<ul class="menu">
    <li class="menu-item">
        <a href="#"><span class="menu-addon icon"><i class="fa fa-wrapper fa-clock-o" aria-hidden="true"></i></span>Real-Time</a></li>
    <li class="menu-item selected">
        <a href="#"><span class="menu-addon icon"><i class="fa fa-wrapper fa-user" aria-hidden="true"></i></span>Audience</a>
        <ul class="menu">
            <li class="menu-item"><a href="#">Overview</a></li>
            <li class="menu-item"><a href="#">Active Users</a></li>
            <li class="menu-item"><a href="#">Lifetime Value <sup>BETA</sup></a></li>
            <li class="menu-item"><a href="#">Cohort Analytics <sup>BETA</sup></a></li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="#"><span class="menu-addon icon"><i class="fa fa-wrapper fa-share-alt" aria-hidden="true"></i></span>Acquisition</a></li>
</ul>

Cirrus