a fa-facebook fa-2x">

3

special lists

User list

You can use lists to display other types of content. This is a user availability list for example.

  • Terry Daniels
    CEO
  • Marjory Cambell
    CFO
  • Kevin Smith
    Software Engineer
  • Melany Wright
    Sales Manager
SHOW CODE 

<ul class="user-list">
    <li>
        <div class="user-list-avatar">
            <img src="assets/img/avatars/terry.jpg" alt="">
        </div>
        <div class="user-list-info">
            <div class="name">Terry Daniels</div>
            <div class="position">CEO</div>
        </div>
        <div class="user-list-status is-online"></div>
    </li>
    <li>
        <div class="user-list-avatar">
            <img src="assets/img/avatars/carolin.png" alt="">
        </div>
        <div class="user-list-info">
            <div class="name">Marjory Cambell</div>
            <div class="position">CFO</div>
        </div>
        <div class="user-list-status is-busy"></div>
    </li>
    <li>
        <div class="user-list-avatar">
            <img src="assets/img/avatars/ben.jpg" alt="">
        </div>
        <div class="user-list-info">
            <div class="name">Kevin Smith</div>
            <div class="position">Software Engineer</div>
        </div>
        <div class="user-list-status is-offline"></div>
    </li>
    <li>
        <div class="user-list-avatar">
            <img src="assets/img/avatars/melany.jpg" alt="">
        </div>
        <div class="user-list-info">
            <div class="name">Melany Wright</div>
            <div class="position">Sales Manager</div>
        </div>
        <div class="user-list-status is-online"></div>
    </li>
</ul>

Media list

This is another example of a user list. It is based on the Bulma media object element.

  • Terry Daniels
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Marjory Cambell
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sinum garet et setus.

  • Kevin Smith
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Melany Wright
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

SHOW CODE 

<ul class="user-media-list">
    <li>
        <article class="media">
            <figure class="media-left">
                <p class="image is-48x48">
                    <img class="img-circle" src="assets/img/avatars/terry.jpg">
                    <span class="avatar-status is-online"></span>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span>Terry Daniels</span>
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                </div>
            </div>
        </article>
    </li>
    <li>
        <article class="media">
            <figure class="media-left">
                <p class="image is-48x48">
                    <img class="img-circle" src="assets/img/avatars/carolin.png">
                    <span class="avatar-status is-busy"></span>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span>Marjory Cambell</span>
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sinum garet et setus.
                    </p>
                </div>
            </div>
        </article>
    </li>
    <li>
        <article class="media">
            <figure class="media-left">
                <p class="image is-48x48">
                    <img class="img-circle" src="assets/img/avatars/ben.jpg">
                    <span class="avatar-status is-offline"></span>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span>Kevin Smith</span>
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                </div>
            </div>
        </article>
    </li>
    <li>
        <article class="media">
            <figure class="media-left">
                <p class="image is-48x48">
                    <img class="img-circle" src="assets/img/avatars/melany.jpg">
                    <span class="avatar-status is-online"></span>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <span>Melany Wright</span>
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </p>
                </div>
            </div>
        </article>
    </li>
</ul>
Demo pages
-->