Odyssey styleguide

Components

Component overview

Alert

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Alerts are used to provide a permanent message which sometimes can be removed by using the close icon. They are located below the header nav and right from the sidebar and only have three states: info, warning and error.

<insert-markup>components.alert-</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
.odyssey-alert--warn
Warning alert
<insert-markup>components.alert-0</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
.odyssey-alert--error
Error alert
<insert-markup>components.alert-1</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
.odyssey-alert--info
Info alert
<insert-markup>components.alert-2</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
.odyssey-alert--success
Succes alert
<insert-markup>components.alert-3</insert-markup>
You don't have enough credits left to look up this transaction, contact sales to increase your plan
Markup 
<div class="odyssey-alert [modifier class] regular bold">
	<i class="odyssey-alert__icon"></i>
	You don't have enough credits left to look up this transaction, contact sales to increase your plan
	<i class="odyssey-alert__close"></i>
</div>
Source: src/components/alert.less, line 1

Breadcrumbs

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Breadcrumbs provide links back to each previous page the user navigated through, and shows the user's current location.

<insert-markup>components.breadcrumbs-</insert-markup>
Page 4
Markup 
<div class="odyssey-navigation__breadcrumbs small">
	<a href="" class="odyssey-navigation__breadcrumbs__icon"></a>
	<div class="odyssey-navigation__breadcrumbs__pages">
		<div>
			<a href="">
				Page 1
			</a>
		</div>
		<div>
			<a href="">
				Page 2
			</a>
		</div>
		<div>
			<a href="">
				Page 3
			</a>
		</div>
		<div>
			Page 4
		</div>
	</div>
</div>
Source: src/components/breadcrumbs.less, line 1

Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.button-</insert-markup>
link button
.odyssey-button--primary
Primary button
<insert-markup>components.button-0</insert-markup>
link button
.odyssey-button--secondary
Secondary button
<insert-markup>components.button-1</insert-markup>
link button
.odyssey-button--links
Link button
<insert-markup>components.button-2</insert-markup>
link button
.odyssey-button--error
Error Button
<insert-markup>components.button-3</insert-markup>
link button
.odyssey-button--accent
Accent Button
<insert-markup>components.button-4</insert-markup>
link button
Markup 
<a class="odyssey-button [modifier class]">link button</a>
<button class="odyssey-button [modifier class]">Button</button>
<button class="odyssey-button [modifier class]" disabled>Button</button>
Source: src/components/button.less, line 56

Button Large

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.button.large-</insert-markup>
Link button
.odyssey-button--primary
Large primary button
<insert-markup>components.button.large-0</insert-markup>
Link button
.odyssey-button--secondary
Large secondary button
<insert-markup>components.button.large-1</insert-markup>
Link button
.odyssey-button--links
Large link button
<insert-markup>components.button.large-2</insert-markup>
Link button
.odyssey-button--error
Error Button
<insert-markup>components.button.large-3</insert-markup>
Link button
.odyssey-button--accent
Accent Button
<insert-markup>components.button.large-4</insert-markup>
Link button
Markup 
<a class="odyssey-button odyssey-button--large [modifier class]">Link button</a>
<button class="odyssey-button odyssey-button--large [modifier class]">Button</button>
<button class="odyssey-button odyssey-button--large [modifier class]"disabled> Button</button>
Source: src/components/button.less, line 247

Button Small

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.button.small-</insert-markup>
Link button
.odyssey-button--primary
Small primary button
<insert-markup>components.button.small-0</insert-markup>
Link button
.odyssey-button--secondary
Small secondary button
<insert-markup>components.button.small-1</insert-markup>
Link button
.odyssey-button--links
Small link button
<insert-markup>components.button.small-2</insert-markup>
Link button
.odyssey-button--error
Error Button
<insert-markup>components.button.small-3</insert-markup>
Link button
.odyssey-button--accent
Accent Button
<insert-markup>components.button.small-4</insert-markup>
Link button
Markup 
<a class="odyssey-button odyssey-button--small [modifier class]">Link button</a>
<button class="odyssey-button odyssey-button--small [modifier class]">Button</button>
<button class="odyssey-button odyssey-button--small [modifier class]" disabled>Button</button>
Source: src/components/button.less, line 274

Button FAB

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.button.fab-</insert-markup>
.odyssey-fab--large
Large secondary button
<insert-markup>components.button.fab-0</insert-markup>
Markup 
<button class="odyssey-fab [modifier class]"><img class="odyssey-fab__icon" src="/images/plus.svg"></button>
<button class="odyssey-fab [modifier class]" disabled><img class="odyssey-fab__icon" src="/images/plus.svg"></button>
Source: src/components/button.less, line 301

Icon Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.button.icon-</insert-markup>
.odyssey-button--primary
Primary button
<insert-markup>components.button.icon-0</insert-markup>
.odyssey-button--secondary
Secondary button
<insert-markup>components.button.icon-1</insert-markup>
.odyssey-button--links
Large link button
<insert-markup>components.button.icon-2</insert-markup>
.odyssey-button--error
Error Button
<insert-markup>components.button.icon-3</insert-markup>
.odyssey-button--accent
Accent Button
<insert-markup>components.button.icon-4</insert-markup>
Markup 
<button class="odyssey-button odyssey-button--icon [modifier class]"><i class="odyssey-button__icon"></i>Download</button>
<button class="odyssey-button odyssey-button--icon odyssey-button--large [modifier class]"><i class="odyssey-button__icon"></i>Download</button>
<button class="odyssey-button odyssey-button--icon odyssey-button--small [modifier class]"><i class="odyssey-button__icon"></i>Download</button>
<button class="odyssey-button odyssey-button--icon [modifier class]" disabled><i class="odyssey-button__icon"></i>Download</button>
Source: src/components/button.less, line 363

Loading Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.button.loading-</insert-markup>
.odyssey-button--primary
Primary button
<insert-markup>components.button.loading-0</insert-markup>
.odyssey-button--secondary
Secondary button
<insert-markup>components.button.loading-1</insert-markup>
.odyssey-button--error
Error Button
<insert-markup>components.button.loading-2</insert-markup>
.odyssey-button--accent
Accent Button
<insert-markup>components.button.loading-3</insert-markup>
Markup 
<button class="odyssey-button odyssey-button--icon [modifier class]"><div class="odyssey-button__loading"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>Loading</button>
<button class="odyssey-button odyssey-button--icon odyssey-button--large [modifier class]"><div class="odyssey-button__loading"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>Loading</button>
<button class="odyssey-button odyssey-button--icon odyssey-button--small [modifier class]"><div class="odyssey-button__loading"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>Loading</button>
Source: src/components/button.less, line 439

Card

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.card-</insert-markup>
Card header

Some content

.odyssey-card--small
Smaller card
<insert-markup>components.card-0</insert-markup>
Card header

Some content

.odyssey-card--borderless
Borderless card
<insert-markup>components.card-1</insert-markup>
Card header

Some content

Markup 
<div class="odyssey-card [modifier class]">
	<h5 class="odyssey-card__header">Card header</h5>
	<p>Some content</p>
</div>
Source: src/components/card.less, line 1

Dashbord Statistic Card 1

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.card.dashboardstat-</insert-markup>
Card header

123.456

LP: 56.789

10% from last month

.odyssey-card__footer--positive
Positive statistic
<insert-markup>components.card.dashboardstat-0</insert-markup>
Card header

123.456

LP: 56.789

10% from last month

.odyssey-card__footer--negative
Negative statistic
<insert-markup>components.card.dashboardstat-1</insert-markup>
Card header

123.456

LP: 56.789

10% from last month

Markup 
<div class="odyssey-card odyssey-card--small">
	<h5 class="odyssey-card__header odyssey-card__header--faded">Card header</h5>
	<div class="odyssey-card__statistic">
		<h4 class="odyssey-card__statistic-number">123.456</h4>
		<p class="odyssey-card__statistic-subtext">LP: 56.789</p>
	</div>
	<p class="odyssey-card__footer [modifier class]"><span class="odyssey-card__footer-percentage">10%</span> from last month</p>
</div>
Source: src/components/card.less, line 188

Card Headers

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.card.headers-</insert-markup>
Card header

Some content

.odyssey-card__header--weight-500
Thin card header
<insert-markup>components.card.headers-0</insert-markup>
Card header

Some content

.odyssey-card__header--faded
Faded card header
<insert-markup>components.card.headers-1</insert-markup>
Card header

Some content

Markup 
<div class="odyssey-card odyssey-card--small">
	<h5 class="odyssey-card__header [modifier class]">Card header</h5>
	<p>Some content</p>
</div>
Source: src/components/card.less, line 47

Small Card with header bold & icon

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.card.icons-</insert-markup>
Card header

Total

123.456

Growth

456.789

.odyssey-card__icon--red
Red Icon
<insert-markup>components.card.icons-0</insert-markup>
Card header

Total

123.456

Growth

456.789

.odyssey-card__icon--orange
Orange Icon
<insert-markup>components.card.icons-1</insert-markup>
Card header

Total

123.456

Growth

456.789

.odyssey-card__icon--green
Green Icon
<insert-markup>components.card.icons-2</insert-markup>
Card header

