Documentation
Basic
Extended
Blocks

Block list

<ul class="block-list block-list-bordered">
    <li class="block-list-item">
        <label class="form-checkbox-label">
            <input type="checkbox" class="form-check-input" />
            Buy eggs
        </label>
    </li>
    <li class="block-list-item">
        <label class="form-checkbox-label">
            <input type="checkbox" class="form-check-input" />
            Buy milk
        </label>
    </li>
    <li class="block-list-item">
        <label class="form-checkbox-label">
            <input type="checkbox" class="form-check-input" />
            Buy bread
        </label>
    </li>
    <li class="block-list-item">
        <label class="form-checkbox-label">
            <input type="checkbox" class="form-check-input" />
            Buy cheese
        </label>
    </li>
</ul>
  • Buy eggs
  • Buy milk
  • Buy bread
  • Buy cheese 
<ul class="block-list block-list-bordered">
    <li class="block-list-item">
        <span class="block-list-label">Buy eggs</span>
    </li>
    <li class="block-list-item">
        <span class="block-list-label">Buy milk</span>
    </li>
    <li class="block-list-item">
        <span class="block-list-label">Buy bread</span>
    </li>
    <li class="block-list-item">
        <span class="block-list-label">
            <i class="iconoir-check"></i>
            Buy cheese
        </span>
    </li>
</ul>
SASS reference
--r-block-list-item-border-color: var(--r-color-light-darken-5);