JB Framework

Lists

Unordered list

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Duis volutpat dolor accumsan est congue, vel porta leo elementum.
• Pellentesque eget tortor dictum, tincidunt sem quis, euismod erat.
• Pellentesque mollis metus eget nibh malesuada, eget tincidunt lacus feugiat.
• Vestibulum non leo nec nisi iaculis pretium. Etiam scelerisque, dui id blandit consequat, tellus ipsum hendrerit turpis, vitae feugiat neque lorem at arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu justo maximus, tincidunt mauris eget, rhoncus lorem.
• Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam fringilla malesuada condimentum. In et suscipit arcu, vel commodo nulla. Mauris non semper magna. Nullam vitae fermentum nisl, non scelerisque nisl.
• Proin lacinia urna placerat, ultricies libero sit amet, sagittis velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sollicitudin massa augue, elementum finibus risus pharetra at. In feugiat tellus sed sem posuere efficitur.

Ordered list

1. C, that's the way it begins
2. H, that's the next letter in
3. I, we're in the middle of the word and
4. C, you've already heard
5. K, now we're near the end
6. E, now we're rounding the bend
7. C-H-I-C-K-E-N
8. That's the way you spell
9. [clap clap]
10. CHICKEN
11. Proin lacinia urna placerat, ultricies libero sit amet, sagittis velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sollicitudin massa augue, elementum finibus risus pharetra at. In feugiat tellus sed sem posuere efficitur.

Description list

Consectetur

Pellentesque eget tortor dictum, tincidunt sem quis, euismod erat.

Adipiscing

Vestibulum non leo nec nisi iaculis pretium. Etiam scelerisque, dui id blandit consequat, tellus ipsum hendrerit turpis, vitae feugiat neque lorem at arcu. Lorem ipsum dolor sit amet. Proin lacinia urna placerat, ultricies libero sit amet.

Elit

Duis volutpat dolor accumsan est congue, vel porta leo elementum.

Nested lists

• Proin lacinia urna placerat, ultricies libero sit amet.
  • Proin lacinia urna placerat, ultricies libero sit amet.
    • Proin lacinia urna placerat, ultricies libero sit amet.
    • Proin lacinia urna placerat, ultricies libero sit amet.
    • Proin lacinia urna placerat, ultricies libero sit amet.
  • Proin lacinia urna placerat, ultricies libero sit amet.
    • Proin lacinia urna placerat, ultricies libero sit amet.
    • Proin lacinia urna placerat, ultricies libero sit amet.
    • Proin lacinia urna placerat, ultricies libero sit amet.
  • Proin lacinia urna placerat, ultricies libero sit amet.
    • Proin lacinia urna placerat, ultricies libero sit amet.
    • Proin lacinia urna placerat, ultricies libero sit amet.
    • Proin lacinia urna placerat, ultricies libero sit amet.

1. Proin lacinia urna placerat, ultricies libero sit amet.
   1. Proin lacinia urna placerat, ultricies libero sit amet.
      1. Proin lacinia urna placerat, ultricies libero sit amet.
      2. Proin lacinia urna placerat, ultricies libero sit amet.
      3. Proin lacinia urna placerat, ultricies libero sit amet.
   2. Proin lacinia urna placerat, ultricies libero sit amet.
      1. Proin lacinia urna placerat, ultricies libero sit amet.
      2. Proin lacinia urna placerat, ultricies libero sit amet.
      3. Proin lacinia urna placerat, ultricies libero sit amet.
   3. Proin lacinia urna placerat, ultricies libero sit amet.
      1. Proin lacinia urna placerat, ultricies libero sit amet.
      2. Proin lacinia urna placerat, ultricies libero sit amet.
      3. Proin lacinia urna placerat, ultricies libero sit amet.

• Proin lacinia urna placerat, ultricies libero sit amet.
  1. Proin lacinia urna placerat, ultricies libero sit amet.
     • Proin lacinia urna placerat, ultricies libero sit amet.
     • Proin lacinia urna placerat, ultricies libero sit amet.
     • Proin lacinia urna placerat, ultricies libero sit amet.
  2. Proin lacinia urna placerat, ultricies libero sit amet.
     • Proin lacinia urna placerat, ultricies libero sit amet.
     • Proin lacinia urna placerat, ultricies libero sit amet.
     • Proin lacinia urna placerat, ultricies libero sit amet.
  3. Proin lacinia urna placerat, ultricies libero sit amet.
     • Proin lacinia urna placerat, ultricies libero sit amet.
     • Proin lacinia urna placerat, ultricies libero sit amet.
     • Proin lacinia urna placerat, ultricies libero sit amet.

1. Proin lacinia urna placerat, ultricies libero sit amet.
   • Proin lacinia urna placerat, ultricies libero sit amet.
     1. Proin lacinia urna placerat, ultricies libero sit amet.
     2. Proin lacinia urna placerat, ultricies libero sit amet.
     3. Proin lacinia urna placerat, ultricies libero sit amet.
   • Proin lacinia urna placerat, ultricies libero sit amet.
     1. Proin lacinia urna placerat, ultricies libero sit amet.
     2. Proin lacinia urna placerat, ultricies libero sit amet.
     3. Proin lacinia urna placerat, ultricies libero sit amet.
   • Proin lacinia urna placerat, ultricies libero sit amet.
     1. Proin lacinia urna placerat, ultricies libero sit amet.
     2. Proin lacinia urna placerat, ultricies libero sit amet.
     3. Proin lacinia urna placerat, ultricies libero sit amet.

Pretty list

• John Lennon
• Paul McCartney
• George Harrison
• and
• Ringo Starr

<ul class="list--pretty">
    <li class="list--pretty__item">
        <a class="list--pretty__link" href="javascript:void(0)">John Lennon</a>
    </li>
    <li class="list--pretty__item">
        <a class="list--pretty__link" href="javascript:void(0)">Paul McCartney</a>
    </li>
    <li class="list--pretty__item">
        <a class="list--pretty__link" href="javascript:void(0)">George Harrison</a>
    </li>
    <li class="list--pretty__item">
        and
    </li>
    <li class="list--pretty__item">
        <a class="list--pretty__link" href="javascript:void(0)">Ringo Starr</a>
    </li>
</ul>

Inline list

• John Lennon
• Paul McCartney
• George Harrison
• Ringo Starr

<ul class="list--inline">
    <li>John Lennon</li>
    <li>Paul McCartney</li>
    <li>George Harrison</li>
    <li>Ringo Starr</li>
</ul>

Column list

• John Lennon
• Paul McCartney
• George Harrison
• Ringo Starr

<ul class="list--columns list--columns-2--medium list--columns-4--large">
    <li>John Lennon</li>
    <li>Paul McCartney</li>
    <li>George Harrison</li>
    <li>Ringo Starr</li>
</ul>