Total

123.456

Growth

456.789

.odyssey-card__icon--yellow
Yellow Icon
<insert-markup>components.card.icons-3</insert-markup>
Card header

Total

123.456

Growth

456.789

Markup 
<div class="odyssey-card odyssey-card--small">
	<h5 class="odyssey-card__header">Card header</h5>
	<span class="odyssey-card__icon [modifier class]">
		<i class="odyssey-card__example-icon"></i>
	</span>
	<div class="odyssey-card__metric">
		<p class="odyssey-card__metric-title">Total</p>
		<p class="odyssey-card__metric-number">123.456</p>
	</div>
	<div class="odyssey-card__metric">
		<p class="odyssey-card__metric-title">Growth</p>
		<p class="odyssey-card__metric-number">456.789</p>
	</div>
</div>
Source: src/components/card.less, line 93

Card with labels

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.card.labels-</insert-markup>
Card header
55 credits 5.5 seconds

Some content

Markup 
<div class="odyssey-card">
	<h5 class="odyssey-card__header">Card header</h5>
	<span class="odyssey-card__labels">
		<span class="odyssey-label odyssey-label_info">55 credits</span>
		<span class="odyssey-label odyssey-label_success">5.5 seconds</span>
	</span>
	<p>Some content</p>
</div>
Source: src/components/card.less, line 72

Choice cards

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.choice.cards-</insert-markup>
odyssey-choicecard--error
error choice card
<insert-markup>components.choice.cards-0</insert-markup>
odyssey-choicecard--active
activated choice card
<insert-markup>components.choice.cards-1</insert-markup>
odyssey-choicecard--disabled
disabled choice card
<insert-markup>components.choice.cards-2</insert-markup>
Markup 
<button class="odyssey-choicecard [modifier class]">
	<div class="odyssey-choicecard__status-icon"></div>
	<p class="odyssey-choicecard__text">Information</p>
	<h6 class="odyssey-choicecard__header">Header</h6>
</button>
<hr id="ignore-me" style="opacity:0.1"/>
<button class="odyssey-choicecard [modifier class]">
	<div class="odyssey-choicecard__status-icon"></div>
	<h6 class="odyssey-choicecard__header">Header</h6>
</button>
Source: src/components/choice_cards.less, line 3

Icons Cards

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.choice.cards.icon-</insert-markup>
odyssey-choicecard--error
error choice card
<insert-markup>components.choice.cards.icon-0</insert-markup>
odyssey-choicecard--active
activated choice card
<insert-markup>components.choice.cards.icon-1</insert-markup>
odyssey-choicecard--disabled
disabled choice card
<insert-markup>components.choice.cards.icon-2</insert-markup>
Markup 
<button class="odyssey-choicecard odyssey-choicecard--icon [modifier class]">
	<div class="odyssey-choicecard__status-icon"></div>
	<i src="images/download.svg" class="odyssey-choicecard__icon"></i>
	<h6 class="odyssey-choicecard__header">Header</h6>
</button>
Source: src/components/choice_cards.less, line 177

Small Cards

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.choice.cards.small-</insert-markup>
odyssey-choicecard--error
error choice card
<insert-markup>components.choice.cards.small-0</insert-markup>
odyssey-choicecard--active
activated choice card
<insert-markup>components.choice.cards.small-1</insert-markup>
odyssey-choicecard--disabled
disabled choice card
<insert-markup>components.choice.cards.small-2</insert-markup>
Markup 
<button class="odyssey-choicecard odyssey-choicecard--small [modifier class]">
	<div class="odyssey-choicecard__status-icon"></div>
	<p class="odyssey-choicecard__text">Information</p>
	<h6 class="odyssey-choicecard__header">Header</h6>
</button>
<hr id="ignore-me" style="opacity:0.1"/>
<button class="odyssey-choicecard odyssey-choicecard--small [modifier class]">
	<div class="odyssey-choicecard__status-icon"></div>
	<h6 class="odyssey-choicecard__header">Header</h6>
</button>
Source: src/components/choice_cards.less, line 147

Collapsible card

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.collapsiblecard-</insert-markup>

Overspend

Markup 
<div class="odyssey-collaps-card">
	<div class="odyssey-collaps-card-header">
		<h3 class="odyssey-collaps-card-header__title">Overspend</h3>
		<img class="odyssey-collaps-card-header__icon" src="https://app.odysseyattribution.co/Orders.de7230ce7aba38c344b1.svg"></img>
		<img class="odyssey-collaps-card-header__icon" src="https://app.odysseyattribution.co/Trending.cbac863d97c42df9eceb.svg"></img>
	</div>
	<div class="odyssey-collaps-card-body">
		<input id="collapsible" class="odyssey-toggle"type="checkbox">
		<label for="collapsible" class="odyssey-lbl-toggle">
			<span class="odyssey-collaps-card__text odyssey-lbl-toggle--close">Close Details</span>
			<span class="odyssey-collaps-card__text odyssey-lbl-toggle--open">Show Details</span>
			<i></i>
		</label>
		<div class="odyssey-collaps-card-item">
			<div class="odyssey-collaps-card-item-collaps">
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">custom1==*&+brand==abc</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--red">-$ 2.129</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">custom1==*&+brand==def</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 2.128</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">custom1==*&+brand==ghi</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 1.204</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">other 81</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 10.427</span>
				</label>
				<hr class="odyssey-collaps-card__line"></hr>
			</div>
			<label class="odyssey-collaps-card-item__lbl">
				<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left odyssey-collaps-card-item__lbl--text-big">Overspend in smart Shopping - all brands</span>
				<span class="odyssey-collaps-card-item__lbl--text-big odyssey-collaps-card-item__lbl--red">+$ 15.888</span>
			</label>
		</div>
		<div class="odyssey-collaps-card-item">
			<div class="odyssey-collaps-card-item-collaps">
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">abc - traffic - Something else</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 2.129</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">abc - fgh -  sales - Something</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--red">+$ 1.478</span>
				</label>
				<label class="odyssey-collaps-card-item__lbl">
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left">abc - traffic - Some markt</span>
					<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--green">+$ 1.054</span>
				</label>
				<hr class="odyssey-collaps-card__line"></hr>
			</div>
			<label class="odyssey-collaps-card-item__lbl">
				<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left odyssey-collaps-card-item__lbl--text-big">Overspend in Facebook</span>
				<span class="odyssey-collaps-card-item__lbl--text-big odyssey-collaps-card-item__lbl--red">+$ 4.661</span>
			</label>
		</div>
		<div class="odyssey-collaps-card-item odyssey-collaps-card-item--no-margin">
			<label class="odyssey-collaps-card-item__lbl">
				<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left odyssey-collaps-card-item__lbl--bold">And 31 others</span>
				<span class="odyssey-collaps-card-item__lbl--text-big odyssey-collaps-card-item__lbl--red">+$ 26.198</span>
			</label>
		</div>
		<hr class="odyssey-collaps-card__line"></hr>
		<div class="odyssey-collaps-card-item odyssey-collaps-card-item--no-margin">
			<label class="odyssey-collaps-card-item__lbl">
				<span class="odyssey-collaps-card__text odyssey-collaps-card-item__lbl--left odyssey-collaps-card-item__lbl--bold odyssey-collaps-card-item__lbl--text-big">Total Overspend</span>
				<span class="odyssey-collaps-card-item__lbl--text-big odyssey-collaps-card-item__lbl--red odyssey-collaps-card-item__lbl--bold">+$ 26.198</span>
			</label>
		</div>
	</div>
</div>
Source: src/components/card.less, line 258

