Resa Design System

Appearance

Lists ​

v-0.0.0

Default ​

  • List item one
  • List item two
    • Sublist item one
    • Sublist item Two
html
    <ul class="list">
        <li class="list__item">
            List item one
        </li>
        <li class="list__item">
            List item two
        </li>
        <li class="list__item">
            <ul class="list">
                <li class="list__item">
                    Sublist item one
                </li>
                <li class="list__item">
                    Sublist item Two
                </li>
            </ul>
        </li>
    </ul>

Icon list ​

  • List item one
  • List item two
    • Sublist item one
    • Sublist item Two
html
<ul class="list--[iconName]">
    <li class="list__item">
        List item one
    </li>
    <li class="list__item">
        List item two
    </li>
    <li class="list__item">
        <ul class="list">
            <li class="list__item">
                Sublist item one
            </li>
            <li class="list__item">
                Sublist item Two
            </li>
        </ul>
    </li>
</ul>

Icon Color ​

  • List item one
  • List item two
    • Sublist item one
    • Sublist item Two
html
<ul class="list--[iconName] icon--[colorName]">
    <li class="list__item">
        List item one
    </li>
    <li class="list__item">
        List item two
    </li>
    <li class="list__item">
        <ul class="list">
            <li class="list__item">
                Sublist item one
            </li>
            <li class="list__item">
                Sublist item Two
            </li>
        </ul>
    </li>
</ul>

Bulleted list ​

  • List item one
  • List item two
    • Sublist item one
    • Sublist item Two
html
 <ul class="list list--bullet">
        <li class="list__item">
            List item one
        </li>
        <li class="list__item">
            List item two
        </li>
        <li class="list__item">
            <ul class="list">
                <li class="list__item">
                    Sublist item one
                </li>
                <li class="list__item">
                    Sublist item Two
                </li>
            </ul>
        </li>
    </ul>

Numbered list ​

  1. List item one
  2. List item two
    1. Sublist item one
    2. Sublist item Two
html
    <ol class="list list--numbered">
        <li class="list__item">
            List item one
        </li>
        <li class="list__item">
            List item two
        </li>
        <li class="list__item">
            <ol class="list">
                <li class="list__item">
                    Sublist item one
                </li>
                <li class="list__item">
                    Sublist item Two
                </li>
            </ol>
        </li>
    </ol>