Installation
npm i -S bulma-block-list@import "node_modules/bulma-block-list/src/block-list";after importing Bulma.
--- title: Bulma Block List subtitle: Docs layout: page menubar: menu hero_height: is-medium ---
npm i -S bulma-block-list@import "node_modules/bulma-block-list/src/block-list"; after importing Bulma.Create a ul and give it the class 'block-list' then use the modifyers to style as needed. Only some of the colours are displayed below but the scss loops through the entire Bulma $colors map.
<ul class="block-list is-small is-outlined is-success is-centered">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
Alignment
is-left (default)
is-centered
is-right
Sizes
is-small
is-normal
is-large
Colours
is-primary
is-info
is-dark
Outlined
is-outlined
is-outlined is-primary
is-outlined is-dark
Has Radius
has-radius is-primary
has-radius is-info
has-radius is-dark
Is Highlighted
In v0.4 you can highlight the all list items or individual list items
li.is-highlighted
is-highlighted is-info
is-highlighted is-danger has-radius
Has Icon
In v0.5 you can add icons
<li class="has-icon">
<span class="icon">
<i class="fas fa-plane"></i>
</span>
<span>Item one</span>
</li>
// .is-right
<li class="has-icon is-right">
<span>Item one</span>
<span class="icon">
<i class="fas fa-plane"></i>
</span>
</li>
li.has-icon
li.has-icon.is-right
Combining styles
List Item Overrides
In v0.3 you can override the classes on a list item
li.is-large
li.is-primary
li.is-primary.is-outlined
Combinations
is-small is-outlined is-success is-centered
is-large is-warning is-right has-radius
ul.is-danger.is-centered
li.is-highlighted.is-large