Datepicker

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.datepicker-</insert-markup>
January
Mo Tu We Th Fr Sa Su
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
February
Mo Tu We Th Fr Sa Su
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
Markup 
<div class="odyssey-datepicker">
	<div class="odyssey-datepicker__dates">
		<div class="odyssey-datepicker__column">
			<table class="odyssey-datepicker__selector">
				<thead class="odyssey-datepicker__selector__title">
					<tr>
						<th class="odyssey-datepicker__selector__title--prev">
							<svg class="odyssey-datepicker__selector__title__icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M14.1258 6.7925L12.8333 5.5L7.33325 11L12.8333 16.5L14.1258 15.2075L9.92742 11L14.1258 6.7925Z"/>
							</svg>
						</th>
						<th class="odyssey-datepicker__selector__title--name" colspan="5">January</th>
						<th class="odyssey-datepicker__selector__title--next">
							<svg class="odyssey-datepicker__selector__title__icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M9.16677 5.5L7.87427 6.7925L12.0726 11L7.87427 15.2075L9.16677 16.5L14.6668 11L9.16677 5.5Z"/>
							</svg>
						</th>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--names">
						<th>Mo</th>
						<th>Tu</th>
						<th>We</th>
						<th>Th</th>
						<th>Fr</th>
						<th>Sa</th>
						<th>Su</th>
					</tr>
				</thead>
				<tbody class="odyssey-datepicker__selector__picker">
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="selection-first"><div class="odyssey-datepicker__date">1</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td class="selection"><div class="odyssey-datepicker__date">2</div></td>
						<td class="selection"><div class="odyssey-datepicker__date">3</div></td>
						<td class="selection"><div class="odyssey-datepicker__date">4</div></td>
						<td class="selection"><div class="odyssey-datepicker__date">5</div></td>
						<td class="selection"><div class="odyssey-datepicker__date">6</div></td>
						<td class="selection"><div class="odyssey-datepicker__date">7</div></td>
						<td class="selection-first compare overlap"><div class="odyssey-datepicker__date">8</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td class="selection compare overlap"><div class="odyssey-datepicker__date">9</div></td>
						<td class="selection compare overlap"><div class="odyssey-datepicker__date">10</div></td>
						<td class="selection compare overlap"><div class="odyssey-datepicker__date">11</div></td>
						<td class="selection-last compare overlap"><div class="odyssey-datepicker__date">12</div></td>
						<td class="selection compare"><div class="odyssey-datepicker__date">13</div></td>
						<td class="selection compare"><div class="odyssey-datepicker__date">14</div></td>
						<td class="selection compare"><div class="odyssey-datepicker__date">15</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td class="selection compare"><div class="odyssey-datepicker__date">16</div></td>
						<td class="selection compare"><div class="odyssey-datepicker__date">17</div></td>
						<td class="selection-last compare"><div class="odyssey-datepicker__date">18</div></td>
						<td><div class="odyssey-datepicker__date">19</div></td>
						<td><div class="odyssey-datepicker__date">20</div></td>
						<td><div class="odyssey-datepicker__date">21</div></td>
						<td><div class="odyssey-datepicker__date">22</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td><div class="odyssey-datepicker__date">23</div></td>
						<td><div class="odyssey-datepicker__date">24</div></td>
						<td><div class="odyssey-datepicker__date">25</div></td>
						<td><div class="odyssey-datepicker__date">26</div></td>
						<td><div class="odyssey-datepicker__date">27</div></td>
						<td><div class="odyssey-datepicker__date">28</div></td>
						<td><div class="odyssey-datepicker__date">29</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td><div class="odyssey-datepicker__date">30</div></td>
						<td><div class="odyssey-datepicker__date">31</div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="odyssey-datepicker__column">
			<table class="odyssey-datepicker__selector">
				<thead class="odyssey-datepicker__selector__title">
					<tr>
						<th class="odyssey-datepicker__selector__title--prev">
							<svg class="odyssey-datepicker__selector__title__icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M14.1258 6.7925L12.8333 5.5L7.33325 11L12.8333 16.5L14.1258 15.2075L9.92742 11L14.1258 6.7925Z"/>
							</svg>
						</th>
						<th class="odyssey-datepicker__selector__title--name" colspan="5">February</th>
						<th class="odyssey-datepicker__selector__title--next">
							<svg class="odyssey-datepicker__selector__title__icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M9.16677 5.5L7.87427 6.7925L12.0726 11L7.87427 15.2075L9.16677 16.5L14.6668 11L9.16677 5.5Z"/>
							</svg>
						</th>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--names">
						<th>Mo</th>
						<th>Tu</th>
						<th>We</th>
						<th>Th</th>
						<th>Fr</th>
						<th>Sa</th>
						<th>Su</th>
					</tr>
				</thead>
				<tbody class="odyssey-datepicker__selector__picker">
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td><div class="odyssey-datepicker__date">1</div></td>
						<td><div class="odyssey-datepicker__date">2</div></td>
						<td><div class="odyssey-datepicker__date">3</div></td>
						<td><div class="odyssey-datepicker__date">4</div></td>
						<td><div class="odyssey-datepicker__date">5</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td><div class="odyssey-datepicker__date">6</div></td>
						<td><div class="odyssey-datepicker__date">7</div></td>
						<td><div class="odyssey-datepicker__date">8</div></td>
						<td><div class="odyssey-datepicker__date">9</div></td>
						<td><div class="odyssey-datepicker__date">10</div></td>
						<td><div class="odyssey-datepicker__date">11</div></td>
						<td><div class="odyssey-datepicker__date">12</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td><div class="odyssey-datepicker__date">13</div></td>
						<td><div class="odyssey-datepicker__date">14</div></td>
						<td><div class="odyssey-datepicker__date">15</div></td>
						<td><div class="odyssey-datepicker__date">16</div></td>
						<td><div class="odyssey-datepicker__date">17</div></td>
						<td><div class="odyssey-datepicker__date">18</div></td>
						<td><div class="odyssey-datepicker__date">19</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td><div class="odyssey-datepicker__date">20</div></td>
						<td><div class="odyssey-datepicker__date">21</div></td>
						<td><div class="odyssey-datepicker__date">22</div></td>
						<td><div class="odyssey-datepicker__date">23</div></td>
						<td><div class="odyssey-datepicker__date">24</div></td>
						<td><div class="odyssey-datepicker__date">25</div></td>
						<td><div class="odyssey-datepicker__date">26</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td><div class="odyssey-datepicker__date">27</div></td>
						<td><div class="odyssey-datepicker__date">28</div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__days--numbers">
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
						<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="odyssey-datepicker__column">
			<div class="odyssey-datepicker__input">
				<div class="odyssey-datepicker__inputgroup">
					<input class="date_padding odyssey-inputgroup__input" type="date">
					<i class="arrow"></i>
					<input class="date_padding odyssey-inputgroup__input" type="date">
				</div>
				<select class="odyssey-inputgroup__select">
					<option>Last month</option>
					<option>Last week</option>
					<option>Last year</option>
				</select>
				<div class="odyssey-checkgroup odyssey-checkgroup--small">
					<input checked type="checkbox" id="datepicker-compare" />
					<label class="odyssey-check__label" for="datepicker-compare"></label>
					<label for="remember" class="odyssey-checkgroup__label">Compare</label>
				</div>
			</div>
			<div class="odyssey-datepicker__input compare">
				 <div class="odyssey-datepicker__inputgroup">
					<input class="date_padding odyssey-inputgroup__input" type="date">
					<i class="arrow"></i>
					<input class="date_padding odyssey-inputgroup__input" type="date">
				</div>
				<select class="odyssey-inputgroup__select">
					<option>Last month</option>
					<option>Last week</option>
					<option>Last year</option>
				</select>
			</div>
		</div>
	</div>
	<div class="odyssey-datepicker__apply">
		<button class="odyssey-button odyssey-button--small odyssey-button--links">Cancel</button>
		<button class="odyssey-button odyssey-button--small odyssey-button--primary">Apply</button>
	</div>
</div>
Source: src/components/datepicker.less, line 12

Monthpicker Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.datepicker.monthbutton-</insert-markup>
Markup 
<button tabindex="0" class="odyssey-date-select odyssey-date-select--month">
	<div class="odyssey-date-select__icon"></div>
	<span>January, 2020</span>
	<span class="odyssey-date-select__middle-dash"> vs. </span>
	<span>January, 2020</span>
</button>
Source: src/components/datepicker.less, line 751

Monthpicker

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

The monthpicker component accepts the following attributes: value = {selected, compared}; min = 'YYYYMM' or 'YYYY-MM'; max = 'YYYYMM' or 'YYYY-MM'; optionalCompare = boolean; forceCompare = boolean;

<insert-markup>components.datepicker.monthpicker-</insert-markup>
2021
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Markup 
<div class="odyssey-datepicker odyssey-datepicker--months">
	<div class="odyssey-datepicker__dates">
		<div class="odyssey-datepicker__column">
			<table class="odyssey-datepicker__selector">
				<thead class="odyssey-datepicker__selector__title">
					<tr>
						<th class="odyssey-datepicker__selector__title--prev">
							<a class="icon-button">
								<i class="odyssey-datepicker__arrow-left icon-button__icon"></i>
							</a>
						</th>
						<th class="odyssey-datepicker__selector__title--name" colspan="2">2021</th>
						<th class="odyssey-datepicker__selector__title--next">
							<a class="icon-button">
								<i class="odyssey-datepicker__arrow-right icon-button__icon"></i>
							</a>
						</th>
					</tr>
				</thead>
				<tbody class="odyssey-datepicker__selector__picker">
					<tr class="odyssey-datepicker__selector__picker__months">
						<td><div class="odyssey-datepicker__month">Jan</div></td>
						<td><div class="odyssey-datepicker__month">Feb</div></td>
						<td><div class="odyssey-datepicker__month">Mar</div></td>
						<td><div class="odyssey-datepicker__month">Apr</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__months">
						<td><div class="odyssey-datepicker__month">May</div></td>
						<td class="odyssey-datepicker__selected-accent"><div class="odyssey-datepicker__month">Jun</div></td>
						<td class="odyssey-datepicker__selected-primary"><div class="odyssey-datepicker__month">Jul</div></td>
						<td><div class="odyssey-datepicker__month">Aug</div></td>
					</tr>
					<tr class="odyssey-datepicker__selector__picker__months">
						<td><div class="odyssey-datepicker__month">Sep</div></td>
						<td><div class="odyssey-datepicker__month">Oct</div></td>
						<td><div class="odyssey-datepicker__month">Nov</div></td>
						<td><div class="odyssey-datepicker__month">Dec</div></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="odyssey-checkgroup odyssey-checkgroup--small odyssey-datepicker__compare">
			<input type="checkbox" id="compare" />
			<label class="odyssey-check__label" for="compare"></label>
			<label for="compare" class="odyssey-checkgroup__label">Compare</label>
		</div>
	</div>
	<div class="odyssey-datepicker__apply">
		<button class="odyssey-button odyssey-button--small odyssey-button--links">Cancel</button>
		<button class="odyssey-button odyssey-button--small odyssey-button--primary">Apply</button>
	</div>
