- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
mass media
All-in-one Marketing app
To create a basic list, jus create a ul or a
ol structure with several li elements
nested inside. The result is a simple list, without bullets or
numbers.
If you dont want to create a standard bulleted list, just wrap the
list structure we saw previsously with a .content
div element. Bullets will then show. Numbers will be
also be shown if it is an ordered list.
<div class="content">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
You can customize the glyph or bullet being shown at the left of
unordered list items. You can replace it with a font icon. Add the
.icon-bullet-list class to an unordered list to
activate it. Default icon is fa fa-circle-o. It could
be anything else, you just have to make the changes in the related
css snippet.
<ul class="icon-bullet-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
You can build customized lists with solid lists. However, it doesnt
rely on ul or ol for the structure, but
rather on div. You can have anything you want as a
bullet, including icons and images. Check the code sample for more
details.
<div class="solid-list">
<div class="solid-list-item">
<div class="list-bullet">
<i class="sl sl-icon-check"></i>
</div>
<div class="list-text">
This is a list item text
</div>
</div>
<div class="solid-list-item">
<div class="list-bullet">
<i class="sl sl-icon-check"></i>
</div>
<div class="list-text">
This is another list item text
</div>
</div>
<div class="solid-list-item">
<div class="list-bullet">
<i class="sl sl-icon-check"></i>
</div>
<div class="list-text">
This is a third list item text
</div>
</div>
</div>
You can make a list display horizontally. Just add the
.inline-list class to the ul element. List
separators are made of font awesome icons. You are free to change
them with an appropriate element.
<div class="inline-list">
<div>Item 1</div>
<i class="inline-bullet fa fa-circle"></i>
<div>Item 2</div>
<i class="inline-bullet fa fa-circle"></i>
<div>Item 3</div>
<i class="inline-bullet fa fa-circle"></i>
<div>Item 4</div>
<i class="inline-bullet fa fa-circle"></i>
<div>Item 5</div>
</div>
List blocks are very handy and act as interactive lists, such as
menus or options. They can also have badges appended to list items.
Here is the structure of a minimal list block. Active list items are
by default highlighted with the $primary color.
<ul class="list-block minimal">
<li class="is-active"><a>This is a list block item</a> <span class="b-badge is-primary">9</span></li>
<li><a>It is very handy for menus</a></li>
<li><a>Use it as a sticky element</a></li>
<li><a>It's cool</a> <span class="b-badge is-primary">5</span></li>
<li><a>Support team is great</a></li>
</ul>
A list block can appear like a small panel with a light shadow. This is the list block default behaviour.
<ul class="list-block">
<li class="is-active"><a>This is a list block item</a> <span class="b-badge rounded is-primary">9</span></li>
<li><a>It is very handy for menus</a></li>
<li><a>Use it as a sticky element</a></li>
<li><a>It's cool</a> <span class="b-badge rounded is-primary">5</span></li>
<li><a>Support team is great</a></li>
</ul>
You can add icons to a list block element items. Insert the icon before the item's text. It can be from any icon family.
<ul class="list-block">
<li class="is-active"><a><i class="sl sl-icon-star mr-20"></i> This is a list block item</a></li>
<li><a><i class="sl sl-icon-trophy mr-20"></i> It is very handy for menus</a></li>
<li><a><i class="sl sl-icon-cup mr-20"></i> Use it as a sticky element</a></li>
<li><a><i class="sl sl-icon-badge mr-20"></i> It's cool</a></li>
<li><a><i class="sl sl-icon-support mr-20"></i> Support team is great</a></li>
</ul>
Add the .bordered class to a list block to make its
items bordered.
<ul class="list-block bordered">
<li class="is-active"><a>This is a list block item</a></li>
<li><a>It is very handy for menus</a></li>
<li><a>Use it as a sticky element</a></li>
<li><a>It's cool</a></li>
<li><a>Support team is great</a></li>
</ul>
You can change the background color of active items. In order to do
this, add the .is-secondary or the
.is -accent class to the ul element. The
list block active background color defaults to
$primary.
Level is a versatile component brought by Bulma. It basically
imitates the behaviour of an inline list. However, you can insert
almost any element inside a level. The default level has two parts :
.level-left and .level-right. Each one of
these parts contains level items. By default, level items are
displayed vertically on mobile. Check the code sample for more
details about level structure.
<nav class="level">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>123</strong> tasks
</p>
</div>
<div class="level-item">
<div class="field has-addons">
<p class="control no-margin-bottom">
<input class="input" type="text" placeholder="Find a task">
</p>
<p class="control">
<button class="button btn-align accent-btn raised">
Search
</button>
</p>
</div>
</div>
</div>
<!-- Right side -->
<div class="level-right">
<p class="level-item"><i class="sl sl-icon-grid is-icon-md"></i></p>
<p class="level-item"><i class="sl sl-icon-user is-icon-md"></i></p>
<p class="level-item"><i class="sl sl-icon-picture is-icon-md"></i></p>
<p class="level-item"><i class="sl sl-icon-check is-icon-md"></i></p>
<p class="level-item"><a class="button btn-align accent-btn raised">New task</a></p>
</div>
</nav>
A level can easily be turned into a navigation bar. Add the class
.nav-level to the .level element.
<nav class="level nav-level">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<p class="subtitle is-5">
<strong>123</strong> tasks
</p>
</div>
<div class="level-item">
<div class="field has-addons">
<p class="control no-margin-bottom">
<input class="input" type="text" placeholder="Find a task">
</p>
<p class="control">
<button class="button btn-align accent-btn raised">
Search
</button>
</p>
</div>
</div>
</div>
<!-- Right side -->
<div class="level-right">
<p class="level-item"><i class="sl sl-icon-grid is-icon-md"></i></p>
<p class="level-item"><i class="sl sl-icon-user is-icon-md"></i></p>
<p class="level-item"><i class="sl sl-icon-picture is-icon-md"></i></p>
<p class="level-item"><i class="sl sl-icon-check is-icon-md"></i></p>
<p class="level-item"><a class="button btn-align accent-btn raised">New task</a></p>
</div>
</nav>
Level items can be centered. To achieve this, remove
.level-left and .level-right wrappers. All
level items must be direct children of the
.level element.
<nav class="level centered-level">
<p class="level-item has-text-centered">
<a class="link is-info">Projects</a>
</p>
<p class="level-item has-text-centered">
<a class="link is-info">Tasks</a>
</p>
<p class="level-item has-text-centered">
<img src="assets/img/logos/logo-grayscale.png" alt="">
</p>
<p class="level-item has-text-centered">
<a class="link is-info">Team</a>
</p>
<p class="level-item has-text-centered">
<a class="link is-info">Documents</a>
</p>
</nav>
The level's inline layout can be kept on mobile, instead of the
stacking behaviour. Simply add the modifier
.is-mobile to the .level element. Reduce
your screen size to see it in action.
<nav class="level is-mobile">
<p class="level-item has-text-centered">
<a class="link is-info"><i class="fa fa-facebook fa-2x"></i></a>
</p>
<p class="level-item has-text-centered">
<a class="link is-info"><i class="fa fa-twitter fa-2x"></i></a>
</p>
<p class="level-item has-text-centered">
<a class="link is-info"><i class="fa fa-linkedin fa-2x"></i></a>
</p>
<p class="level-item has-text-centered">
<a class="link is-info"><i class="fa fa-dribbble fa-2x"></i></a>
</p>
<p class="level-item has-text-centered">
<a class="link is-info"><i class="fa fa-github fa-2x"></i></a>
</p>
</nav>
You can use lists to display other types of content. This is a user availability list for example.
<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>
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.
<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>
