Eventival Styleguide / Components / Lists

Lists

List groups create simple vertical lists as well as complex, multi-level collections of Links and other elements.

By default all ordered and unorderd lists have set line-height, small margin and padding and have no bullets (list-style-type: none).

Basic structure

<ul>
  <li>Approved</li>
  <li>Hotel category: <b>4 star</b></li>
  <li>Insurance: <span class="tag tag--yes">Yes</span></li>
  <li class="li--modified">Hotel category: <b>3 star</b></li>
  <li class="li--disabled">Insurance:</li>
</ul>

Examples and usage

Unordered list

To present content of equal status or value.

List with bullets

Default list with small bullets

To create the bullet next to each element on the list, add the “list–bullet” class on the “ul” tag.

Approved
Confirmed
Item 3
Item 4

  <ul class="list--bullets">
    <li>Approved</li>
    <li><b>Confirmed</b></li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>

Some of the list items have bullets

If you need to add bullets only to some items on the list, add the "li--bullet" class to each item separately.

Confirmed
Item 1
Item 2
Item 3
Item 4

  <ul>
    <li><b>Confirmed</b></li>
    <li class="li--bullet">Item 1</li>
    <li>Item 2</li>
    <li class="li--bullet">Item 3</li>
    <li>Item 4</li>
  </ul>

List with no bullets (disabled)

Travels: Taxi
Meetings: Opening Event
Events: Opening Event
Invitation: ENG 4 night

<ul>
  <li>Travels: <b>Taxi</b></li>
  <li class="li--disabled">Meetings: <b>Opening Event</b></li>
  <li>Events: <b>Opening Event</b></li>
  <li>Invitation: <b>ENG 4 night</b></li>
</ul>

Ordered list

Imply sequence and order, and are commonly used when giving a set of instructions.

First item
Second item
Third item

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Design guideline

States of unordered lists with values

Unordered lists that are widely used in Eventival have three states.

Green bullets appear next to list items when the item has default value and was not modified by a user.
Orange bullets mean that a user interacted with this element, for example, changed a state from No to Yes.
Light gray bullets appear next to items that have no value assigned. We want to show them to users anyway so they know that have the possibility to use more elements.

Properties of unordered lists

Class	Effect
`list--bullets`	Adds small dots to all list items
`li--bullet`	Adds big gray dot to specific list item
`li--modified`	Adds orange dot as a meaning of modified list item
`li--disabled`	Renders the item as disabled

Design guideline

Size and color of the unordered lists bullets are styled.

Colors

#e6f2ce tahuna-sands

#ffd9a0 creme-brulee

#eaeaea gallery

#bebebe silver

Usage guideline

Length

Try to keep list items brief and around the same word count.

Order

Arrange List items in a logical way. For example, if the List is about resource use, the default order might be highest resource use to lowest. Grouping items in categories into smaller, more specific lists might be more meaningful in some contexts. Alternatively, organize in alphabetical or numeric order.