</div>
Source: src/components/datepicker.less, line 584

Date select

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.datepicker.select-</insert-markup>
1 January, 2020 - 31 January, 2020
Markup 
<div tabindex="0" class="odyssey-date-select">
	<div class="odyssey-date-select__icon"></div>
	<span>1 January, 2020</span>
	<span class="odyssey-date-select__middle-dash"> - </span>
	<span>31 January, 2020</span>
</div>
Source: src/components/datepicker.less, line 529

Single Datepicker Button

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.datepicker.sigledatebutton-</insert-markup>
31 January, 1998
Markup 
<div tabindex="0" class="odyssey-date-select odyssey-date-select--button">
	<div class="odyssey-date-select__icon"></div>
	<span>31 January, 1998</span>
</div>
Source: src/components/datepicker.less, line 905

Single Date Picker

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.datepicker.singledate-</insert-markup>
January 1998
Mo Tu We Th Fr Sa Su
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
Markup 
<div class="odyssey-datepicker odyssey-datepicker--single-date">
	<div class="odyssey-datepicker__dates">
		<table class="odyssey-datepicker__selector">
			<thead class="odyssey-datepicker__selector__title">
				<tr>
					<th class="odyssey-datepicker__selector__title--prev">
						<a class="icon-button">
							<i class="odyssey-datepicker__arrow-left icon-button__icon"></i>
						</a>
					</th>
					<th class="odyssey-datepicker__selector__title--name" colspan="5">January 1998</th>
					<th class="odyssey-datepicker__selector__title--next">
						<a class="icon-button">
							<i class="odyssey-datepicker__arrow-right icon-button__icon"></i>
						</a>
					</th>
				</tr>
				<tr class="odyssey-datepicker__selector__picker__days--names">
					<th>Mo</th>
					<th>Tu</th>
					<th>We</th>
					<th>Th</th>
					<th>Fr</th>
					<th>Sa</th>
					<th>Su</th>
				</tr>
			</thead>
			<tbody class="odyssey-datepicker__selector__picker">
				<tr class="odyssey-datepicker__selector__picker__days--numbers">
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="selected"><div class="odyssey-datepicker__date">1</div></td>
				</tr>
				<tr class="odyssey-datepicker__selector__picker__days--numbers">
					<td class="disabled"><div class="odyssey-datepicker__date">2</div></td>
					<td class="disabled"><div class="odyssey-datepicker__date">3</div></td>
					<td class="disabled"><div class="odyssey-datepicker__date">4</div></td>
					<td class="disabled"><div class="odyssey-datepicker__date">5</div></td>
					<td><div class="odyssey-datepicker__date">6</div></td>
					<td><div class="odyssey-datepicker__date">7</div></td>
					<td><div class="odyssey-datepicker__date">8</div></td>
				</tr>
				<tr class="odyssey-datepicker__selector__picker__days--numbers">
					<td><div class="odyssey-datepicker__date">9</div></td>
					<td><div class="odyssey-datepicker__date">10</div></td>
					<td><div class="odyssey-datepicker__date">11</div></td>
					<td><div class="odyssey-datepicker__date">12</div></td>
					<td><div class="odyssey-datepicker__date">13</div></td>
					<td><div class="odyssey-datepicker__date">14</div></td>
					<td><div class="odyssey-datepicker__date">15</div></td>
				</tr>
				<tr class="odyssey-datepicker__selector__picker__days--numbers">
					<td><div class="odyssey-datepicker__date">16</div></td>
					<td><div class="odyssey-datepicker__date">17</div></td>
					<td><div class="odyssey-datepicker__date">18</div></td>
					<td><div class="odyssey-datepicker__date">19</div></td>
					<td><div class="odyssey-datepicker__date">20</div></td>
					<td><div class="odyssey-datepicker__date">21</div></td>
					<td><div class="odyssey-datepicker__date">22</div></td>
				</tr>
				<tr class="odyssey-datepicker__selector__picker__days--numbers">
					<td><div class="odyssey-datepicker__date">23</div></td>
					<td><div class="odyssey-datepicker__date">24</div></td>
					<td><div class="odyssey-datepicker__date">25</div></td>
					<td><div class="odyssey-datepicker__date">26</div></td>
					<td><div class="odyssey-datepicker__date">27</div></td>
					<td><div class="odyssey-datepicker__date">28</div></td>
					<td><div class="odyssey-datepicker__date">29</div></td>
				</tr>
				<tr class="odyssey-datepicker__selector__picker__days--numbers">
					<td><div class="odyssey-datepicker__date">30</div></td>
					<td><div class="odyssey-datepicker__date">31</div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
					<td class="emptyDate unselectable"><div class="odyssey-datepicker__date"></div></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
Source: src/components/datepicker.less, line 775

Definition list

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.definition-</insert-markup>
Credits spent
50%
Markup 
<dl class="odyssey-definition">
	<dt>Credits spent</dt>
	<dd>50%</dd>
</dl>
Source: src/components/list.less, line 1

Dialog

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.dialog-</insert-markup>
Delete

Are you sure you want to delete this custom-made target? You will not be able to work with it again.

.odyssey-dialog__button--warning
Warning message
<insert-markup>components.dialog-0</insert-markup>
Delete

Are you sure you want to delete this custom-made target? You will not be able to work with it again.

.odyssey-dialog__button--attention
Warning message
<insert-markup>components.dialog-1</insert-markup>
Delete

Are you sure you want to delete this custom-made target? You will not be able to work with it again.

Markup 
<div class="odyssey-dialog [modifier class]">
	<div class="odyssey-dialog__content-wrapper">
		<h6>Delete</h6>
		<p>Are you sure you want to delete this custom-made target? You will not be able to work with it again.</p>
	</div>
	<div class="odyssey-dialog__button-wrapper">
		<button class="odyssey-dialog__button">Cancel</button>
		<button class="odyssey-dialog__button odyssey-dialog__button--bold [modifier class]">Yes</button>
	</div>
</div>
Source: src/components/dialog.less, line 23

Notification success

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.dialog.notification.success-</insert-markup>
Bonus payment done

You successfully gave tim@code-orange.nl a bonus payment

Markup 
<div class="odyssey-popup ">
	<div class="odyssey-popup__background"></div>
	<div class="odyssey-popup__card">
		<div class="odyssey-popup__icon">
			<span class="icon-check-92px-success"></span>
		</div>
		<h5>Bonus payment done</h5>
		<p>You successfully gave tim@code-orange.nl a bonus payment</p>
	</div>
</div>
Source: src/components/dialog.less, line 199

Dialog with input

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.dialog.with.input-</insert-markup>
Change name

Please enter the return amount.

This input is incorrect.
.odyssey-inputgroup--error
Input error
<insert-markup>components.dialog.with.input-0</insert-markup>
Change name

Please enter the return amount.

This input is incorrect.
Markup 
<div class="odyssey-dialog">
	<form class="odyssey-dialog__form">
		<div class="odyssey-dialog__content-wrapper">
			<h6>Change name</h6>
			<div class="odyssey-inputgroup [modifier class]" >
				<p>Please enter the return amount.</p>
				<label class="odyssey-input-labeled" for="input-return-amount">
					<span class="odyssey-input-labeled__label">
						<i class="odyssey-input-labeled__icon"></i>
					</span>
					<input class="odyssey-input-labeled__input" placeholder="Enter value" id="input-return-amount"
						type="number" step="0.01" v-model="formData.amount">
				</label>
				<span class="odyssey-inputgroup__error">This input is incorrect.</span>
			</div>
		</div>
		<div class="odyssey-dialog__button-wrapper">
			<button class="odyssey-dialog__button odyssey-dialog__button--bold">Cancel</button>
			<button class="odyssey-dialog__button odyssey-dialog__button--warning" type="submit">Apply</button>
		</div>
	</form>
</div>
Source: src/components/dialog.less, line 113

Dialog with standard odyssey buttons

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.dialog.with.standardized.buttons-</insert-markup>
Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commodo ultricies nunc tristique ornare sed aliquet magna. Cras urna molestie malesuada purus.

Markup 
<div class="odyssey-dialog ">
	<div class="odyssey-dialog__content-wrapper">
		<h6>Message</h6>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Commodo ultricies nunc tristique ornare sed aliquet magna. Cras urna molestie malesuada purus.</p>
	</div>
	<div class="odyssey-dialog__standard-button-wrapper">
		<button class="odyssey-button odyssey-button--secondary">Learn more</button>
		<button class="odyssey-button odyssey-button--primary">OK</button>
	</div>
</div>
Source: src/components/dialog.less, line 171

