Ordered list

This type of list can be used to define a group of items with a specific order or importance. These items will be numbered.

Example
  1. list item
  2. list item
  3. list item
1
2
3
4
5

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

Unordered list

The items in this type of list have no specific order or priority. These will not be numbered but preceded by a bullet instead.

Example
  • list item
  • list item
  • list item
1
2
3
4
5

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

Combining & nesting lists

Ordered and unordered lists can be combined and nested as you please. For comprehensive reasons it is best not to nest items further than two levels.

Example
  • list item
    1. nested list item
    2. nested list item
    3. nested list item
  • list item
  • list item
    • nested list item
    • nested list item
    • nested list item
  • list item
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<ul>
	<li>list item
		<ol>
			<li>nested list item</li>
			<li>nested list item</li>
			<li>nested list item</li>
		</ol>
	</li>
	<li>list item</li>
	<li>list item
		<ul>
			<li>nested list item</li>
			<li>nested list item</li>
			<li>nested list item</li>
		</ul>
	</li>
	<li>list item</li>
</ul>

Definition list

If a definition list is needed withou spacing between the different lines, you can add the class ox-dl--condensed to the definition list.

Example
Chandler Bing
chandler.bing@mateco.eu
Tel.
/
Mobile
/
Fax.
/
Central Perk
14 East 60th Street,
10022 New York
USA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<dl>
  	<dt><span class="ox-icon ox-icon--support"></span></dt>
  	<dd>Chandler Bing</dd>
	<dd><a href="#" class="ox-link">chandler.bing@mateco.eu</a></dd>
  	<dd>
		<dl class="ox-dl--condensed">
			<dt>Tel.</dt>
			<dd>/</dd>
			<dt>Mobile</dt>
			<dd>/</dd>
			<dt>Fax.</dt>
			<dd>/</dd>
		</dl>
	</dd>
  	<dt><span class="ox-icon ox-icon--location"></span></dt>
  	<dd>Central Perk<br>
		14 East 60th Street,<br>
		10022 New York <br>
		USA</dd>
</dl>

Timeline

To create a vertical timeline you'll need a wrapper .ox-timeline in which three divs (.ox-timeline__datetime, .ox-timeline__marker and .ox-timeline__content) will have to be repeated per item on the timeline.

If a responsive version of the timeline is required, you can add the class ox-timeline--responsive to the wrapper. This ensures the date/time is shown above the content (to save space) on smaller screens.

Example
Monday 15 June
10:35
At depot
Start

This is where everything started

10:45
In transit
Next step

A next step that has been completed

10:55
Working
Third step

Another step that has been done.

eta 11:05
In transit
Fourth step

Something that has not been completed yet.

-
At depot
Last step

Last step that still has to be done.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<div class="ox-timeline ox-timeline--responsive">
	<div class="ox-timeline__datetime">
		<span class="ox-text--bold">Monday 15 June<br>
		10:35</span>
	</div>
	<div class="ox-timeline__marker ox-timeline__marker--done">
		<span class="ox-sr-only">At depot</span>
		<span class="ox-icon ox-icon--depot"></span>
	</div>
	<div class="ox-timeline__content">
		<b>Start</b>
		<p class="ox-text--small">This is where everything started</p>
	</div>
	<div class="ox-timeline__datetime">
		<span>10:45</span>
	</div>
	<div class="ox-timeline__marker ox-timeline__marker--done">
		<span class="ox-sr-only">In transit</span>
		<span class="ox-icon ox-icon--transport"></span>
	</div>
	<div class="ox-timeline__content" aria-labelledby="timestamp-2 status-2">
		<b>Next step</b>
		<p class="ox-text--small">A next step that has been completed</p>
	</div>
	<div class="ox-timeline__datetime">
		<span>10:55</span>
	</div>
	<div class="ox-timeline__marker ox-timeline__marker--done">
		<span class="ox-sr-only">Working</span>
		<span class="ox-icon ox-icon--wrench"></span>
	</div>
	<div class="ox-timeline__content" aria-labelledby="timestamp-3 status-3">
		<b>Third step</b>
		<p class="ox-text--small">Another step that has been done.</p>
	</div>
	<div class="ox-timeline__datetime">
		<span>eta 11:05</span>
	</div>
	<div class="ox-timeline__marker">
		<span class="ox-sr-only">In transit</span>
		<span class="ox-icon ox-icon--transport"></span>
	</div>
	<div class="ox-timeline__content">
		<b>Fourth step</b>
		<p class="ox-text--small">Something that has not been completed yet.</p>
	</div>
	<div class="ox-timeline__datetime">
		<span>-</span>
	</div>
	<div class="ox-timeline__marker ox-timeline__marker--last">
		<span class="ox-sr-only">At depot</span>
		<span class="ox-icon ox-icon--depot"></span>
	</div>
	<div class="ox-timeline__content">
		<b>Last step</b>
		<p class="ox-text--small">Last step that still has to be done.</p>
	</div>
</div>