Component documentation

Basics

Components

Objects

Utilities

Use a bordered list to create a list with borders. You can make a combination of text and links. Wrap regular text in a span element to emulate the markup structure of a.

Bordered list

Apple
Banana
Pear

<ul class="c-bordered-list">
    <li>
        <span>Apple</span>
    </li>
    <li>
        <span>Banana</span>
    </li>
    <li>
        <span>Pear</span>
    </li>
</ul>
<br />
<br />
<ul class="c-bordered-list">
    <li>
        <span>Text</span>
    </li>
    <li>
        <a href="#">Link to page</a>
    </li>
    <li>
        <a href="#">Link to page</a>
    </li>
</ul>
<br />
<br />
<ul class="c-bordered-list">
    <li>
        <a href="#">Link to page</a>
    </li>
    <li>
        <a href="#">Link to page</a>
    </li>
    <li>
        <a href="#">Link to page</a>
    </li>
</ul>

ul.c-bordered-list
    li
        span Apple
    li
        span Banana
    li
        span Pear

br
br

ul.c-bordered-list
    li
        span Text
    li
        a(href="#") Link to page
    li
        a(href="#") Link to page

br
br

ul.c-bordered-list
    li
        a(href="#") Link to page
    li
        a(href="#") Link to page
    li
        a(href="#") Link to page

Bordered list horizontal

Apple
Banana
Pear

<ul class="c-bordered-list-horizontal">
    <li>
        <span>Apple</span>
    </li>
    <li>
        <span>Banana</span>
    </li>
    <li>
        <span>Pear</span>
    </li>
</ul>
<br />
<br />
<ul class="c-bordered-list-horizontal">
    <li>
        <span>Text</span>
    </li>
    <li>
        <a href="#">Link to page</a>
    </li>
    <li>
        <a href="#">Link to page</a>
    </li>
</ul>
<br />
<br />
<ul class="c-bordered-list-horizontal">
    <li>
        <a href="#">Link to page</a>
    </li>
    <li>
        <a href="#">Link to page</a>
    </li>
    <li>
        <a href="#">Link to page</a>
    </li>
</ul>

ul.c-bordered-list-horizontal
    li
        span Apple
    li
        span Banana
    li
        span Pear

br
br

ul.c-bordered-list-horizontal
    li
        span Text
    li
        a(href="#") Link to page
    li
        a(href="#") Link to page

br
br

ul.c-bordered-list-horizontal
    li
        a(href="#") Link to page
    li
        a(href="#") Link to page
    li
        a(href="#") Link to page