Donut Graph

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.donutgraph-</insert-markup>
75
Markup 
<div class="donut-graph">
	<div class="donut-graph__donut">
		<svg viewBox="0 0 20 20">
			<circle class="donut-graph__circle-bg" fill="none" cx="10" cy="10" r="8"></circle>
			<circle class="donut-graph__circle" style="stroke-dasharray: 51;" cx="10" cy="10" r="8"></circle>
		</svg>
		<span class="donut-graph__text">75</span>
	</div>
</div>
Source: src/components/donut_graph.less, line 1

Dropdown

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

This styling is connected to the OdysseyDropdown.vue component. Remove the odyssey-dropdown--hide class from the odyssey-dropdown__items container to see the active state.

<insert-markup>components.dropdown-</insert-markup>
Option 1
Option 1
Option 2
.odyssey-dropdown--active
Active dropdown styling
<insert-markup>components.dropdown-0</insert-markup>
Option 1
Option 1
Option 2
.odyssey-dropdown--error
Error dropdown styling
<insert-markup>components.dropdown-1</insert-markup>
Option 1
Option 1
Option 2
.odyssey-dropdown--disabled
Disabled dropdown styling
<insert-markup>components.dropdown-2</insert-markup>
Option 1
Option 1
Option 2
.odyssey-dropdown--small
Small dropdown styling
<insert-markup>components.dropdown-3</insert-markup>
Option 1
Option 1
Option 2
Markup 
<div class="odyssey-dropdown [modifier class]">
	<div class="odyssey-dropdown__dropdown" tabindex="0">
		<span style="align-self: center;">Option 1</span>
		<i class="odyssey-dropdown__arrow odyssey-dropdown__arrow"></i>
	</div>
	<div class="odyssey-dropdown__items">
		<div class="odyssey-dropdown__item odyssey-dropdown__item--active">
			Option 1
		</div>
		<div class="odyssey-dropdown__item">
			Option 2
		</div>
	</div>
</div>
Source: src/components/dropdown.less, line 1

Multi Dropdown

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.dropdown.multi-</insert-markup>
Option 1
Option 1
Option 2
Sports Clothing
.odyssey-dropdown--active
Active dropdown styling
<insert-markup>components.dropdown.multi-0</insert-markup>
Option 1
Option 1
Option 2
Sports Clothing
.odyssey-dropdown--error
Error dropdown styling
<insert-markup>components.dropdown.multi-1</insert-markup>
Option 1
Option 1
Option 2
Sports Clothing
.odyssey-dropdown--disabled
Disabled dropdown styling
<insert-markup>components.dropdown.multi-2</insert-markup>
Option 1
Option 1
Option 2
Sports Clothing
.odyssey-dropdown--small
Small dropdown styling
<insert-markup>components.dropdown.multi-3</insert-markup>
Option 1
Option 1
Option 2
Sports Clothing
Markup 
<div class=" odyssey-multidropdown">
	<div class="odyssey-dropdown [modifier class]">
		<div class="odyssey-dropdown__dropdown" tabindex="0">
			<span style="align-self: center;">Option 1</span>
			<i class="odyssey-dropdown__arrow odyssey-dropdown__arrow"></i>
		</div>
		<div class="odyssey-dropdown__items">
			<div class="odyssey-dropdown__item odyssey-dropdown__item--active">
				Option 1
			</div>
			<div class="odyssey-dropdown__item">
				Option 2
			</div>
		</div>
	</div>
	<div class="odyssey-multidropdown__selected">
		<span class="odyssey-multidropdown__item">Sports<i class="odyssey-multidropdown__item-delete"></i></span>
		<span class="odyssey-multidropdown__item">Clothing<i class="odyssey-multidropdown__item-delete"></i></span>
	</div>
</div>
Source: src/components/dropdown.less, line 202

Hint

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Hints are pop-up messages that confirm user actions and provide direct used feedback of the performed action. Hint's appearance are permanent for a particular mode (i.e. Admin of Test) and should provide undo/return as action

<insert-markup>components.hint-</insert-markup>
You are watching a preview. Return
Markup 
<div class="odyssey-notification__hint">
	<span class="odyssey-notification__hint__copy small">
		You are watching a preview.
	</span>
	<a class="odyssey-notification__hint__undo small bold">
		Return
	</a>
</div>
Source: src/components/hint.less, line 1

Label

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Used to indicate state or give context

<insert-markup>components.label-</insert-markup>
Label
.odyssey-label--outlined
outlined black label
<insert-markup>components.label-0</insert-markup>
Label
.odyssey-label--warn
Warning label
<insert-markup>components.label-1</insert-markup>
Label
.odyssey-label--error
Error label
<insert-markup>components.label-2</insert-markup>
Label
.odyssey-label--info
Info label
<insert-markup>components.label-3</insert-markup>
Label
.odyssey-label--success
Succes label
<insert-markup>components.label-4</insert-markup>
Label
.odyssey-label--attention
Succes label
<insert-markup>components.label-5</insert-markup>
Label
.odyssey-label--closable
Close label
<insert-markup>components.label-6</insert-markup>
Label
Markup 
<span class="odyssey-label [modifier class]">Label</span>
Source: src/components/labels.less, line 1

Menu

Menu Account

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.menu.account-</insert-markup>
Markup 
<div class="odyssey-menu">
	<input class="odyssey-menu__check" id="account_dropdown" type="checkbox" hidden>
	<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile" for="account_dropdown">
		<div class="odyssey-menu__icon"></div>
		<span class="odyssey-menu__text">This Is A Long Account Name</span>
		<div class="odyssey-menu__arrow"></div>
	</label>
	<div class="odyssey-menu__expand">
		<div class="odyssey-menu__content">
			<ul class="odyssey-menulist">
				<li class="odyssey-menulist__item"><a class="odyssey-menulist__link" href="/accounts/1">Account 1</a></li>
				<li class="odyssey-menulist__item"><a class="odyssey-menulist__link" href="/accounts/1">Account 2</a></li>
				<li class="odyssey-menulist__item"><a class="odyssey-menulist__link" href="/accounts/1">Account 3</a></li>
				<li class="odyssey-menulist__item"><a class="odyssey-menulist__link" href="/accounts/1">Account 4</a></li>
				<li class="odyssey-menulist__item"><a class="odyssey-menulist__link" href="/accounts/1">Account 5</a></li>
				<li class="odyssey-menulist__item"><a class="odyssey-menulist__link" href="/accounts/1">Account 6</a></li>
			</ul>
			<ul class="odyssey-menulist odyssey-menulist--border-radius">
				<li class="odyssey-menulist__item odyssey-menulist__item--top-border odyssey-menulist__item--regular-text">
				<a class="odyssey-menulist__link" href="/"><i class="odyssey-menulist__icon"></i>Add account</a>
				</li>
			</ul>
		</div>
	</div>
</div>
Source: src/components/menu.less, line 9

Menu list

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.menu.list-</insert-markup>
.odyssey-menulist--border-radius
Add border radius to last menu.
<insert-markup>components.menu.list-0</insert-markup>
Markup 
<ul class="odyssey-menulist [modifier class]">
	<li class="odyssey-menulist__item"><a class="odyssey-menulist__link" href="https://app.odysseyattribution.co/">Item</a></li>
</ul>
Source: src/components/menu.less, line 207

Menu list details

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.menu.list.detailitem-</insert-markup>
  • Simon simson Simonsimson@mail.com
Markup 
<ul class="odyssey-menulist">
	<li class="odyssey-menulist__details">
		<span class="odyssey-menulist__details-header">Simon simson</span>
		<span class="odyssey-menulist__details-subheader">Simonsimson@mail.com</span>
	</li>
</ul>
Source: src/components/menu.less, line 309

Menu list item with icon

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.menu.list.iconitem-</insert-markup>
Markup 
<ul class="odyssey-menulist">
	<li class="odyssey-menulist__item">
		<a class="odyssey-menulist__link" href="https://app.odysseyattribution.co/">
			<i class="odyssey-menulist__icon"></i>
			Item
		</a>
	</li>
</ul>
Source: src/components/menu.less, line 344

Menu list item

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.menu.list.item-</insert-markup>
:hover
Hover state
<insert-markup>components.menu.list.item-0</insert-markup>
.odyssey-menulist__item--warn
Warning version
<insert-markup>components.menu.list.item-1</insert-markup>
.odyssey-menulist__item--error
Error version
<insert-markup>components.menu.list.item-2</insert-markup>
.odyssey-menulist__item--top-border
1px top border
<insert-markup>components.menu.list.item-3</insert-markup>
.odyssey-menulist__item--top-border-2
2px top border
<insert-markup>components.menu.list.item-4</insert-markup>
.odyssey-menulist__item--regular-text
regular text size
<insert-markup>components.menu.list.item-5</insert-markup>
Markup 
<ul class="odyssey-menulist">
	<li class="odyssey-menulist__item [modifier class]"><a class="odyssey-menulist__link" href="https://app.odysseyattribution.co/">Item</a></li>
</ul>
Source: src/components/menu.less, line 236

