Bulma Block List

Upgrading to v1

To be compatible with Bulma, version 1 of Bulma Block List requires dart sass.

Installation

npm i -S bulma-block-list
@import "node_modules/bulma-block-list/src/block-list"; after importing Bulma.

How to use

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)

Item one
Item two
Item three

is-centered

Item one
Item two
Item three

is-right

Item one
Item two
Item three

Sizes

is-small

Item one
Item two
Item three

is-normal

Item one
Item two
Item three

is-large

Item one
Item two
Item three

Colours

is-primary

Item one
Item two
Item three

is-info

Item one
Item two
Item three

is-dark

Item one
Item two
Item three

Outlined

is-outlined

Item one
Item two
Item three

is-outlined is-primary

Item one
Item two
Item three

is-outlined is-danger

Item one
Item two
Item three

Has Radius

has-radius is-primary

Item one
Item two
Item three

has-radius is-info

Item one
Item two
Item three

has-radius is-dark

Item one
Item two
Item three

Is Highlighted

In v0.4 you can highlight the all list items or individual list items

li.is-highlighted

Item one
Item two
Item three

is-highlighted is-info

Item one
Item two
Item three

is-highlighted is-danger has-radius

Item one
Item two
Item three

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

Item one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat eu massa sodales auctor.
Item Three

li.has-icon.is-right

Item one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat eu massa sodales auctor.
Item Three

Combining styles

Item one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat eu massa sodales auctor.
Item Three

List Item Overrides

In v0.3 you can override the classes on a list item

li.is-large

Item one
Item two
Item three

li.is-primary

Item one
Item two
Item three

li.is-primary.is-outlined

Item one
Item two
Item three

Combinations

is-small is-outlined is-success is-centered

Item one
Item two
Item three

is-large is-warning is-right has-radius

Item one
Item two
Item three

ul.is-danger.is-centered

li.is-highlighted.is-large

Item one
Item two
Item three