Bulma Block List

Docs

GitHub Stars GitHub forks npm

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

  • 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