Menu Profile

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.menu.profile-</insert-markup>
Markup 
<div class="odyssey-menu">
	<input class="odyssey-menu__check" id="user_dropdown" type="checkbox" hidden>
	<label class="odyssey-menu__label" for="user_dropdown">
		<img class="odyssey-menu__image" src="https://www.gravatar.com/avatar/13480b26ead21be53252b40c932b279f?size=100">
		<span class="odyssey-menu__text">Tim van Dalen</span>
		<div class="odyssey-menu__arrow"></div>
	</label>
	<div class="odyssey-menu__expand">
		<div class="odyssey-menu__content">
			<ul class="odyssey-menulist odyssey-menulist--border-radius">
				<li class="odyssey-menulist__details">
					<span class="odyssey-menulist__details-header">Tim van Dalen</span>
					<span class="odyssey-menulist__details-subheader">TimsEmail@emailtim.nl</span>
				</li>
				<li class="odyssey-menulist__item odyssey-menulist__item--top-border"><a class="odyssey-menulist__link " href="https://app.odysseyattribution.co/">
									<i class="odyssey-menulist__icon"></i>Back to Odyssey</a></li>
				<li class="odyssey-menulist__item odyssey-menulist__item_warn"><a class="odyssey-menulist__link" href="/">
				<i class="odyssey-menulist__icon"></i>Live Chat</a></li>
				<li class="odyssey-menulist__item odyssey-menulist__item--error odyssey-menulist__item--top-border-2"><a class="odyssey-menulist__link" href="/">
				<i class="odyssey-menulist__icon"></i>Sign off</a></li>
			</ul>
		</div>
	</div>
</div>
Source: src/components/menu.less, line 42

Message

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.message-</insert-markup>
This is an example message, primary use is for MessageValue in reports
Markup 
<div class="odyssey-message">This is an example message, primary use is for MessageValue in reports</div>
Source: src/components/message.less, line 1

Navigation bar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Top navigation bar

<insert-markup>components.navigation.bar-</insert-markup>
Markup 
<nav class="odyssey-nav">
	<a href="/" class="odyssey-nav__logo">
		<svg class="odyssey-nav__img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 479 87">
			<defs>
				<linearGradient id="greenGradient" y1="52.1" x2="388.59" y2="52.1" gradientUnits="userSpaceOnUse">
					<stop offset="0" stop-color="#47baaf"></stop>
					<stop offset="1" stop-color="#269189"></stop>
				</linearGradient>
			</defs>
			<path fill="url(#greenGradient)" d="M92.738 80.918V65.119h10.81c11.462 0 20.788-10.156 20.788-21.619s-9.326-21.62-20.788-21.62h-10.81V6.083h10.81c20.632 0 37.418 16.786 37.418 37.418s-16.786 37.418-37.418 37.418h-10.81zm-49.89.831c-21.09 0-38.25-17.158-38.25-38.249s17.16-38.25 38.25-38.25 38.25 17.16 38.25 38.25-17.16 38.25-38.25 38.25zm0-60.7c-11.921 0-21.62 10.53-21.62 22.451s9.699 22.45 21.62 22.45S64.467 55.42 64.467 43.5s-9.698-22.45-21.62-22.45zm143.405 25.505V80.086h-16.63v-30.76l-.016-.005-24.483-42.407h18.242l6.257 10.836 16.63 28.804zm-6.67-39.64l14.778 25.596L209.14 6.914h-29.557zm271.932 39.64V80.086h-16.63v-30.76l-.016-.005-24.484-42.407h18.243l6.257 10.836 16.63 28.804zm-6.67-39.64l14.778 25.596 14.779-25.596h-29.557zm-44.376 73.173h-46.544v-14.97h46.544v14.97zm-9.134-44.052h-37.41v14.966h37.41V36.035zm7.515-29.122h-44.925V21.88h44.925V6.913zM234.413 42.351l-11.171 11.171c-11.023-11.023-11.023-28.958 0-39.982 11.023-11.023 28.958-11.023 39.982 0l-11.172 11.172c-4.87-4.871-13.356-5.459-18.227-.588-4.87 4.87-4.283 13.356.588 18.227zm15.87 20.3c-5.197 5.196-14.208 4.608-19.404-.587l-11.171 11.171c11.347 11.347 29.81 11.347 41.158 0 11.347-11.347 11.347-29.81 0-41.158L249.693 43.25c5.196 5.195 5.784 14.207.588 19.403zm50.836-20.3l-11.172 11.171c-11.023-11.023-11.023-28.958 0-39.982s28.959-11.023 39.982 0l-11.171 11.172c-4.871-4.871-13.356-5.459-18.227-.588s-4.283 13.356.588 18.227zm15.869 20.3c-5.196 5.196-14.208 4.608-19.403-.587l-11.172 11.171c11.348 11.347 29.811 11.347 41.158 0s11.347-29.81 0-41.158L316.4 43.25c5.195 5.195 5.783 14.207.588 19.403z"></path>
		</svg>
	</a>
	<div class="odyssey-menu odyssey-menu_dark">
		<input class="odyssey-menu__check" id="user_dropdown_nav" type="checkbox" hidden>
		<label class="odyssey-menu__label" for="user_dropdown_nav">
			<img class="odyssey-menu__image" src="https://www.gravatar.com/avatar/13480b26ead21be53252b40c932b279f?size=100">
			<span class="odyssey-menu__text">Tim van Dalen</span>
			<div class="odyssey-menu__arrow"></div>
		</label>
		<div class="odyssey-menu__expand">
			<div class="odyssey-menu__content">
				<ul class="odyssey-menulist">
					<li class="odyssey-menulist__item"><a class="odyssey-menulist__link" href="https://app.odysseyattribution.co/">Back to Odyssey</a></li>
					<li class="odyssey-menulist__item odyssey-menulist__item_warn"><a class="odyssey-menulist__link" href="/">Sign off</a></li>
				</ul>
			</div>
		</div>
	</div>
</nav>
Source: src/components/nav.less, line 3

Pagination bar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.pagination.bar-</insert-markup>
Page 5 of 10
Markup 
<div class="odyssey-pagination">
	<span class="odyssey-pagination__indicator">Page 5 of 10</span>
	<div class="odyssey-pagination__container odyssey-pagination__container--right">
		<div class="odyssey-pagination__select">
			<select class="odyssey-pagination__container-rows-per-page">
				<option>5 rows</option>
				<option>10 rows</option>
				<option>20 rows</option>
				<option>50 rows</option>
			</select>
		</div>
		<section class="odyssey-pagination__container">
			<button class="odyssey-pagination__container-button odyssey-pagination__container-button--disabled">
				<span class="odyssey-pagination__container-button--left-arrow">
			</button>
			<button class="odyssey-pagination__container-button odyssey-pagination__container-button--first">
					1
			</button>
			<button  class="odyssey-pagination__container-button">
					4
			</button>
			<button class="odyssey-pagination__container-button odyssey-pagination__container-button--active">
					5
			</button>
			<button class="odyssey-pagination__container-button">
					6
			</button>
			<button class="odyssey-pagination__container-button odyssey-pagination__container-button--last">
					10
			</button>
			<button class="odyssey-pagination__container-button">
				<span class="odyssey-pagination__container-button--right-arrow">
			</button>
		</section>
	</div>
</div>
Source: src/components/pagination_bar.less, line 1

Progress bar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.progress.bar-</insert-markup>
.odyssey-progress__bar_warn
Warning bar
<insert-markup>components.progress.bar-0</insert-markup>
.odyssey-progress__bar_error
Error bar
<insert-markup>components.progress.bar-1</insert-markup>
Markup 
<div class="odyssey-progress" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
	<div class="odyssey-progress__bar [modifier class]" style="width: 70%;"></div>
</div>
Source: src/components/progress.less, line 1

Ratio

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Used to indicate ratio of things

<insert-markup>components.ratio-</insert-markup>

Ratio information

Markup 
<div class="odyssey-ratio">
	<div class="odyssey-tooltip odyssey-tooltip--top-left">
		<p>Ratio information</p>
	</div>
	<div class="odyssey-ratio__bars">
		<div class="odyssey-ratio__bar odyssey-ratio__bar--warn" style="width: 18%"></div>
		<div class="odyssey-ratio__bar odyssey-ratio__bar--error" style="width: 18%"></div>
		<div class="odyssey-ratio__bar odyssey-ratio__bar--success" style="width: 18%"></div>
		<div class="odyssey-ratio__bar odyssey-ratio__bar--info" style="width: 18%"></div>
		<div class="odyssey-ratio__bar odyssey-ratio__bar--attention" style="width: 18%"></div>
	</div>
</div>
Source: src/components/ratio.less, line 1

Sidebar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.sidebar_new-</insert-markup>
Markup 
<aside class="odyssey_sidebar">
<hr class="odyssey_extender__hr">
<input id="odyssey_extender"class="odyssey_extender__input" type="checkbox">
<label for="odyssey_extender" class="odyssey_extender__label"></label>
<div class="odyssey_sidebar-item odyssey_sidebar-item__selected">
	<input id="collapsible1" class="odyssey_toggle"type="checkbox">
	<label for="collapsible1" class="odyssey_lbl odyssey_lbl-toggle">
	<i class="odyssey-sidebar__icon odyssey-icon-alert"></i>
	<span class="odyssey-sidebar__text">Some Text</span>
	</label>
	<div class="collapsible-content">
		<label class="odyssey_lbl odyssey_lbl__subitem odyssey_lbl__selected">
		<span class="odyssey-sidebar__text">Some Text</span>
		</label>
		<label class="odyssey_lbl odyssey_lbl__subitem">
		<span class="odyssey-sidebar__text">Some Text</span>
		</label>
	</div>
