bulma-block-list/docs/index.html

A simple scss package extending Bulma with block style list elements

---
title: Bulma Block List
subtitle: Docs
layout: page
menubar: menu
hero_height: is-medium
---

<div class="columns is-multiline" markdown="0">
    <div class="column is-12 has-text-right">
        <a href="https://github.com/chrisrhymes/bulma-block-list/stargazers">
            <img src="https://img.shields.io/github/stars/chrisrhymes/bulma-block-list?style=social" alt="GitHub Stars" />
        </a>
        <a href="https://github.com/chrisrhymes/bulma-block-list/network/members">
            <img alt="GitHub forks" src="https://img.shields.io/github/forks/chrisrhymes/bulma-block-list?label=fork&style=social">
        </a>
        <img alt="npm" src="https://img.shields.io/npm/dw/bulma-block-list">
    </div>
    <div class="column is-12">
        <div class="content">
            <h2 id="installation">Installation</h2>
            <ul>
                <li><code>npm i -S bulma-block-list</code></li>
                <li><code>@import "node_modules/bulma-block-list/src/block-list";</code> after importing Bulma.</li>
            </ul>
        </div>
    </div>
    <div class="column is-12">
        <div class="content">
            <h2 id="how-to-use">How to use</h2>
            <p>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.</p>
        </div>
<div class="highlight highlight-text-html-basic">
<pre>
&lt;<span class="pl-ent">ul</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>block-list is-small is-outlined is-success is-centered<span class="pl-pds">"</span></span>&gt;
&lt;<span class="pl-ent">li</span>&gt;Item one&lt;/<span class="pl-ent">li</span>&gt;
&lt;<span class="pl-ent">li</span>&gt;Item two&lt;/<span class="pl-ent">li</span>&gt;
&lt;<span class="pl-ent">li</span>&gt;Item three&lt;/<span class="pl-ent">li</span>&gt;
&lt;/<span class="pl-ent">ul</span>&gt;</pre>
</div>
    </div>
    <div class="column is-12">
        <p class="title is-4" id="alignment">Alignment</p>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-left (default)</p>
        <ul class="block-list is-left">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-centered</p>
        <ul class="block-list is-centered">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-right</p>
        <ul class="block-list is-right">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>

    <div class="column is-12">
        <p class="title is-4" id="sizes">Sizes</p>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-small</p>
        <ul class="block-list is-small">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-normal</p>
        <ul class="block-list is-normal">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-large</p>
        <ul class="block-list is-large">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>

    <div class="column is-12">
        <p class="title is-4" id="colours">Colours</p>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-primary</p>
        <ul class="block-list is-primary">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-info</p>
        <ul class="block-list is-info">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-dark</p>
        <ul class="block-list is-dark">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>

    <div class="column is-12">
        <p class="title is-4" id="outlined">Outlined</p>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-outlined</p>
        <ul class="block-list is-outlined">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-outlined is-primary</p>
        <ul class="block-list is-outlined is-primary">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-outlined is-dark</p>
        <ul class="block-list is-outlined is-dark">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>

    <div class="column is-12">
        <p class="title is-4" id="has-radius">Has Radius</p>
    </div>
    <div class="column is-4">
        <p class="title is-5">has-radius is-primary </p>
        <ul class="block-list has-radius is-primary">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">has-radius is-info</p>
        <ul class="block-list has-radius is-info">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">has-radius is-dark</p>
        <ul class="block-list has-radius is-dark">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>

    <div class="column is-12">
        <p class="title is-4" id="highlighted">Is Highlighted</p>
        <p>In v0.4 you can highlight the all list items or individual list items</p>
    </div>
    <div class="column is-4">
        <p class="title is-5">li.is-highlighted</p>
        <ul class="block-list">
            <li>Item one</li>
            <li class="is-highlighted">Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-highlighted is-info</p>
        <ul class="block-list is-highlighted is-info">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-highlighted is-danger has-radius</p>
        <ul class="block-list is-highlighted is-danger has-radius">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>

    <div class="column is-12">
        <p class="title is-4" id="has-icon">Has Icon</p>
        <p>In v0.5 you can add icons</p>
        <div class="highlight highlight-text-html-basic">
            <pre>
