Rhythm UI Docs Github

Getting Started

Installation Colours Typography Utilities

Components

Alert Avatar Badge Button Card Drawer Grid Image Input Lists Navigation Modal Slider Rating Toast

List

Lists are used to display items in an orderly manner.

Ordered list

ordered-list - Main class; to be given to the ol element which has the list items

list-title - To be given if there's a heading for the list items

    Fun Games
  1. Tumblin dice
  2. Chameleon
  3. Ooga Booga
  4. Fastrack
  5. Geistz

<ol class="ordered-list">
    <div class="list-title">Fun Games</div>
    <div class="divider-black"></div>
    <li>Tumblin dice</li>
    <li>Chameleon</li>
    <li>Ooga Booga</li>
    <li>Fastrack</li>
    <li>Geistz</li>
</ol>

Unordered list

unordered-list - Main class; to be given to the ul element which has the list items

    Group Games (4+)
  • Taboo
  • Tsuro
  • Bang - The dice game
  • Coup
  • Hail Hydra

<ul class="unordered-list">
    <div class="list-title">Group Games</div>
    <div class="divider-black"></div>
    <li>Taboo</li>
    <li>Tsuro</li>
    <li>Bang - The dice game</li>
    <li>Coup</li>
    <li>Hail Hydra</li>
</ul>

List with an image as bullet

image-list - Main class; to be given to the ul element which has the list items; feel free to override the image by writing your own CSS

    2 player games
  • Jaipur
  • Lost cities
  • Hanamikoji
  • Onitama
  • Abalone

<ul class="image-list">
    <div class="list-title">2 player games</div>
    <div class="divider-black"></div>
    <li>Jaipur</li>
    <li>Lost cities</li>
    <li>Hanamikoji</li>
    <li>Onitama</li>
    <li>Abalone</li>
</ul>

List without any numbering / bullets

notype-list - Main class; to be given to the ul / ol element which has the list items

    Cooperative games
  • Codenames
  • Cahoots
  • Pandemic
  • Forbidden Island

<ul class="notype-list">
    <div class="list-title">Cooperative games</div>
    <div class="divider-black"></div>
    <li>Codenames</li>
    <li>Cahoots</li>
    <li>Pandemic</li>
    <li>Forbidden Island</li>
</ul>

Nested list

list-subtitle - To be given if there's a heading for the sub-list items

    Strategic games
  • Centuries
  • Catan
  • Azul
    • Fun games
    • Coloretto
    • Reef
    • Planet
    • Lotus
  • Imhotep

<ul class="notype-list">
    <div class="list-title">Strategic games</div>
    <div class="divider-black"></div>
    <li>Centuries</li>
    <li>Catan</li>
    <li>Azul</li>
    <div class="list-subtitle">Fun games</div>
    <ul class="notype-list">
        <li>Coloretto</li>
        <li>Reef</li>
        <li>Planet</li>
        <li>Lotus</li>
    </ul>
    <li>Imhotep</li>
</ul>
‹ Input
Navigation ›