</div>
<div class="odyssey_sidebar-item">
	<label class="odyssey_lbl">
	<i class="odyssey-sidebar__icon odyssey-icon-alert"></i>
	<span class="odyssey-sidebar__text">Some Text</span>
	</label>
</div>
<div class="odyssey_sidebar-item odyssey_sidebar-item__bottom">
	<label class="odyssey_lbl">
	<i class="odyssey-sidebar__icon odyssey-icon-alert"></i>
	<span class="odyssey-sidebar__text">Some Text</span>
	</label>
</div>
<div class="odyssey_sidebar-item">
	<input id="collapsible2" class="odyssey_toggle"type="checkbox">
	<label for="collapsible2" class="odyssey_lbl odyssey_lbl-toggle">
	<i class="odyssey-sidebar__icon odyssey-icon-alert"></i>
	<span class="odyssey-sidebar__text">Some Text</span>
	</label>
	<div class="collapsible-content">
	<div class="content-inner">
		<label class="odyssey_lbl odyssey_lbl__subitem">
		<span class="odyssey-sidebar__text">Some Text</span>
		</label>
		<label class="odyssey_lbl odyssey_lbl__subitem">
		<span class="odyssey-sidebar__text">Some Text</span>
		</label>
	</div>
	</div>
</div>
</aside>
Source: src/components/sidebar.less, line 1

Snackbar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Snackbars are pop-up messages that confirm user actions and provide direct used feedback of the performed action. Components may or may not include an icon and/or undo option. (the style="position: absolute" should not be copied)

<insert-markup>components.snackbar-</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

.odyssey-snackbar--warning
Warning message
<insert-markup>components.snackbar-0</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

.odyssey-snackbar--success
Success message
<insert-markup>components.snackbar-1</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

.odyssey-snackbar--info
Information message
<insert-markup>components.snackbar-2</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

.odyssey-snackbar--error
Error message
<insert-markup>components.snackbar-3</insert-markup>

Input for user feedback of performed action.

Description for user feedback of performed action.

Markup 
<div class="odyssey-snackbar [modifier class]">
	<i class="odyssey-snackbar__icon"></i>
	<div class="odyssey-snackbar__text-container">
		<p class="odyssey-snackbar__text odyssey-snackbar__text--bold">Input for user feedback of performed action.</p>
		<p class="odyssey-snackbar__text">Description for user feedback of performed action.</p>
	</div>
</div>
Source: src/components/snackbar.less, line 1

Stepper

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.stepper-</insert-markup>
1 Select Source
2 Rename
3 Summarize
Markup 
<div class="odyssey-stepper">
	<div class="odyssey-stepper__header">
		<div class="odyssey-stepper__header__item odyssey-stepper__header__item--completed">
			<span class="odyssey-stepper__header__item__icon">1</span>
			<span class="odyssey-stepper__header__item__title">Select Source</span>
		</div>
		<hr class="odyssey-stepper__header__divider">
		<div class="odyssey-stepper__header__item  odyssey-stepper__header__item--active">
			<span class="odyssey-stepper__header__item__icon">2</span>
			<span class="odyssey-stepper__header__item__title">Rename</span>
		</div>
		<hr class="odyssey-stepper__header__divider">
		<div class="odyssey-stepper__header__item odyssey-stepper__header__item--disabled">
			<span class="odyssey-stepper__header__item__icon">3</span>
			<span class="odyssey-stepper__header__item__title">Summarize</span>
		</div>
	</div>
	<div class="odyssey-stepper__content">
		<div class="odyssey-stepper__content__step">
			<!-- content -->
		</div>
		<div class="odyssey-stepper__content__step odyssey-stepper__content__step--active">
			<!-- content -->
		</div>
		<div class="odyssey-stepper__content__step">
			<!-- content -->
		</div>
	</div>
	<div class="odyssey-stepper__footer">
		<button class="odyssey-stepper__footer__back odyssey-button odyssey-button--secondary odyssey-button--inverted odyssey-button--large">Back</button>
		<button class="odyssey-stepper__footer__cancel">Cancel</button>
		<button class="odyssey-stepper__footer__next odyssey-button odyssey-button--secondary odyssey-button--large">Finish</button>
	</div>
</div>
Source: src/components/stepper.less, line 1

Table

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.table-</insert-markup>
Source
Source
Type Length in clicks
Current Commission Suggested Ad spend Suggested Commission
Action
Action
Total
Total
 --/--
n/a
 18.18
Total
 $4
Weigted Avarage
 $21592
Total
 $4
Weigted Avarage
 --/--
n/a
Direct (No source)
Direct (No source)
 Other 3.90 CPS: 4% $6657 CPS: 4%
a
Paid Search
Paid Search
 Other 5.31 CPC: $4 $5662 CPC: $4
a
Affiliates
Affiliates
 Other 8.97 Fixed Fee: $4 $9173 Fixed Fee: $4
a
Markup 
<div class="odyssey-table__wrapper-outer">
	<div class="odyssey-table__wrapper">
		<table class="odyssey_table">
			<thead class="odyssey_table__headers">
				<tr>
					<th class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Source</div>
						<div class="odyssey_table__first-col-content">
							<a href="" class="odyssey_table__header-link--sortable">
							Source
								<div class="odyssey_table__header-sort">
									<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending"/>
									<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
								</div>
							<a>
						</div>
					</th>
					<th class="odyssey-table--columns-center-align">Type</th>
					<th class="odyssey-table--columns-right-align">
						<a href="" class="odyssey_table__header-link--sortable odyssey_table__header-link--sortable--active">
							Length in clicks
							<div class="odyssey_table__header-sort">
								<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending odyssey_table__header-sort-icon--active"/>
								<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
							</div>
						</a>
					</th>
					<th class="odyssey-table--columns-right-align odyssey-table--not-sortable">Current Commission</th>
					<th class="odyssey-table--columns-right-align odyssey-table--not-sortable">Suggested Ad spend</th>
					<th class="odyssey-table--columns-right-align odyssey-table--not-sortable">Suggested Commission</th>
					<th class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey_table__last-col-mock">Action</div>
						<div class="odyssey_table__last-col-content">Action</div>
					</th>
				</tr>
			</thead>
			<tbody class="odyssey_table__rows">
				<tr class="odyssey_table__total-row">
					<td class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Total</div>
						<div class="odyssey_table__first-col-content">Total</div>
					</td>
					<td class="odyssey-table--columns-center-align">--/--<div class="odyssey_table__total-row__description">n/a</div></td>
					<td class="odyssey-table--columns-right-align">18.18<div class="odyssey_table__total-row__description">Total</div></td>
					<td class="odyssey-table--columns-right-align">$4<div class="odyssey_table__total-row__description">Weigted Avarage</div></td>
					<td class="odyssey-table--columns-right-align">$21592<div class="odyssey_table__total-row__description">Total</div></td>
					<td class="odyssey-table--columns-right-align">$4<div class="odyssey_table__total-row__description">Weigted Avarage</div></td>
					<td class="odyssey-table--columns-center-align">--/--<div class="odyssey_table__total-row__description">n/a</div></td>
				</tr>
				<tr>
					<td class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Direct (No source)</div>
						<div class="odyssey_table__first-col-content">Direct (No source)</div>
					</td>
					<td class="odyssey-table--columns-center-align"><span class="odyssey-label">Other<span></td>
					<td class="odyssey-table--columns-right-align">3.90</td>
					<td class="odyssey-table--columns-right-align">CPS: 4%</td>
					<td class="odyssey-table--columns-right-align">$6657</td>
					<td class="odyssey-table--columns-right-align">CPS: 4%</td>
					<td class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Paid Search</div>
						<div class="odyssey_table__first-col-content">Paid Search</div>
					</td>
					<td class="odyssey-table--columns-center-align"><span class="odyssey-label odyssey-label--attention">Other<span></td>
					<td class="odyssey-table--columns-right-align">5.31</td>
					<td class="odyssey-table--columns-right-align">CPC: $4</td>
					<td class="odyssey-table--columns-right-align">$5662</td>
					<td class="odyssey-table--columns-right-align">CPC: $4</td>
					<td class="odyssey-table--columns-right-align  odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="odyssey-table--columns-left-align odyssey_table__first-col">
						<div class="odyssey_table__first-col-mock">Affiliates</div>
						<div class="odyssey_table__first-col-content">Affiliates</div>
					</td>
					<td class="odyssey-table--columns-center-align"><span class="odyssey-label odyssey-label--success">Other<span></td>
					<td class="odyssey-table--columns-right-align">8.97</td>
					<td class="odyssey-table--columns-right-align">Fixed Fee: $4</td>
					<td class="odyssey-table--columns-right-align">$9173</td>
					<td class="odyssey-table--columns-right-align">Fixed Fee: $4</td>
					<td class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
Source: src/components/table.less, line 1