&lt;li class="has-icon"&gt;
    &lt;span class="icon"&gt;
        &lt;i class="fas fa-plane"&gt;&lt;/i&gt;
    &lt;/span&gt;
    &lt;span&gt;Item one&lt;/span&gt;
&lt;/li&gt;

// .is-right
&lt;li class="has-icon is-right"&gt;
    &lt;span&gt;Item one&lt;/span&gt;
    &lt;span class="icon"&gt;
        &lt;i class="fas fa-plane"&gt;&lt;/i&gt;
    &lt;/span&gt;
&lt;/li&gt;</pre>
        </div>
    </div>
    <div class="column is-4">
        <p class="title is-5">li.has-icon</p>
        <ul class="block-list">
            <li class="has-icon">
                <span class="icon">
                    <i class="fas fa-plane"></i>
                </span>
                <span>Item one</span>
            </li>
            <li class="has-icon">
                <span class="icon">
                    <i class="fas fa-paper-plane"></i>
                </span>
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat eu massa sodales auctor.</span>
            </li>
            <li>
                <span class="icon">
                    <i class="fas fa-plane"></i>
                </span>
                <span>Item Three</span>
            </li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">li.has-icon.is-right</p>
        <ul class="block-list">
            <li class="has-icon is-right">
                <span>Item one</span>
                <span class="icon">
                    <i class="fas fa-plane"></i>
                </span>
            </li>
            <li class="has-icon is-right">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat eu massa sodales auctor.</span>
                <span class="icon">
                    <i class="fas fa-paper-plane"></i>
                </span>
            </li>
            <li class="has-icon is-right">
                <span>Item Three</span>
                <span class="icon">
                    <i class="fas fa-plane"></i>
                </span>
            </li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">Combining styles</p>
        <ul class="block-list has-radius">
            <li class="has-icon">
                <span class="icon">
                    <i class="fas fa-plane"></i>
                </span>
                <span>Item one</span>
            </li>
            <li class="has-icon is-highlighted is-primary">
                <span class="icon">
                    <i class="fas fa-paper-plane"></i>
                </span>
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat eu massa sodales auctor.</span>
            </li>
            <li>
                <span class="icon">
                    <i class="fas fa-plane"></i>
                </span>
                <span>Item Three</span>
            </li>
        </ul>
    </div>

    <div class="column is-12">
        <p class="title is-4" id="list-item-overrides">List Item Overrides</p>
        <p>In v0.3 you can override the classes on a list item</p>
    </div>
    <div class="column is-4">
        <p class="title is-5">li.is-large</p>
        <ul class="block-list">
            <li>Item one</li>
            <li class="is-large">Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">li.is-primary</p>
        <ul class="block-list">
            <li>Item one</li>
            <li class="is-primary">Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">li.is-primary.is-outlined</p>
        <ul class="block-list">
            <li>Item one</li>
            <li class="is-primary is-outlined">Item two</li>
            <li>Item three</li>
        </ul>
    </div>

    <div class="column is-12">
        <p class="title is-4" id="combinations">Combinations</p>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-small is-outlined is-success is-centered</p>
        <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>
    </div>
    <div class="column is-4">
        <p class="title is-5">is-large is-warning is-right has-radius</p>
        <ul class="block-list is-large is-warning is-right has-radius">
            <li>Item one</li>
            <li>Item two</li>
            <li>Item three</li>
        </ul>
    </div>
    <div class="column is-4">
        <p class="title is-5">ul.is-danger.is-centered</p>
        <p class="subtitle">li.is-highlighted.is-large</p>
        <ul class="block-list is-centered is-danger">
            <li>Item one</li>
            <li class="is-danger is-highlighted is-large">Item two</li>
            <li>Item three</li>
        </ul>
    </div>
</div>