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

  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 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
  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
  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
      • 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>
#Other Examples

More examples to help you get started.

Menu in Frame

Richard Hendricks.

Founder and CEO of Pied Piper.

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