Table with checkboxes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.table.checkboxes-</insert-markup>

https://ad.doubleclick.net/ddm/trackclk/N125203.3734862NPL-DPGMEDIA/B26261348.310785836;dc_trk_aid=503729877;dc_trk_cid=155986029;dc_dbm_token=${DC_DBM_TOKEN};dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;ltd=?utm_source=Odyssey_Partnerships&utm_medium=affiliate&utm_campaign=653&utm_content=tekstlink_financieren_occasions

Markup 
<div class="odyssey-scrollable-table-value">
	<p class="odyssey-scrollable-table-value__text">https://ad.doubleclick.net/ddm/trackclk/N125203.3734862NPL-DPGMEDIA/B26261348.310785836;dc_trk_aid=503729877;dc_trk_cid=155986029;dc_dbm_token=${DC_DBM_TOKEN};dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;ltd=?utm_source=Odyssey_Partnerships&utm_medium=affiliate&utm_campaign=653&utm_content=tekstlink_financieren_occasions</p>
</div>
Source: src/components/table.less, line 447

Table with checkboxes

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.table.checkboxes-</insert-markup>

https://ad.doubleclick.net/ddm/trackclk/N125203.3734862NPL-DPGMEDIA/B26261348.310785836;dc_trk_aid=503729877;dc_trk_cid=155986029;dc_dbm_token=${DC_DBM_TOKEN};dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;ltd=?utm_source=Odyssey_Partnerships&utm_medium=affiliate&utm_campaign=653&utm_content=tekstlink_financieren_occasions

Markup 
<div class="odyssey-scrollable-table-value">
	<p class="odyssey-scrollable-table-value__text">https://ad.doubleclick.net/ddm/trackclk/N125203.3734862NPL-DPGMEDIA/B26261348.310785836;dc_trk_aid=503729877;dc_trk_cid=155986029;dc_dbm_token=${DC_DBM_TOKEN};dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;ltd=?utm_source=Odyssey_Partnerships&utm_medium=affiliate&utm_campaign=653&utm_content=tekstlink_financieren_occasions</p>
</div>
Source: src/components/table.less, line 690

Table Multi-line Data

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Add the odyssey_table--56px modifier to the odyssey_table element to be able to use multi-line data rows

<insert-markup>components.table.multiline-</insert-markup>
Partner Tracking Contract Date Joined Comission Earned Actions
Adidas

Coupon 0% Commission

Online sale 2%

Loyalty IO 2% Commission

Online sale 2%

 10 Mar, 2021 $6657
a
Decathlon

Coupon 2% Commission

Online sale 5%

Loyalty IO 5% Commission

Online sale 5%

 10 Mar, 2021 $5662
a
Gamestop

Coupon 5% Commission

Online sale 6%

Loyalty IO 15% Commission

Online sale 10%

 10 Mar, 2021 $910703
a
Markup 
<div class="odyssey-table__wrapper-outer">
	<div class="odyssey-table__wrapper">
		<table class="odyssey_table odyssey_table--56px">
			<thead class="odyssey_table__headers">
				<tr>
					<th class="odyssey-table__row-selector">
						<input type="checkbox" id="row0"/>
						<label class="odyssey-check__label" for="row0"></label>
					</th>
					<th class="odyssey-table--columns-left-align">
						<a class="odyssey_table__header-link--sortable">Partner</a>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending"/>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
					</th>
					<th class="odyssey-table--columns-left-align">
						Tracking
					</th>
					<th class="odyssey-table--columns-left-align">
						Contract
					</th>
					<th class="odyssey-table--columns-right-align">
						<a class="odyssey_table__header-link--sortable">Date Joined</a>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending"/>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
					</th>
					<th class="odyssey-table--columns-right-align">
						<a class="odyssey_table__header-link--sortable">Comission Earned</a>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--ascending"/>
						<img class="odyssey_table__header-sort-icon odyssey_table__header-sort-icon--descending"/>
					</th>
					<th class="odyssey-table--columns-right-align">Actions</th>
				</tr>
			</thead>
			<tbody class="odyssey_table__rows">
				<tr>
					<td class="odyssey-table__row-selector">
						<input type="checkbox" id="row1"/>
						<label class="odyssey-check__label" for="row1"></label>
					</td>
					<td class="odyssey-table--columns-left-align">Adidas</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Coupon 0% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 2%</p>
					</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Loyalty IO 2% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 2%</p>
					</td>
					<td class="odyssey-table--columns-right-align">10 Mar, 2021</td>
					<td class="odyssey-table--columns-right-align">$6657</td>
					<td class="odyssey-table--columns-right-align  odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="odyssey-table__row-selector">
						<input type="checkbox" id="row2"/>
						<label class="odyssey-check__label" for="row2"></label>
					</td>
					<td class="odyssey-table--columns-left-align">Decathlon</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Coupon 2% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 5%</p>
					</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Loyalty IO 5% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 5%</p>
					</td>
					<td class="odyssey-table--columns-right-align">10 Mar, 2021</td>
					<td class="odyssey-table--columns-right-align">$5662</td>
					<td class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td class="odyssey-table__row-selector">
						<input type="checkbox" id="row3"/>
						<label class="odyssey-check__label" for="row3"></label>
					</td>
					<td class="odyssey-table--columns-left-align">Gamestop</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Coupon 5% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 6%</p>
					</td>
					<td class="odyssey-table--columns-left-align">
						<p class="odyssey-table__multiline-head">Loyalty IO 15% Commission</p>
						<p class="odyssey-table__multiline-sub">Online sale 10%</p>
					</td>
					<td class="odyssey-table--columns-right-align">10 Mar, 2021</td>
					<td class="odyssey-table--columns-right-align">$910703</td>
					<td class="odyssey-table--columns-right-align odyssey_table__last-col">
						<div class="odyssey-menu__mock">a</div>
						<div class="odyssey-menu__wrapper">
							<div class="odyssey-menu odyssey-menu--icon-only">
								<label class="odyssey-menu__label odyssey-menu__label-hide-text-mobile">
									<div class="odyssey-menu__arrow"></div>
								</label>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
Source: src/components/table.less, line 514

Tool tip

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.tooltip-</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--bottom-left
bottom left
<insert-markup>components.tooltip-0</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--bottom-middle
bottom middle
<insert-markup>components.tooltip-1</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--bottom-right
bottom right
<insert-markup>components.tooltip-2</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--top-left
top left
<insert-markup>components.tooltip-3</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--top-middle
top middle
<insert-markup>components.tooltip-4</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--top-right
top right
<insert-markup>components.tooltip-5</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--left-top
left top
<insert-markup>components.tooltip-6</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--left-middle
left middle
<insert-markup>components.tooltip-7</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--left-bottom
left bottom
<insert-markup>components.tooltip-8</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--right-top
right top
<insert-markup>components.tooltip-9</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--right-middle
right middle
<insert-markup>components.tooltip-10</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

.odyssey-tooltip--right-bottom
right bottom
<insert-markup>components.tooltip-11</insert-markup>

The average number of touchpoints within a customer journey of which the respective traffic source is a part of.

Markup 
<div class="odyssey-tooltip [modifier class]">
	<p>The average number of touchpoints within a customer journey of which the respective traffic source is a part of. </p>
</div>
Source: src/components/tooltip.less, line 4

Transaction Explorer

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

<insert-markup>components.transaction.explorer-</insert-markup>
Transaction Journey

tennis racket

General exact mobile

Google

Paid Search

Direct

Worldwidecoupons.com
(View performance)

Affiliates
€ 60,15
Markup 
<div class="odyssey-transaction__journey-wrapper">
	<h6 class="odyssey-transaction__journey-header">Transaction Journey</h6>
	<div class="odyssey-transaction__journey">
		<div class="odyssey-transaction__touchpoint">
			<div class="icon-wrapper">
				<div class="icon channel-icon-paid-search"></div> <span class="journey-route"></span>
			</div>
			<div class="journey-touchpoints">
				<p>
					tennis racket
				</p>
				<p>General exact mobile</p>
				<p>Google</p>
				<h6>Paid Search</h6>
			</div>
		</div>
		<div class="odyssey-transaction__touchpoint">
			<div class="icon-wrapper">
				<div class="icon channel-icon-direct"></div> <span class="journey-route"></span>
			</div>
			<div class="journey-touchpoints">
				<p>
					Direct
				</p>
			</div>
		</div>
		<div class="odyssey-transaction__touchpoint">
			<div class="icon-wrapper">
				<div class="icon channel-icon-affiliate"></div> <span class="journey-route"></span>
			</div>
			<div class="journey-touchpoints">
				<p>
					Worldwidecoupons.com
					<br><small><a href="">(View
							performance)</a></small>
				</p>
				<h6>Affiliates</h6>
			</div>
		</div>
		<div class="odyssey-transaction__touchpoint">
			<div class="icon-wrapper">
				<div class="icon transaction-transaction-icon"></div> <span class="journey-route"></span>
			</div> <label>Transaction</label>
			<h6 class="journey-transaction-value">€&nbsp;60,15</h6>
		</div>
	</div>
</div>
Source: src/components/transaction-explorer.less, line 1