Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
<div class="araxxe-screenshot-bubble"><img class="araxxe-screenshot-bubble--image" src="/molecule/bubble/screenshot-bubble/screenshot-bubble.jpg"/>
<div class="araxxe-screenshot-bubble--panel">
<button class="araxxe-dot -s48 -color-shade-30 -clickable -fill-shade-100">
<span class="araxxe-icon araxxe-glyph-zoom-in -s24"></span>
</button>
</div>
</div>
<div class="araxxe-screenshot-bubble -me"><img class="araxxe-screenshot-bubble--image" src="/molecule/bubble/screenshot-bubble/screenshot-bubble.jpg"/>
<div class="araxxe-screenshot-bubble--panel">
<button class="araxxe-dot -s48 -color-shade-30 -clickable -fill-shade-100">
<span class="araxxe-icon araxxe-glyph-zoom-in -s24"></span>
</button>
</div>
</div>.araxxe-screenshot-bubble
img.araxxe-screenshot-bubble--image(src='/molecule/bubble/screenshot-bubble/screenshot-bubble.jpg')
.araxxe-screenshot-bubble--panel
button.araxxe-dot.-s48.-color-shade-30.-clickable.-fill-shade-100
span.araxxe-icon.araxxe-glyph-zoom-in.-s24
.araxxe-screenshot-bubble.-me
img.araxxe-screenshot-bubble--image(src='/molecule/bubble/screenshot-bubble/screenshot-bubble.jpg')
.araxxe-screenshot-bubble--panel
button.araxxe-dot.-s48.-color-shade-30.-clickable.-fill-shade-100
span.araxxe-icon.araxxe-glyph-zoom-in.-s24<div class="araxxe-speech-bubble">
Speech bubble text
in
multiple lines.
</div>
<div class="araxxe-speech-bubble -me">
Speech bubble text
in
multiple lines.
</div>.araxxe-speech-bubble.
Speech bubble text in multiple lines.
.araxxe-speech-bubble.-me.
Speech bubble text in multiple lines.
<div class="araxxe-calendar-table">
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">JAN
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">FEB
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">MAR
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">APR
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">MAY
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">JUN
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">JUL
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">AUG
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">SEP
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit -selected ">OCT
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">NOV
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">DEC
</button>
</div>
</div>
</div>
<div class="araxxe-calendar-table">
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell"></div>
<div class="araxxe-calendar-table--cell"></div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit -selected ">1
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">2
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">3
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">4
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">5
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">6
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">7
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">8
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">9
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">10
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">11
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">12
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">13
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">14
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">15
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">16
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">17
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">18
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">19
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">20
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">21
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">22
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">23
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">24
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">25
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">26
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">27
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">28
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">29
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">30
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">31
</button>
</div>
<div class="araxxe-calendar-table--cell"></div>
<div class="araxxe-calendar-table--cell"></div>
</div>
</div>
<div class="araxxe-calendar-table">
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-icon araxxe-glyph-arrow-left-rounded -color-shade-50 -s28 -clickable"></button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">2014
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">2018
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit " disabled="disabled">2011
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">2015
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit -selected ">2019
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit " disabled="disabled">2012
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">2016
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit -current">2020
</button>
</div>
</div>
<div class="araxxe-calendar-table--line">
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">2013
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-calendar-unit ">2017
</button>
</div>
<div class="araxxe-calendar-table--cell">
<button class="araxxe-icon araxxe-glyph-arrow-right-rounded -color-shade-50 -s28 -clickable"></button>
</div>
</div>
</div>.araxxe-calendar-table
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
JAN
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
FEB
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
MAR
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
APR
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
MAY
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
JUN
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
JUL
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
AUG
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
SEP
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.-selected.
OCT
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
NOV
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
DEC
.araxxe-calendar-table
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
.araxxe-calendar-table--cell
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.-selected.
1
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
2
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
3
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
4
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
5
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
6
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
7
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
8
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
9
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
10
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
11
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
12
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
13
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
14
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
15
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
16
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
17
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
18
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
19
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
20
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
21
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
22
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
23
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
24
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
25
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
26
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
27
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
28
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
29
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
30
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
31
.araxxe-calendar-table--cell
.araxxe-calendar-table--cell
.araxxe-calendar-table
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-icon.araxxe-glyph-arrow-left-rounded.-color-shade-50.-s28.-clickable
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
2014
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
2018
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit(disabled).
2011
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
2015
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.-selected.
2019
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit(disabled).
2012
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
2016
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.-current.
2020
.araxxe-calendar-table--line
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
2013
.araxxe-calendar-table--cell
button.araxxe-calendar-unit.
2017
.araxxe-calendar-table--cell
button.araxxe-icon.araxxe-glyph-arrow-right-rounded.-color-shade-50.-s28.-clickable<button class="araxxe-card-numeral"><span class="araxxe-card-numeral--content"><span class="araxxe-card-numeral--numeral"><span class="araxxe-card-numeral--number">42</span></span><span class="araxxe-card-numeral--text">card numeral</span></span>
</button>
<button class="araxxe-card-numeral -accent -clickable"><span class="araxxe-card-numeral--content"><span class="araxxe-card-numeral--numeral"><span class="araxxe-card-numeral--icon araxxe-glyph-stars"></span><span class="araxxe-card-numeral--number">42</span></span><span class="araxxe-card-numeral--text">card numeral</span></span>
</button>
<button class="araxxe-card-numeral"><span class="araxxe-card-numeral--content"><span class="araxxe-card-numeral--numeral"><span class="araxxe-card-numeral--number">42 <span class="araxxe-unit">unit</span></span></span><span class="araxxe-card-numeral--text">card numeral</span></span><span class="araxxe-card-numeral--footer">
<span class="araxxe-icon araxxe-glyph-data -color-main -s24"></span></span>
</button>button.araxxe-card-numeral
span.araxxe-card-numeral--content
span.araxxe-card-numeral--numeral
span.araxxe-card-numeral--number 42
span.araxxe-card-numeral--text card numeral
button.araxxe-card-numeral.-accent.-clickable
span.araxxe-card-numeral--content
span.araxxe-card-numeral--numeral
span.araxxe-card-numeral--icon.araxxe-glyph-stars
span.araxxe-card-numeral--number 42
span.araxxe-card-numeral--text card numeral
button.araxxe-card-numeral
span.araxxe-card-numeral--content
span.araxxe-card-numeral--numeral
span.araxxe-card-numeral--number
| 42
span.araxxe-unit unit
span.araxxe-card-numeral--text card numeral
span.araxxe-card-numeral--footer
span.araxxe-icon.araxxe-glyph-data.-color-main.-s24<div class="araxxe-card-stat -service-a2psms">
<div class="araxxe-card-stat--slot">
<div class="araxxe-vertical-spacing">
<div class="araxxe-vertical-spacing--line -align-center"><span class="araxxe-number -color-service-a2psms -ts30 ">1 234</span>
</div>
<div class="araxxe-vertical-spacing--line -align-center">
<p class="araxxe-description">Description
</p>
</div>
</div>
</div>
<hr class="araxxe-card-stat--separator"/>
<div class="araxxe-card-stat--slot">
<div class="araxxe-vertical-spacing -s30">
<div class="araxxe-vertical-spacing--line">
<div class="araxxe-measure-legend">
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--number -w40"><span class="araxxe-number -color-service-a2psms -ts18 -bold">3,5</span>
</div>
<div class="araxxe-measure-legend--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--spacer"></div>
<div class="araxxe-measure-legend--legend">legend</div>
</div>
</div>
</div>
<div class="araxxe-vertical-spacing--line">
<div class="araxxe-measure-legend">
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--number -w40"><span class="araxxe-number -color-service-a2psms -ts18 -bold">3,5</span>
</div>
<div class="araxxe-measure-legend--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--spacer"></div>
<div class="araxxe-measure-legend--legend">legend</div>
</div>
</div>
</div>
</div>
</div>
<div class="araxxe-card-stat--footer">
<div class="araxxe-operator-logo -block -contained -h44" style="background-image: url("/atom/operator-logo/icon/1147.png")"></div>
</div>
</div>
<div class="araxxe-card-stat -selected -service-a2psms">
<div class="araxxe-card-stat--slot">
<div class="araxxe-vertical-spacing">
<div class="araxxe-vertical-spacing--line -align-center"><span class="araxxe-number -color-service-a2psms -ts30 ">1 234</span>
</div>
<div class="araxxe-vertical-spacing--line -align-center">
<p class="araxxe-description">Description
</p>
</div>
</div>
</div>
<hr class="araxxe-card-stat--separator"/>
<div class="araxxe-card-stat--slot">
<div class="araxxe-vertical-spacing -s30">
<div class="araxxe-vertical-spacing--line">
<div class="araxxe-measure-legend">
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--number -w40"><span class="araxxe-number -color-service-a2psms -ts18 -bold">3,5</span>
</div>
<div class="araxxe-measure-legend--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--spacer"></div>
<div class="araxxe-measure-legend--legend">legend</div>
</div>
</div>
</div>
<div class="araxxe-vertical-spacing--line">
<div class="araxxe-measure-legend">
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--number -w40"><span class="araxxe-number -color-service-a2psms -ts18 -bold">3,5</span>
</div>
<div class="araxxe-measure-legend--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--spacer"></div>
<div class="araxxe-measure-legend--legend">legend</div>
</div>
</div>
</div>
</div>
</div>
<div class="araxxe-card-stat--footer"><span class="araxxe-text-info">A footer <br/> text</span>
</div>
</div>
<div class="araxxe-card-stat -selected -service-a2psms">
<div class="araxxe-card-stat--slot">
<div class="araxxe-horizontal-spacing -s15 -middle -center">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-rate-chart -s48 -fill-service-a2psms">
<div class="araxxe-rate-chart--background -fill-shade-100 ">
<div class="araxxe-rate-chart--progress -p34">
<div class="araxxe-rate-chart--hs"></div>
<div class="araxxe-rate-chart--he"></div>
</div>
</div>
<div class="araxxe-rate-chart--hole -fill-background-service-a2psms">
</div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column"><span class="araxxe-number -color-service-a2psms -ts48 ">34<span class="araxxe-number--half">%</span></span>
</div>
</div>
</div>
<div class="araxxe-card-stat--footer"><span class="araxxe-text-info">A footer text</span>
</div>
</div>
<div class="araxxe-card-stat -service-simbox">
<div class="araxxe-card-stat--header">Title
</div>
<hr class="araxxe-card-stat--separator"/>
<div class="araxxe-card-stat--slot">
<div class="araxxe-vertical-spacing">
<div class="araxxe-vertical-spacing--line -align-center"><span class="araxxe-number -color-service-simbox -ts30 ">1 234</span>
</div>
<div class="araxxe-vertical-spacing--line -align-center">
<p class="araxxe-description">Description
</p>
</div>
</div>
</div>
<div class="araxxe-card-stat--footer -left">
<div class="araxxe-vertical-spacing -s30">
<div class="araxxe-vertical-spacing--line">
<div class="araxxe-measure-legend">
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--number -w40"><span class="araxxe-number -color-service-simbox -ts18 -bold">3,5</span>
</div>
<div class="araxxe-measure-legend--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--spacer"></div>
<div class="araxxe-measure-legend--legend">legend</div>
</div>
</div>
</div>
<div class="araxxe-vertical-spacing--line">
<div class="araxxe-measure-legend">
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--number -w40"><span class="araxxe-number -color-service-simbox -ts18 -bold">3,5</span>
</div>
<div class="araxxe-measure-legend--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--spacer"></div>
<div class="araxxe-measure-legend--legend">legend</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="araxxe-card-stat -service-simbox">
<div class="araxxe-card-stat--header">
<span class="araxxe-icon araxxe-glyph-call -color-service-simbox -s44"></span>
</div>
<hr class="araxxe-card-stat--separator"/>
<div class="araxxe-card-stat--slot -inverted">
<div class="araxxe-vertical-spacing">
<div class="araxxe-vertical-spacing--line -align-center"><span class="araxxe-number -color-shade-100 -ts30 ">1 234</span>
</div>
<div class="araxxe-vertical-spacing--line -align-center">
<p class="araxxe-description -color-shade-100">Description
</p>
</div>
</div>
</div>
<div class="araxxe-card-stat--footer">
<div class="araxxe-vertical-spacing -s30">
<div class="araxxe-vertical-spacing--line">
<div class="araxxe-measure-legend">
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--number -w40"><span class="araxxe-number -color-service-simbox -ts18 -bold">3,5</span>
</div>
<div class="araxxe-measure-legend--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--spacer"></div>
<div class="araxxe-measure-legend--legend">legend</div>
</div>
</div>
</div>
<div class="araxxe-vertical-spacing--line">
<div class="araxxe-measure-legend">
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--number -w40"><span class="araxxe-number -color-service-simbox -ts18 -bold">3,5</span>
</div>
<div class="araxxe-measure-legend--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--spacer"></div>
<div class="araxxe-measure-legend--legend">legend</div>
</div>
</div>
</div>
</div>
</div>
</div>.araxxe-card-stat.-service-a2psms
.araxxe-card-stat--slot
.araxxe-vertical-spacing
.araxxe-vertical-spacing--line.-align-center
span.araxxe-number.-color-service-a2psms.-ts30 1 234
.araxxe-vertical-spacing--line.-align-center
p.araxxe-description.
Description
hr.araxxe-card-stat--separator
.araxxe-card-stat--slot
.araxxe-vertical-spacing.-s30
.araxxe-vertical-spacing--line
.araxxe-measure-legend
.araxxe-measure-legend--line
.araxxe-measure-legend--number.-w40
span.araxxe-number.-color-service-a2psms.-ts18.-bold 3,5
.araxxe-measure-legend--unit
span.araxxe-unit Unit
.araxxe-measure-legend--line
.araxxe-measure-legend--spacer
.araxxe-measure-legend--legend legend
.araxxe-vertical-spacing--line
.araxxe-measure-legend
.araxxe-measure-legend--line
.araxxe-measure-legend--number.-w40
span.araxxe-number.-color-service-a2psms.-ts18.-bold 3,5
.araxxe-measure-legend--unit
span.araxxe-unit Unit
.araxxe-measure-legend--line
.araxxe-measure-legend--spacer
.araxxe-measure-legend--legend legend
.araxxe-card-stat--footer
.araxxe-operator-logo.-block.-contained.-h44(style='background-image: url("/atom/operator-logo/icon/1147.png")')
.araxxe-card-stat.-selected.-service-a2psms
.araxxe-card-stat--slot
.araxxe-vertical-spacing
.araxxe-vertical-spacing--line.-align-center
span.araxxe-number.-color-service-a2psms.-ts30 1 234
.araxxe-vertical-spacing--line.-align-center
p.araxxe-description.
Description
hr.araxxe-card-stat--separator
.araxxe-card-stat--slot
.araxxe-vertical-spacing.-s30
.araxxe-vertical-spacing--line
.araxxe-measure-legend
.araxxe-measure-legend--line
.araxxe-measure-legend--number.-w40
span.araxxe-number.-color-service-a2psms.-ts18.-bold 3,5
.araxxe-measure-legend--unit
span.araxxe-unit Unit
.araxxe-measure-legend--line
.araxxe-measure-legend--spacer
.araxxe-measure-legend--legend legend
.araxxe-vertical-spacing--line
.araxxe-measure-legend
.araxxe-measure-legend--line
.araxxe-measure-legend--number.-w40
span.araxxe-number.-color-service-a2psms.-ts18.-bold 3,5
.araxxe-measure-legend--unit
span.araxxe-unit Unit
.araxxe-measure-legend--line
.araxxe-measure-legend--spacer
.araxxe-measure-legend--legend legend
.araxxe-card-stat--footer
span.araxxe-text-info
| A footer
br
| text
.araxxe-card-stat.-selected.-service-a2psms
.araxxe-card-stat--slot
.araxxe-horizontal-spacing.-s15.-middle.-center
.araxxe-horizontal-spacing--column
.araxxe-rate-chart.-s48.-fill-service-a2psms
.araxxe-rate-chart--background.-fill-shade-100
.araxxe-rate-chart--progress.-p34
.araxxe-rate-chart--hs
.araxxe-rate-chart--he
.araxxe-rate-chart--hole.-fill-background-service-a2psms.
.araxxe-horizontal-spacing--column
span.araxxe-number.-color-service-a2psms.-ts48
| 34
span.araxxe-number--half %
.araxxe-card-stat--footer
span.araxxe-text-info A footer text
.araxxe-card-stat.-service-simbox
.araxxe-card-stat--header.
Title
hr.araxxe-card-stat--separator
.araxxe-card-stat--slot
.araxxe-vertical-spacing
.araxxe-vertical-spacing--line.-align-center
span.araxxe-number.-color-service-simbox.-ts30 1 234
.araxxe-vertical-spacing--line.-align-center
p.araxxe-description.
Description
.araxxe-card-stat--footer.-left
.araxxe-vertical-spacing.-s30
.araxxe-vertical-spacing--line
.araxxe-measure-legend
.araxxe-measure-legend--line
.araxxe-measure-legend--number.-w40
span.araxxe-number.-color-service-simbox.-ts18.-bold 3,5
.araxxe-measure-legend--unit
span.araxxe-unit Unit
.araxxe-measure-legend--line
.araxxe-measure-legend--spacer
.araxxe-measure-legend--legend legend
.araxxe-vertical-spacing--line
.araxxe-measure-legend
.araxxe-measure-legend--line
.araxxe-measure-legend--number.-w40
span.araxxe-number.-color-service-simbox.-ts18.-bold 3,5
.araxxe-measure-legend--unit
span.araxxe-unit Unit
.araxxe-measure-legend--line
.araxxe-measure-legend--spacer
.araxxe-measure-legend--legend legend
.araxxe-card-stat.-service-simbox
.araxxe-card-stat--header
span.araxxe-icon.araxxe-glyph-call.-color-service-simbox.-s44
hr.araxxe-card-stat--separator
.araxxe-card-stat--slot.-inverted
.araxxe-vertical-spacing
.araxxe-vertical-spacing--line.-align-center
span.araxxe-number.-color-shade-100.-ts30 1 234
.araxxe-vertical-spacing--line.-align-center
p.araxxe-description.-color-shade-100.
Description
.araxxe-card-stat--footer
.araxxe-vertical-spacing.-s30
.araxxe-vertical-spacing--line
.araxxe-measure-legend
.araxxe-measure-legend--line
.araxxe-measure-legend--number.-w40
span.araxxe-number.-color-service-simbox.-ts18.-bold 3,5
.araxxe-measure-legend--unit
span.araxxe-unit Unit
.araxxe-measure-legend--line
.araxxe-measure-legend--spacer
.araxxe-measure-legend--legend legend
.araxxe-vertical-spacing--line
.araxxe-measure-legend
.araxxe-measure-legend--line
.araxxe-measure-legend--number.-w40
span.araxxe-number.-color-service-simbox.-ts18.-bold 3,5
.araxxe-measure-legend--unit
span.araxxe-unit Unit
.araxxe-measure-legend--line
.araxxe-measure-legend--spacer
.araxxe-measure-legend--legend legend<div class="araxxe-chat-message">
<div class="araxxe-chat-message--slot">
<div class="araxxe-dot -s36 -fill-half-main-light">AD
</div>
</div>
<div class="araxxe-chat-message--slot -expand">
<div class="araxxe-chat-message--message">
<div class="araxxe-speech-bubble">
Speech bubble text
in
multiple lines.
</div>
</div>
<div class="araxxe-chat-message--info -right"><span class="araxxe-text-info">Date</span>
</div>
</div>
</div>
<div class="araxxe-chat-message">
<div class="araxxe-chat-message--slot">
<div class="araxxe-dot -s36 -fill-half-shade-50">AD
</div>
</div>
<div class="araxxe-chat-message--slot -expand">
<div class="araxxe-chat-message--message">
<div class="araxxe-speech-bubble -me">
Speech bubble text
in
multiple lines.
</div>
</div>
<div class="araxxe-chat-message--info">
<div class="araxxe-horizontal-spacing -s5 -end">
<div class="araxxe-horizontal-spacing--column"><span class="araxxe-text-info">Date</span>
</div>
<div class="araxxe-horizontal-spacing--column">
<button class="araxxe-icon araxxe-glyph-trash -color-danger -s18 -clickable"></button>
</div>
</div>
</div>
</div>
</div>
<div class="araxxe-chat-message">
<div class="araxxe-chat-message--slot">
<div class="araxxe-dot -s36 -fill-half-shade-50">AD
</div>
</div>
<div class="araxxe-chat-message--slot -expand">
<div class="araxxe-chat-message--message">
<div class="araxxe-speech-bubble -me">
Speech bubble text
in
multiple lines.
</div>
</div>
<div class="araxxe-chat-message--message">
<div class="araxxe-speech-bubble -me">
Speech bubble text
in
multiple lines.
</div>
</div>
<div class="araxxe-chat-message--message">
<div class="araxxe-screenshot-bubble -me"><img class="araxxe-screenshot-bubble--image" src="/molecule/bubble/screenshot-bubble/screenshot-bubble.jpg"/>
<div class="araxxe-screenshot-bubble--panel">
<button class="araxxe-dot -s48 -color-shade-30 -clickable -fill-shade-100">
<span class="araxxe-icon araxxe-glyph-zoom-in -s24"></span>
</button>
</div>
</div>
</div>
<div class="araxxe-chat-message--info -right"><span class="araxxe-text-info">Date</span>
</div>
</div>
</div>
<div class="araxxe-chat-message">
<div class="araxxe-chat-message--slot">
<div class="araxxe-dot -s36 -fill-half-shade-50">AD
</div>
</div>
<div class="araxxe-chat-message--slot -expand">
<div class="araxxe-chat-message--message">
<div class="araxxe-input-group ion--input-secondary">
<div class="araxxe-input-group--slot -expand ion--group">
<textarea class="araxxe-textarea" rows="1"></textarea>
</div>
<div class="araxxe-input-group--slot -input -clickable ion--group">
<span class="araxxe-icon araxxe-glyph-attach -s24"></span>
</div>
</div>
</div>
<div class="araxxe-chat-message--info">
<div class="araxxe-horizontal-spacing -s15">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-horizontal-spacing -s5">
<div class="araxxe-horizontal-spacing--column">
<span class="araxxe-icon araxxe-glyph-enter -color-shade-75 -s16"></span>
</div>
<div class="araxxe-horizontal-spacing--column"><span class="araxxe-text-info">Tap enter to send</span>
</div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-horizontal-spacing -s5">
<div class="araxxe-horizontal-spacing--column">
<span class="araxxe-icon araxxe-glyph-shift -color-shade-75 -s16"></span>
<span class="araxxe-icon araxxe-glyph-plus -color-shade-75 -s16"></span>
<span class="araxxe-icon araxxe-glyph-enter -color-shade-75 -s16"></span>
</div>
<div class="araxxe-horizontal-spacing--column"><span class="araxxe-text-info">Shift enter to insert a line break</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>.araxxe-chat-message
.araxxe-chat-message--slot
.araxxe-dot.-s36.-fill-half-main-light.
AD
.araxxe-chat-message--slot.-expand
.araxxe-chat-message--message
.araxxe-speech-bubble.
Speech bubble text in multiple lines.
.araxxe-chat-message--info.-right
span.araxxe-text-info Date
.araxxe-chat-message
.araxxe-chat-message--slot
.araxxe-dot.-s36.-fill-half-shade-50.
AD
.araxxe-chat-message--slot.-expand
.araxxe-chat-message--message
.araxxe-speech-bubble.-me.
Speech bubble text in multiple lines.
.araxxe-chat-message--info
.araxxe-horizontal-spacing.-s5.-end
.araxxe-horizontal-spacing--column
span.araxxe-text-info Date
.araxxe-horizontal-spacing--column
button.araxxe-icon.araxxe-glyph-trash.-color-danger.-s18.-clickable
.araxxe-chat-message
.araxxe-chat-message--slot
.araxxe-dot.-s36.-fill-half-shade-50.
AD
.araxxe-chat-message--slot.-expand
.araxxe-chat-message--message
.araxxe-speech-bubble.-me.
Speech bubble text in multiple lines.
.araxxe-chat-message--message
.araxxe-speech-bubble.-me.
Speech bubble text in multiple lines.
.araxxe-chat-message--message
.araxxe-screenshot-bubble.-me
img.araxxe-screenshot-bubble--image(src='/molecule/bubble/screenshot-bubble/screenshot-bubble.jpg')
.araxxe-screenshot-bubble--panel
button.araxxe-dot.-s48.-color-shade-30.-clickable.-fill-shade-100
span.araxxe-icon.araxxe-glyph-zoom-in.-s24
.araxxe-chat-message--info.-right
span.araxxe-text-info Date
.araxxe-chat-message
.araxxe-chat-message--slot
.araxxe-dot.-s36.-fill-half-shade-50.
AD
.araxxe-chat-message--slot.-expand
.araxxe-chat-message--message
.araxxe-input-group.ion--input-secondary
.araxxe-input-group--slot.-expand.ion--group
textarea.araxxe-textarea(rows='1')
.araxxe-input-group--slot.-input.-clickable.ion--group
span.araxxe-icon.araxxe-glyph-attach.-s24
.araxxe-chat-message--info
.araxxe-horizontal-spacing.-s15
.araxxe-horizontal-spacing--column
.araxxe-horizontal-spacing.-s5
.araxxe-horizontal-spacing--column
span.araxxe-icon.araxxe-glyph-enter.-color-shade-75.-s16
.araxxe-horizontal-spacing--column
span.araxxe-text-info Tap enter to send
.araxxe-horizontal-spacing--column
.araxxe-horizontal-spacing.-s5
.araxxe-horizontal-spacing--column
span.araxxe-icon.araxxe-glyph-shift.-color-shade-75.-s16
span.araxxe-icon.araxxe-glyph-plus.-color-shade-75.-s16
span.araxxe-icon.araxxe-glyph-enter.-color-shade-75.-s16
.araxxe-horizontal-spacing--column
span.araxxe-text-info Shift enter to insert a line break<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column sorting
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column sorting
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50 -s34 -clickable"></button>
</div>
</div>
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column sorting
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sm-arrow-up -color-shade-50 -s34 -clickable"></button>
</div>
</div>
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info -ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column sorting
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column sorting
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50.-s34.-clickable
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column sorting
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sm-arrow-up.-color-shade-50.-s34.-clickable
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.-ellipsis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable<button class="araxxe-contextual-entry ion--hoverable -h44" disabled="disabled">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-checkbox -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
<button class="araxxe-contextual-entry ion--hoverable -h44 -highlighted">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-checkbox -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-checkbox-checked -color-main -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-on -color-main -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -on" role="switch" aria-checked="true"><span class="araxxe-switch--button"></span></span>
</div>
</button>
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>button.araxxe-contextual-entry.ion--hoverable.-h44(disabled)
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-checkbox.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
button.araxxe-contextual-entry.ion--hoverable.-h44.-highlighted
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-checkbox.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-checkbox-checked.-color-main.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-on.-color-main.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-on(role='switch', aria-checked='true')
span.araxxe-switch--button
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry<div class="araxxe-date-range">
<div class="araxxe-date-range--from">
<div class="araxxe-horizontal-spacing -s10 -bottom">
<div class="araxxe-horizontal-spacing--column"><span class="araxxe-unit">from</span>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-text-date" contenteditable="contenteditable">24.11.2020</div>
</div>
</div>
</div>
<div class="araxxe-date-range--between">
<span class="araxxe-icon araxxe-glyph-arrow-right -color-shade-50 -s24"></span>
</div>
<div class="araxxe-date-range--to">
<div class="araxxe-horizontal-spacing -s10 -bottom">
<div class="araxxe-horizontal-spacing--column"><span class="araxxe-unit">to</span>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-text-date" contenteditable="contenteditable">24.11.2020</div>
</div>
</div>
</div>
</div>.araxxe-date-range
.araxxe-date-range--from
.araxxe-horizontal-spacing.-s10.-bottom
.araxxe-horizontal-spacing--column
span.araxxe-unit from
.araxxe-horizontal-spacing--column
.araxxe-text-date(contenteditable='contenteditable') 24.11.2020
.araxxe-date-range--between
span.araxxe-icon.araxxe-glyph-arrow-right.-color-shade-50.-s24
.araxxe-date-range--to
.araxxe-horizontal-spacing.-s10.-bottom
.araxxe-horizontal-spacing--column
span.araxxe-unit to
.araxxe-horizontal-spacing--column
.araxxe-text-date(contenteditable='contenteditable') 24.11.2020<div class="araxxe-dot-flagged -right" style="margin: 4px 16px 0 0">
<div class="araxxe-dot-flagged--dot">
<div class="araxxe-dot -s36 -fill-valid">
<span class="araxxe-icon araxxe-glyph-call -s16"></span>
</div>
</div>
<div class="araxxe-dot-flagged--flag"><span class="araxxe-flag -fill-danger">CLI</span>
</div>
</div>
<div class="araxxe-dot-flagged -right" style="margin: 4px 16px 0 0">
<div class="araxxe-dot-flagged--dot">
<div class="araxxe-dot -s36 -fill-danger">
<span class="araxxe-icon araxxe-glyph-call -s16"></span>
</div>
</div>
<div class="araxxe-dot-flagged--flag"><span class="araxxe-flag -fill-danger -outlined">CLI</span>
</div>
</div>.araxxe-dot-flagged.-right(style='margin: 4px 16px 0 0')
.araxxe-dot-flagged--dot
.araxxe-dot.-s36.-fill-valid
span.araxxe-icon.araxxe-glyph-call.-s16
.araxxe-dot-flagged--flag
span.araxxe-flag.-fill-danger CLI
.araxxe-dot-flagged.-right(style='margin: 4px 16px 0 0')
.araxxe-dot-flagged--dot
.araxxe-dot.-s36.-fill-danger
span.araxxe-icon.araxxe-glyph-call.-s16
.araxxe-dot-flagged--flag
span.araxxe-flag.-fill-danger.-outlined CLI<div class="araxxe-dotted-circle">
<div class="araxxe-vertical-spacing -s5 -align-center">
<div class="araxxe-vertical-spacing--line"><span class="araxxe-number -color-main -ts48 ">14</span>
</div>
<div class="araxxe-vertical-spacing--line">
<p class="araxxe-description">units
</p>
</div>
</div>
</div>.araxxe-dotted-circle
.araxxe-vertical-spacing.-s5.-align-center
.araxxe-vertical-spacing--line
span.araxxe-number.-color-main.-ts48 14
.araxxe-vertical-spacing--line
p.araxxe-description.
units
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
<div style="height: 250px;">
<div class="araxxe-dropdown ion--open -left">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div style="height: 250px; margin-left: 260px;">
<div class="araxxe-dropdown ion--open -right">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div style="height: 180px; margin-left: 260px;">
<div class="araxxe-dropdown ion--open -right">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu -hmax100 -scrollable">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div style="height: 250px;">
<div class="araxxe-dropdown ion--open -block">
<div class="araxxe-dropdown--button">
<button class="araxxe-button-select -block -ellipsis -squared"><span class="araxxe-button-select--text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.</span><span class="araxxe-button-select--caret araxxe-glyph-arrow-down"></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div style="height: 250px; display: flex; flex-direction: column-reverse;">
<div class="araxxe-dropdown ion--open -top">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div style="height: 40px; margin-left: 260px; padding-top: 220px;">
<div class="araxxe-dropdown ion--open -right -top">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
div(style='height: 250px;')
.araxxe-dropdown.ion--open.-left
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
div(style='height: 250px; margin-left: 260px;')
.araxxe-dropdown.ion--open.-right
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
div(style='height: 180px; margin-left: 260px;')
.araxxe-dropdown.ion--open.-right
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu.-hmax100.-scrollable
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
div(style='height: 250px;')
.araxxe-dropdown.ion--open.-block
.araxxe-dropdown--button
button.araxxe-button-select.-block.-ellipsis.-squared
span.araxxe-button-select--text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.
span.araxxe-button-select--caret.araxxe-glyph-arrow-down
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
div(style='height: 250px; display: flex; flex-direction: column-reverse;')
.araxxe-dropdown.ion--open.-top
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
div(style='height: 40px; margin-left: 260px; padding-top: 220px;')
.araxxe-dropdown.ion--open.-right.-top
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry<div class="araxxe-field" title="Field label">
<label class="araxxe-field--label"><span class="araxxe-text-info">Field label</span>
</label>
<div class="araxxe-field--group">
<input class="araxxe-input-text" type="text"/>
</div>
</div>
<div class="araxxe-field ion--field-error" title="Standard field in error">
<label class="araxxe-field--label"><span class="araxxe-text-info">Standard field in error</span>
</label>
<div class="araxxe-field--group">
<input class="araxxe-input-text" type="text"/>
<div class="araxxe-field--message"><span class="araxxe-tooltip-field -error"><span class="araxxe-tooltip-field--icon araxxe-glyph-contact"></span><span class="araxxe-tooltip-field--text">Tooltip field</span><span class="araxxe-tooltip-field--triangle"></span></span>
</div>
</div>
</div>
<div class="araxxe-field ion--field-error" title="Field with input group in error">
<label class="araxxe-field--label"><span class="araxxe-text-info">Field with input group in error</span>
</label>
<div class="araxxe-field--group">
<div class="araxxe-input-group">
<div class="araxxe-input-group--slot -expand ion--group">
<input class="araxxe-input-text" type="text"/>
</div>
<div class="araxxe-input-group--slot -input -clickable ion--group">
<span class="araxxe-icon araxxe-glyph-date-range -color-main -s24"></span>
</div>
</div>
<div class="araxxe-field--message"><span class="araxxe-tooltip-field -error"><span class="araxxe-tooltip-field--icon araxxe-glyph-contact"></span><span class="araxxe-tooltip-field--text">Tooltip field</span><span class="araxxe-tooltip-field--triangle"></span></span>
</div>
</div>
</div>
<div class="araxxe-field ion--field-error" title="Field with secondary input group in error">
<label class="araxxe-field--label"><span class="araxxe-text-info">Field with secondary input group in error</span>
</label>
<div class="araxxe-field--group">
<div class="araxxe-input-group ion--input-secondary">
<div class="araxxe-input-group--slot -expand ion--group">
<input class="araxxe-input-text" type="text"/>
</div>
<div class="araxxe-input-group--slot -input -clickable ion--group">
<span class="araxxe-icon araxxe-glyph-attach -s24"></span>
</div>
</div>
<div class="araxxe-field--message"><span class="araxxe-tooltip-field -error"><span class="araxxe-tooltip-field--icon araxxe-glyph-contact"></span><span class="araxxe-tooltip-field--text">Tooltip field</span><span class="araxxe-tooltip-field--triangle"></span></span>
</div>
</div>
</div>
<div class="araxxe-field ion--field-error" title="Select field with icon">
<label class="araxxe-field--label"><span class="araxxe-text-info">Select field with icon</span>
</label>
<div class="araxxe-field--group">
<div class="araxxe-input-group">
<div class="araxxe-input-group--slot -expand ion--group">
<button class="araxxe-input-select"><span class="araxxe-input-select--input">Select</span><span class="araxxe-input-select--button">
<span class="araxxe-icon araxxe-glyph-arrow-down -color-main -s24"></span></span></button>
</div>
<div class="araxxe-input-group--slot -input -clickable ion--group">
<span class="araxxe-icon araxxe-glyph-date-range -color-main -s24"></span>
</div>
</div>
<div class="araxxe-field--message"><span class="araxxe-tooltip-field -error"><span class="araxxe-tooltip-field--icon araxxe-glyph-contact"></span><span class="araxxe-tooltip-field--text">Tooltip field</span><span class="araxxe-tooltip-field--triangle"></span></span>
</div>
</div>
</div>.araxxe-field(title='Field label')
label.araxxe-field--label
span.araxxe-text-info Field label
.araxxe-field--group
input.araxxe-input-text(type='text')
.araxxe-field.ion--field-error(title='Standard field in error')
label.araxxe-field--label
span.araxxe-text-info Standard field in error
.araxxe-field--group
input.araxxe-input-text(type='text')
.araxxe-field--message
span.araxxe-tooltip-field.-error
span.araxxe-tooltip-field--icon.araxxe-glyph-contact
span.araxxe-tooltip-field--text Tooltip field
span.araxxe-tooltip-field--triangle
.araxxe-field.ion--field-error(title='Field with input group in error')
label.araxxe-field--label
span.araxxe-text-info Field with input group in error
.araxxe-field--group
.araxxe-input-group
.araxxe-input-group--slot.-expand.ion--group
input.araxxe-input-text(type='text')
.araxxe-input-group--slot.-input.-clickable.ion--group
span.araxxe-icon.araxxe-glyph-date-range.-color-main.-s24
.araxxe-field--message
span.araxxe-tooltip-field.-error
span.araxxe-tooltip-field--icon.araxxe-glyph-contact
span.araxxe-tooltip-field--text Tooltip field
span.araxxe-tooltip-field--triangle
.araxxe-field.ion--field-error(title='Field with secondary input group in error')
label.araxxe-field--label
span.araxxe-text-info Field with secondary input group in error
.araxxe-field--group
.araxxe-input-group.ion--input-secondary
.araxxe-input-group--slot.-expand.ion--group
input.araxxe-input-text(type='text')
.araxxe-input-group--slot.-input.-clickable.ion--group
span.araxxe-icon.araxxe-glyph-attach.-s24
.araxxe-field--message
span.araxxe-tooltip-field.-error
span.araxxe-tooltip-field--icon.araxxe-glyph-contact
span.araxxe-tooltip-field--text Tooltip field
span.araxxe-tooltip-field--triangle
.araxxe-field.ion--field-error(title='Select field with icon')
label.araxxe-field--label
span.araxxe-text-info Select field with icon
.araxxe-field--group
.araxxe-input-group
.araxxe-input-group--slot.-expand.ion--group
button.araxxe-input-select
span.araxxe-input-select--input Select
span.araxxe-input-select--button
span.araxxe-icon.araxxe-glyph-arrow-down.-color-main.-s24
.araxxe-input-group--slot.-input.-clickable.ion--group
span.araxxe-icon.araxxe-glyph-date-range.-color-main.-s24
.araxxe-field--message
span.araxxe-tooltip-field.-error
span.araxxe-tooltip-field--icon.araxxe-glyph-contact
span.araxxe-tooltip-field--text Tooltip field
span.araxxe-tooltip-field--triangle<div class="araxxe-from-to">
<div class="araxxe-from-to--from"><span class="araxxe-text-info">From</span>
</div>
<div class="araxxe-from-to--icon araxxe-glyph-arrow-right-line"></div>
<div class="araxxe-from-to--to -a2psms-olo"><span class="araxxe-text-info">To</span>
</div>
</div>
<div class="araxxe-from-to">
<div class="araxxe-from-to--from"><span class="araxxe-flag -a2psms-o">O</span>
</div>
<div class="araxxe-from-to--icon araxxe-glyph-arrow-right-line"></div>
<div class="araxxe-from-to--to -a2psms-o"><span class="araxxe-flag -a2psms-o -inverted">O</span>
</div>
</div>
<div class="araxxe-from-to">
<div class="araxxe-from-to--from"><span class="araxxe-flag -a2psms-olo">O</span>
</div>
<div class="araxxe-from-to--icon araxxe-glyph-arrow-right-line"></div>
<div class="araxxe-from-to--to -a2psms-oio"><span class="araxxe-flag -a2psms-oio -inverted">O</span>
</div>
</div>.araxxe-from-to
.araxxe-from-to--from
span.araxxe-text-info From
.araxxe-from-to--icon.araxxe-glyph-arrow-right-line
.araxxe-from-to--to.-a2psms-olo
span.araxxe-text-info To
.araxxe-from-to
.araxxe-from-to--from
span.araxxe-flag.-a2psms-o O
.araxxe-from-to--icon.araxxe-glyph-arrow-right-line
.araxxe-from-to--to.-a2psms-o
span.araxxe-flag.-a2psms-o.-inverted O
.araxxe-from-to
.araxxe-from-to--from
span.araxxe-flag.-a2psms-olo O
.araxxe-from-to--icon.araxxe-glyph-arrow-right-line
.araxxe-from-to--to.-a2psms-oio
span.araxxe-flag.-a2psms-oio.-inverted O<div class="araxxe-from-to-illustration">
<div class="araxxe-from-to-illustration--from">
<div class="araxxe-icon-flagged -right">
<div class="araxxe-icon-flagged--icon">
<span class="araxxe-icon araxxe-glyph-laptop-gear-up -s58"></span>
</div>
<div class="araxxe-icon-flagged--flag"><span class="araxxe-flag -a2psms-oio">OIO</span>
</div>
</div>
</div>
<div class="araxxe-from-to-illustration--connection">
<div class="araxxe-from-to-illustration--connector"></div>
<div class="araxxe-from-to-illustration--icon-connector">
<span class="araxxe-icon araxxe-glyph-arrow-right-rounded"></span>
</div>
<div class="araxxe-from-to-illustration--message">
<div class="araxxe-icon-flagged -right">
<div class="araxxe-icon-flagged--icon">
<span class="araxxe-icon araxxe-glyph-mail-bubble -color-main-light -s58"></span>
</div>
<div class="araxxe-icon-flagged--flag"><span class="araxxe-flag -a2psms-o">O</span>
</div>
</div>
</div>
</div>
<div class="araxxe-from-to-illustration--to">
<div class="araxxe-icon-flagged -left">
<div class="araxxe-icon-flagged--icon">
<span class="araxxe-icon araxxe-glyph-smartphone-mail -s58"></span>
</div>
<div class="araxxe-icon-flagged--flag"><span class="araxxe-flag -a2psms-o">O</span>
</div>
</div>
</div>
</div>.araxxe-from-to-illustration
.araxxe-from-to-illustration--from
.araxxe-icon-flagged.-right
.araxxe-icon-flagged--icon
span.araxxe-icon.araxxe-glyph-laptop-gear-up.-s58
.araxxe-icon-flagged--flag
span.araxxe-flag.-a2psms-oio OIO
.araxxe-from-to-illustration--connection
.araxxe-from-to-illustration--connector
.araxxe-from-to-illustration--icon-connector
span.araxxe-icon.araxxe-glyph-arrow-right-rounded
.araxxe-from-to-illustration--message
.araxxe-icon-flagged.-right
.araxxe-icon-flagged--icon
span.araxxe-icon.araxxe-glyph-mail-bubble.-color-main-light.-s58
.araxxe-icon-flagged--flag
span.araxxe-flag.-a2psms-o O
.araxxe-from-to-illustration--to
.araxxe-icon-flagged.-left
.araxxe-icon-flagged--icon
span.araxxe-icon.araxxe-glyph-smartphone-mail.-s58
.araxxe-icon-flagged--flag
span.araxxe-flag.-a2psms-o O<div class="araxxe-header-popover ion--close">
<div class="araxxe-header-popover--button">Button
</div>
<div class="araxxe-header-popover--area">
<div class="araxxe-popover">
<button class="araxxe-popover--slot -clickable"><span class="araxxe-text-info">Clickable entry</span>
</button>
<div class="araxxe-popover--slot">
<div class="araxxe-horizontal-spacing -s15">
<div class="araxxe-horizontal-spacing--column -expand"><span class="araxxe-text-info">Labeled entry</span>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-popover--slot--button"><span class="araxxe-text-info">en</span>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-popover--slot--button -active"><span class="araxxe-text-info">fr</span>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-popover--slot--button"><span class="araxxe-text-info">es</span>
</div>
</div>
</div>
</div>
<div class="araxxe-popover--separator"></div>
<button class="araxxe-popover--slot -clickable"><span class="araxxe-text-info">Clickable entry</span>
</button>
</div>
</div>
</div>
<div style="height: 170px;">
<div class="araxxe-header-popover ion--open -left">
<div class="araxxe-header-popover--button">Button
</div>
<div class="araxxe-header-popover--area">
<div class="araxxe-popover">
<button class="araxxe-popover--slot -clickable"><span class="araxxe-text-info">Clickable entry</span>
</button>
<div class="araxxe-popover--slot">
<div class="araxxe-horizontal-spacing -s15">
<div class="araxxe-horizontal-spacing--column -expand"><span class="araxxe-text-info">Labeled entry</span>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-popover--slot--button"><span class="araxxe-text-info">en</span>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-popover--slot--button -active"><span class="araxxe-text-info">fr</span>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-popover--slot--button"><span class="araxxe-text-info">es</span>
</div>
</div>
</div>
</div>
<div class="araxxe-popover--separator"></div>
<button class="araxxe-popover--slot -clickable"><span class="araxxe-text-info">Clickable entry</span>
</button>
</div>
</div>
</div>
</div>
<div style="height: 170px;">
<div class="araxxe-header-popover ion--open -right">
<div class="araxxe-header-popover--button">Button
</div>
<div class="araxxe-header-popover--area">
<div class="araxxe-popover">
<button class="araxxe-popover--slot -clickable"><span class="araxxe-text-info">Clickable entry</span>
</button>
<div class="araxxe-popover--slot">
<div class="araxxe-horizontal-spacing -s15">
<div class="araxxe-horizontal-spacing--column -expand"><span class="araxxe-text-info">Labeled entry</span>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-popover--slot--button"><span class="araxxe-text-info">en</span>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-popover--slot--button -active"><span class="araxxe-text-info">fr</span>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-popover--slot--button"><span class="araxxe-text-info">es</span>
</div>
</div>
</div>
</div>
<div class="araxxe-popover--separator"></div>
<button class="araxxe-popover--slot -clickable"><span class="araxxe-text-info">Clickable entry</span>
</button>
</div>
</div>
</div>
</div>.araxxe-header-popover.ion--close
.araxxe-header-popover--button.
Button
.araxxe-header-popover--area
.araxxe-popover
button.araxxe-popover--slot.-clickable
span.araxxe-text-info Clickable entry
.araxxe-popover--slot
.araxxe-horizontal-spacing.-s15
.araxxe-horizontal-spacing--column.-expand
span.araxxe-text-info Labeled entry
.araxxe-horizontal-spacing--column
.araxxe-popover--slot--button
span.araxxe-text-info en
.araxxe-horizontal-spacing--column
.araxxe-popover--slot--button.-active
span.araxxe-text-info fr
.araxxe-horizontal-spacing--column
.araxxe-popover--slot--button
span.araxxe-text-info es
.araxxe-popover--separator
button.araxxe-popover--slot.-clickable
span.araxxe-text-info Clickable entry
div(style='height: 170px;')
.araxxe-header-popover.ion--open.-left
.araxxe-header-popover--button.
Button
.araxxe-header-popover--area
.araxxe-popover
button.araxxe-popover--slot.-clickable
span.araxxe-text-info Clickable entry
.araxxe-popover--slot
.araxxe-horizontal-spacing.-s15
.araxxe-horizontal-spacing--column.-expand
span.araxxe-text-info Labeled entry
.araxxe-horizontal-spacing--column
.araxxe-popover--slot--button
span.araxxe-text-info en
.araxxe-horizontal-spacing--column
.araxxe-popover--slot--button.-active
span.araxxe-text-info fr
.araxxe-horizontal-spacing--column
.araxxe-popover--slot--button
span.araxxe-text-info es
.araxxe-popover--separator
button.araxxe-popover--slot.-clickable
span.araxxe-text-info Clickable entry
div(style='height: 170px;')
.araxxe-header-popover.ion--open.-right
.araxxe-header-popover--button.
Button
.araxxe-header-popover--area
.araxxe-popover
button.araxxe-popover--slot.-clickable
span.araxxe-text-info Clickable entry
.araxxe-popover--slot
.araxxe-horizontal-spacing.-s15
.araxxe-horizontal-spacing--column.-expand
span.araxxe-text-info Labeled entry
.araxxe-horizontal-spacing--column
.araxxe-popover--slot--button
span.araxxe-text-info en
.araxxe-horizontal-spacing--column
.araxxe-popover--slot--button.-active
span.araxxe-text-info fr
.araxxe-horizontal-spacing--column
.araxxe-popover--slot--button
span.araxxe-text-info es
.araxxe-popover--separator
button.araxxe-popover--slot.-clickable
span.araxxe-text-info Clickable entry<div class="araxxe-icon-circled -s44">
<span class="araxxe-icon araxxe-glyph-voice -color-service-simbox -s24"></span>
</div>.araxxe-icon-circled.-s44
span.araxxe-icon.araxxe-glyph-voice.-color-service-simbox.-s24<div class="araxxe-icon-flagged -left">
<div class="araxxe-icon-flagged--icon">
<span class="araxxe-icon araxxe-glyph-smartphone-mail -s58"></span>
</div>
<div class="araxxe-icon-flagged--flag"><span class="araxxe-flag -a2psms-o">O</span>
</div>
</div>
<div class="araxxe-icon-flagged -right">
<div class="araxxe-icon-flagged--icon">
<span class="araxxe-icon araxxe-glyph-laptop-gear-up -s58"></span>
</div>
<div class="araxxe-icon-flagged--flag"><span class="araxxe-flag -a2psms-olo">OLO</span>
</div>
</div>.araxxe-icon-flagged.-left
.araxxe-icon-flagged--icon
span.araxxe-icon.araxxe-glyph-smartphone-mail.-s58
.araxxe-icon-flagged--flag
span.araxxe-flag.-a2psms-o O
.araxxe-icon-flagged.-right
.araxxe-icon-flagged--icon
span.araxxe-icon.araxxe-glyph-laptop-gear-up.-s58
.araxxe-icon-flagged--flag
span.araxxe-flag.-a2psms-olo OLO<div class="araxxe-icon-text -main">
<div class="araxxe-icon-text--icon araxxe-glyph-data"></div>
<div class="araxxe-icon-text--text">
<div class="araxxe-title-info">Title info
</div>
</div>
</div>.araxxe-icon-text.-main
.araxxe-icon-text--icon.araxxe-glyph-data
.araxxe-icon-text--text
.araxxe-title-info.
Title info
<div class="araxxe-input-group ion--input-secondary">
<div class="araxxe-input-group--slot -expand ion--group">
<input class="araxxe-input-text" type="text"/>
</div>
<div class="araxxe-input-group--slot -input -clickable ion--group">
<span class="araxxe-icon araxxe-glyph-attach -s24"></span>
</div>
</div>
<div class="araxxe-input-group">
<div class="araxxe-input-group--slot -expand ion--group">
<input class="araxxe-input-text" type="text"/>
</div>
<div class="araxxe-input-group--slot -input -clickable ion--group">
<span class="araxxe-icon araxxe-glyph-date-range -color-main -s24"></span>
</div>
</div>
<div class="araxxe-input-group ion--input-secondary">
<div class="araxxe-input-group--slot -input ion--group">
<span class="araxxe-icon araxxe-glyph-search -color-shade-50 -s24"></span>
</div>
<div class="araxxe-input-group--slot -expand ion--group">
<input class="araxxe-input-text -compact" placeholder="Search" type="text"/>
</div>
</div>.araxxe-input-group.ion--input-secondary
.araxxe-input-group--slot.-expand.ion--group
input.araxxe-input-text(type='text')
.araxxe-input-group--slot.-input.-clickable.ion--group
span.araxxe-icon.araxxe-glyph-attach.-s24
.araxxe-input-group
.araxxe-input-group--slot.-expand.ion--group
input.araxxe-input-text(type='text')
.araxxe-input-group--slot.-input.-clickable.ion--group
span.araxxe-icon.araxxe-glyph-date-range.-color-main.-s24
.araxxe-input-group.ion--input-secondary
.araxxe-input-group--slot.-input.ion--group
span.araxxe-icon.araxxe-glyph-search.-color-shade-50.-s24
.araxxe-input-group--slot.-expand.ion--group
input.araxxe-input-text.-compact(placeholder='Search', type='text')<div class="araxxe-label-legend -primary -align-left">
<div class="araxxe-label-legend--label">4242</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
<div class="araxxe-label-legend -primary">
<div class="araxxe-label-legend--label">4242 <span class="araxxe-unit">unit</span>
</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
<div class="araxxe-label-legend -toggle -align-left">
<div class="araxxe-label-legend--label">Toggle</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
<div class="araxxe-label-legend -secondary">
<div class="araxxe-label-legend--label">4242 <span class="araxxe-text -uppercase">unit</span>
</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>.araxxe-label-legend.-primary.-align-left
.araxxe-label-legend--label 4242
.araxxe-label-legend--legend.
Label legend
.araxxe-label-legend.-primary
.araxxe-label-legend--label
| 4242
span.araxxe-unit unit
.araxxe-label-legend--legend.
Label legend
.araxxe-label-legend.-toggle.-align-left
.araxxe-label-legend--label Toggle
.araxxe-label-legend--legend.
Label legend
.araxxe-label-legend.-secondary
.araxxe-label-legend--label
| 4242
span.araxxe-text.-uppercase unit
.araxxe-label-legend--legend.
Label legend
<ul class="araxxe-list-inline">
<li class="araxxe-list-inline--item">
<div class="araxxe-badge -active">item 1
</div>
</li>
<li class="araxxe-list-inline--item">
<div class="araxxe-badge -active">item 2
</div>
</li>
<li class="araxxe-list-inline--item">
<div class="araxxe-badge -active">item 3
</div>
</li>
</ul>ul.araxxe-list-inline
li.araxxe-list-inline--item
.araxxe-badge.-active.
item 1
li.araxxe-list-inline--item
.araxxe-badge.-active.
item 2
li.araxxe-list-inline--item
.araxxe-badge.-active.
item 3
<ul class="araxxe-list-underlined">
<li class="araxxe-list-underlined--item">
<div class="araxxe-horizontal-spacing -s5">
<div class="araxxe-horizontal-spacing--column -expand">
<p class="araxxe-description -ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.
</p>
</div>
<div class="araxxe-horizontal-spacing--column">
<p class="araxxe-description">42
</p>
</div>
</div>
</li>
<li class="araxxe-list-underlined--item">
<div class="araxxe-horizontal-spacing -s5">
<div class="araxxe-horizontal-spacing--column -expand">
<p class="araxxe-description -ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.
</p>
</div>
<div class="araxxe-horizontal-spacing--column">
<p class="araxxe-description">42
</p>
</div>
</div>
</li>
<li class="araxxe-list-underlined--item">
<div class="araxxe-horizontal-spacing -s5">
<div class="araxxe-horizontal-spacing--column -expand">
<p class="araxxe-description -ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.
</p>
</div>
<div class="araxxe-horizontal-spacing--column">
<p class="araxxe-description">42
</p>
</div>
</div>
</li>
</ul>ul.araxxe-list-underlined
li.araxxe-list-underlined--item
.araxxe-horizontal-spacing.-s5
.araxxe-horizontal-spacing--column.-expand
p.araxxe-description.-ellipsis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.
.araxxe-horizontal-spacing--column
p.araxxe-description.
42
li.araxxe-list-underlined--item
.araxxe-horizontal-spacing.-s5
.araxxe-horizontal-spacing--column.-expand
p.araxxe-description.-ellipsis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.
.araxxe-horizontal-spacing--column
p.araxxe-description.
42
li.araxxe-list-underlined--item
.araxxe-horizontal-spacing.-s5
.araxxe-horizontal-spacing--column.-expand
p.araxxe-description.-ellipsis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ex dui. Integer a urna molestie, dignissim odio nec, convallis nisl. Morbi accumsan quam id arcu interdum suscipit. Nullam tincidunt sem at felis hendrerit luctus. Aliquam vel nunc in lectus consectetur auctor sit amet ac leo. Praesent sit amet luctus neque. Nulla ac gravida sapien. Aliquam non tellus in nunc congue vulputate. In congue tellus id mi eleifend ultricies.
.araxxe-horizontal-spacing--column
p.araxxe-description.
42
<div class="araxxe-measure-legend">
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--number -w40"><span class="araxxe-number -color-service-a2psms -ts18 -bold">3,5</span>
</div>
<div class="araxxe-measure-legend--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-measure-legend--line">
<div class="araxxe-measure-legend--spacer"></div>
<div class="araxxe-measure-legend--legend">legend</div>
</div>
</div>.araxxe-measure-legend
.araxxe-measure-legend--line
.araxxe-measure-legend--number.-w40
span.araxxe-number.-color-service-a2psms.-ts18.-bold 3,5
.araxxe-measure-legend--unit
span.araxxe-unit Unit
.araxxe-measure-legend--line
.araxxe-measure-legend--spacer
.araxxe-measure-legend--legend legend<a class="araxxe-navigation-link" href="#"><span class="araxxe-navigation-link--slot">
<span class="araxxe-icon araxxe-glyph-sm-arrow-left -s34"></span></span><span class="araxxe-navigation-link--slot">Navigation link</span></a>
<button class="araxxe-navigation-link"><span class="araxxe-navigation-link--slot">
<span class="araxxe-icon araxxe-glyph-sm-arrow-left -s34"></span></span><span class="araxxe-navigation-link--slot">Navigation link</span></button>a.araxxe-navigation-link(href='#')
span.araxxe-navigation-link--slot
span.araxxe-icon.araxxe-glyph-sm-arrow-left.-s34
span.araxxe-navigation-link--slot Navigation link
button.araxxe-navigation-link
span.araxxe-navigation-link--slot
span.araxxe-icon.araxxe-glyph-sm-arrow-left.-s34
span.araxxe-navigation-link--slot Navigation link<div class="araxxe-news-summary">
<div class="araxxe-news-summary--date">02.06.2020</div>
<div class="araxxe-news-summary--summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit mollis nisl a efficitur. Fusce quis bibendum sapien. Sed dui nisi, vulputate in scelerisque a, fringilla a dolor. Aenean congue lorem quis leo pellentesque vestibulum. Suspendisse malesuada arcu dui, sed sagittis elit facilisis eget. Mauris commodo, mi at eleifend dapibus, augue tortor laoreet ligula, accumsan volutpat nibh tellus a neque. Suspendisse et est scelerisque, tempor ante ac, molestie ipsum.</div>
</div>.araxxe-news-summary
.araxxe-news-summary--date 02.06.2020
.araxxe-news-summary--summary Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit mollis nisl a efficitur. Fusce quis bibendum sapien. Sed dui nisi, vulputate in scelerisque a, fringilla a dolor. Aenean congue lorem quis leo pellentesque vestibulum. Suspendisse malesuada arcu dui, sed sagittis elit facilisis eget. Mauris commodo, mi at eleifend dapibus, augue tortor laoreet ligula, accumsan volutpat nibh tellus a neque. Suspendisse et est scelerisque, tempor ante ac, molestie ipsum.<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -active -horizontal-mirror"></div>
</div>
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -active -horizontal-mirror"></div>
</div>.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-active.-horizontal-mirror
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-active.-horizontal-mirror<div class="araxxe-pie-chart">
<div class="araxxe-pie-chart--content">
<div class="araxxe-pie-chart--number">42 <span class="araxxe-unit">unit</span>
</div>
<div class="araxxe-pie-chart--text">23 items</div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-1 -o0 -p35">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-2 -o35 -p30">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-3 -o65 -p20">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-4 -o85 -p10">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-5 -o95 -p5">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
</div>
<div class="araxxe-pie-chart">
<div class="araxxe-pie-chart--content">
<div class="araxxe-pie-chart--number">42</div>
<div class="araxxe-pie-chart--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-1 -o0 -p35">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-2 -o35 -p30">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-3 -o65 -p20">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-4 -o85 -p10">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-5 -o95 -p5">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
</div>
<div class="araxxe-pie-chart">
<div class="araxxe-pie-chart--content">
<div class="araxxe-pie-chart--number">42 <span class="araxxe-unit">unit</span>
</div>
<div class="araxxe-pie-chart--text">23 items</div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-1 -o0 -p100">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
</div>
<div class="araxxe-pie-chart -thicker -s100">
<div class="araxxe-pie-chart--content">
</div>
<div class="araxxe-pie-chart--piece -fill-graph-1 -o0 -p35">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-2 -o35 -p30">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-3 -o65 -p20">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-4 -o85 -p10">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-graph-5 -o95 -p5">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
</div>
<div class="araxxe-pie-chart -thinner -s48">
<div class="araxxe-pie-chart--content">
<div class="araxxe-pie-chart--content--icon">
<span class="araxxe-icon araxxe-glyph-voice -s24"></span>
</div>
</div>
<div class="araxxe-pie-chart--background"></div>
<div class="araxxe-pie-chart--piece -fill-simbox-o -o0 -p27">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-simbox-olo -o27 -p6">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
<div class="araxxe-pie-chart--piece -fill-simbox-oio -o33 -p12">
<div class="araxxe-pie-chart--hs"></div>
<div class="araxxe-pie-chart--he"></div>
</div>
</div>.araxxe-pie-chart
.araxxe-pie-chart--content
.araxxe-pie-chart--number
| 42
span.araxxe-unit unit
.araxxe-pie-chart--text 23 items
.araxxe-pie-chart--piece.-fill-graph-1.-o0.-p35
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-2.-o35.-p30
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-3.-o65.-p20
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-4.-o85.-p10
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-5.-o95.-p5
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart
.araxxe-pie-chart--content
.araxxe-pie-chart--number 42
.araxxe-pie-chart--unit
span.araxxe-unit Unit
.araxxe-pie-chart--piece.-fill-graph-1.-o0.-p35
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-2.-o35.-p30
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-3.-o65.-p20
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-4.-o85.-p10
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-5.-o95.-p5
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart
.araxxe-pie-chart--content
.araxxe-pie-chart--number
| 42
span.araxxe-unit unit
.araxxe-pie-chart--text 23 items
.araxxe-pie-chart--piece.-fill-graph-1.-o0.-p100
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart.-thicker.-s100
.araxxe-pie-chart--content.
.araxxe-pie-chart--piece.-fill-graph-1.-o0.-p35
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-2.-o35.-p30
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-3.-o65.-p20
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-4.-o85.-p10
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-graph-5.-o95.-p5
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart.-thinner.-s48
.araxxe-pie-chart--content
.araxxe-pie-chart--content--icon
span.araxxe-icon.araxxe-glyph-voice.-s24
.araxxe-pie-chart--background
.araxxe-pie-chart--piece.-fill-simbox-o.-o0.-p27
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-simbox-olo.-o27.-p6
.araxxe-pie-chart--hs
.araxxe-pie-chart--he
.araxxe-pie-chart--piece.-fill-simbox-oio.-o33.-p12
.araxxe-pie-chart--hs
.araxxe-pie-chart--he<div class="araxxe-rate-bar">
<div class="araxxe-rate-bar--legend">
<div class="araxxe-horizontal-spacing -s30">
<div class="araxxe-horizontal-spacing--column -expand"><span class="araxxe-text-info">Info</span>
</div>
<div class="araxxe-horizontal-spacing--column"><span class="araxxe-text -color-shade-50">1 325 / 23 456</span>
</div>
<div class="araxxe-horizontal-spacing--column"><span class="araxxe-text -bold -color-shade-50">20%</span>
</div>
</div>
</div>
<div class="araxxe-rate-bar--bar">
<div class="araxxe-bar">
<div class="araxxe-bar--part -fill-danger" style="width: 20%"></div>
<div class="araxxe-bar--part -fill-valid -expand"></div>
</div>
</div>
</div>.araxxe-rate-bar
.araxxe-rate-bar--legend
.araxxe-horizontal-spacing.-s30
.araxxe-horizontal-spacing--column.-expand
span.araxxe-text-info Info
.araxxe-horizontal-spacing--column
span.araxxe-text.-color-shade-50 1 325 / 23 456
.araxxe-horizontal-spacing--column
span.araxxe-text.-bold.-color-shade-50 20%
.araxxe-rate-bar--bar
.araxxe-bar
.araxxe-bar--part.-fill-danger(style='width: 20%')
.araxxe-bar--part.-fill-valid.-expand<div class="araxxe-rate-chart ">
<div class="araxxe-rate-chart--background ">
<div class="araxxe-rate-chart--progress -p34">
<div class="araxxe-rate-chart--hs"></div>
<div class="araxxe-rate-chart--he"></div>
</div>
</div>
<div class="araxxe-rate-chart--hole">
</div>
</div>
<div class="araxxe-rate-chart -fill-service-a2psms">
<div class="araxxe-rate-chart--background ">
<div class="araxxe-rate-chart--progress -p34">
<div class="araxxe-rate-chart--hs"></div>
<div class="araxxe-rate-chart--he"></div>
</div>
</div>
<div class="araxxe-rate-chart--hole">
</div>
</div>
<div class="araxxe-rate-chart ">
<div class="araxxe-rate-chart--background -loading">
</div>
<div class="araxxe-rate-chart--hole">
</div>
</div>
<div class="araxxe-rate-chart -s48 -fill-service-a2psms">
<div class="araxxe-rate-chart--background ">
<div class="araxxe-rate-chart--progress -p34">
<div class="araxxe-rate-chart--hs"></div>
<div class="araxxe-rate-chart--he"></div>
</div>
</div>
<div class="araxxe-rate-chart--hole">
<div class="araxxe-rate-chart--hole--icon">
<span class="araxxe-icon araxxe-glyph-call -s24"></span>
</div>
</div>
</div>.araxxe-rate-chart
.araxxe-rate-chart--background
.araxxe-rate-chart--progress.-p34
.araxxe-rate-chart--hs
.araxxe-rate-chart--he
.araxxe-rate-chart--hole.
.araxxe-rate-chart.-fill-service-a2psms
.araxxe-rate-chart--background
.araxxe-rate-chart--progress.-p34
.araxxe-rate-chart--hs
.araxxe-rate-chart--he
.araxxe-rate-chart--hole.
.araxxe-rate-chart
.araxxe-rate-chart--background.-loading.
.araxxe-rate-chart--hole.
.araxxe-rate-chart.-s48.-fill-service-a2psms
.araxxe-rate-chart--background
.araxxe-rate-chart--progress.-p34
.araxxe-rate-chart--hs
.araxxe-rate-chart--he
.araxxe-rate-chart--hole
.araxxe-rate-chart--hole--icon
span.araxxe-icon.araxxe-glyph-call.-s24<figure class="araxxe-screenshot"><img class="araxxe-screenshot--image" src="/molecule/screenshot/screenshot.jpg" alt="Screenshot"/>
<figcaption class="araxxe-screenshot--panel">
<div class="araxxe-vertical-spacing -s20">
<div class="araxxe-vertical-spacing--line"><span class="araxxe-text-info">Date</span>
</div>
<div class="araxxe-vertical-spacing--line">
<div class="araxxe-horizontal-spacing -s10 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dot -s36 -fill-half-main-light">AD
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<address class="araxxe-screenshot--address">First name Last name</address>
</div>
</div>
</div>
</div>
</figcaption>
</figure>figure.araxxe-screenshot
img.araxxe-screenshot--image(src='/molecule/screenshot/screenshot.jpg', alt='Screenshot')
figcaption.araxxe-screenshot--panel
.araxxe-vertical-spacing.-s20
.araxxe-vertical-spacing--line
span.araxxe-text-info Date
.araxxe-vertical-spacing--line
.araxxe-horizontal-spacing.-s10.-middle
.araxxe-horizontal-spacing--column
.araxxe-dot.-s36.-fill-half-main-light.
AD
.araxxe-horizontal-spacing--column
address.araxxe-screenshot--address First name Last name<div class="araxxe-sheet-head">
<div class="araxxe-sheet-head--icon">
<span class="araxxe-icon araxxe-glyph-data -color-main -s24"></span>
</div>
<div class="araxxe-sheet-head--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
<div class="araxxe-sheet-head">
<div class="araxxe-sheet-head--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>.araxxe-sheet-head
.araxxe-sheet-head--icon
span.araxxe-icon.araxxe-glyph-data.-color-main.-s24
.araxxe-sheet-head--unit
span.araxxe-unit Unit
.araxxe-sheet-head
.araxxe-sheet-head--unit
span.araxxe-unit Unit<div class="araxxe-sheet-line ">
<div class="araxxe-sheet-line--slot -g3"></div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-sheet-head">
<div class="araxxe-sheet-head--icon">
<span class="araxxe-icon araxxe-glyph-data -color-main -s24"></span>
</div>
<div class="araxxe-sheet-head--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-sheet-head">
<div class="araxxe-sheet-head--icon">
<span class="araxxe-icon araxxe-glyph-data -color-main -s24"></span>
</div>
<div class="araxxe-sheet-head--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-sheet-head">
<div class="araxxe-sheet-head--icon">
<span class="araxxe-icon araxxe-glyph-data -color-main -s24"></span>
</div>
<div class="araxxe-sheet-head--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-sheet-head">
<div class="araxxe-sheet-head--icon">
<span class="araxxe-icon araxxe-glyph-data -color-main -s24"></span>
</div>
<div class="araxxe-sheet-head--unit"><span class="araxxe-unit">Unit</span>
</div>
</div>
</div>
</div>
<div class="araxxe-sheet-line -faded ">
<div class="araxxe-sheet-line--slot -g3">
<div class="araxxe-label-legend -toggle -align-left">
<div class="araxxe-label-legend--label">Text</div>
<div class="araxxe-label-legend--legend">
<div class="araxxe-horizontal-spacing -s10 -middle">
<div class="araxxe-horizontal-spacing--column">Toggle this line</div>
<div class="araxxe-horizontal-spacing--column">
<span class="araxxe-icon araxxe-glyph-arrow-down -s24"></span>
</div>
</div>
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-label-legend -primary">
<div class="araxxe-label-legend--label">4242 <span class="araxxe-unit">unit</span>
</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-label-legend -primary">
<div class="araxxe-label-legend--label">4242 <span class="araxxe-unit">unit</span>
</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-label-legend -primary">
<div class="araxxe-label-legend--label">4242</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-label-legend -primary">
<div class="araxxe-label-legend--label">4242</div>
<div class="araxxe-label-legend--legend">Longer label legend text
</div>
</div>
</div>
</div>
<div class="araxxe-sheet-line ">
<div class="araxxe-sheet-line--slot -g3">
<div class="araxxe-label-legend -secondary -align-left">
<div class="araxxe-label-legend--label">Text</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-label-legend -secondary">
<div class="araxxe-label-legend--label">4242 <span class="araxxe-text -uppercase">unit</span>
</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-label-legend -secondary">
<div class="araxxe-label-legend--label">4242 <span class="araxxe-text -uppercase">unit</span>
</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-label-legend -secondary">
<div class="araxxe-label-legend--label">4242</div>
<div class="araxxe-label-legend--legend">Label legend
</div>
</div>
</div>
<div class="araxxe-sheet-line--slot -g2">
<div class="araxxe-label-legend -secondary">
<div class="araxxe-label-legend--label">4242</div>
<div class="araxxe-label-legend--legend">Longer label legend text
</div>
</div>
</div>
</div>.araxxe-sheet-line
.araxxe-sheet-line--slot.-g3
.araxxe-sheet-line--slot.-g2
.araxxe-sheet-head
.araxxe-sheet-head--icon
span.araxxe-icon.araxxe-glyph-data.-color-main.-s24
.araxxe-sheet-head--unit
span.araxxe-unit Unit
.araxxe-sheet-line--slot.-g2
.araxxe-sheet-head
.araxxe-sheet-head--icon
span.araxxe-icon.araxxe-glyph-data.-color-main.-s24
.araxxe-sheet-head--unit
span.araxxe-unit Unit
.araxxe-sheet-line--slot.-g2
.araxxe-sheet-head
.araxxe-sheet-head--icon
span.araxxe-icon.araxxe-glyph-data.-color-main.-s24
.araxxe-sheet-head--unit
span.araxxe-unit Unit
.araxxe-sheet-line--slot.-g2
.araxxe-sheet-head
.araxxe-sheet-head--icon
span.araxxe-icon.araxxe-glyph-data.-color-main.-s24
.araxxe-sheet-head--unit
span.araxxe-unit Unit
.araxxe-sheet-line.-faded
.araxxe-sheet-line--slot.-g3
.araxxe-label-legend.-toggle.-align-left
.araxxe-label-legend--label Text
.araxxe-label-legend--legend
.araxxe-horizontal-spacing.-s10.-middle
.araxxe-horizontal-spacing--column Toggle this line
.araxxe-horizontal-spacing--column
span.araxxe-icon.araxxe-glyph-arrow-down.-s24
.araxxe-sheet-line--slot.-g2
.araxxe-label-legend.-primary
.araxxe-label-legend--label
| 4242
span.araxxe-unit unit
.araxxe-label-legend--legend.
Label legend
.araxxe-sheet-line--slot.-g2
.araxxe-label-legend.-primary
.araxxe-label-legend--label
| 4242
span.araxxe-unit unit
.araxxe-label-legend--legend.
Label legend
.araxxe-sheet-line--slot.-g2
.araxxe-label-legend.-primary
.araxxe-label-legend--label 4242
.araxxe-label-legend--legend.
Label legend
.araxxe-sheet-line--slot.-g2
.araxxe-label-legend.-primary
.araxxe-label-legend--label 4242
.araxxe-label-legend--legend.
Longer label legend text
.araxxe-sheet-line
.araxxe-sheet-line--slot.-g3
.araxxe-label-legend.-secondary.-align-left
.araxxe-label-legend--label Text
.araxxe-label-legend--legend.
Label legend
.araxxe-sheet-line--slot.-g2
.araxxe-label-legend.-secondary
.araxxe-label-legend--label
| 4242
span.araxxe-text.-uppercase unit
.araxxe-label-legend--legend.
Label legend
.araxxe-sheet-line--slot.-g2
.araxxe-label-legend.-secondary
.araxxe-label-legend--label
| 4242
span.araxxe-text.-uppercase unit
.araxxe-label-legend--legend.
Label legend
.araxxe-sheet-line--slot.-g2
.araxxe-label-legend.-secondary
.araxxe-label-legend--label 4242
.araxxe-label-legend--legend.
Label legend
.araxxe-sheet-line--slot.-g2
.araxxe-label-legend.-secondary
.araxxe-label-legend--label 4242
.araxxe-label-legend--legend.
Longer label legend text
<div class="araxxe-status">
<div class="araxxe-status--icon"><span class="araxxe-spot araxxe-glyph-status-new -s18 -active"></span>
</div>
<div class="araxxe-status--text">Status</div>
</div>.araxxe-status
.araxxe-status--icon
span.araxxe-spot.araxxe-glyph-status-new.-s18.-active
.araxxe-status--text Status<div class="araxxe-slider -color-service-a2psms">
<div class="araxxe-slider--bar" style="width: 80%"></div>
<div class="araxxe-slider--cursor -draggable">
<div class="araxxe-slider--thumb"></div>
<div class="araxxe-slider--pin">
<div class="araxxe-pin -color-service-a2psms">30</div>
</div>
</div>
<div class="araxxe-slider--bar -filled -expand"></div>
<div class="araxxe-slider--cursor">
<div class="araxxe-slider--thumb"></div>
</div>
</div>
<div class="araxxe-slider -color-service-ebv">
<div class="araxxe-slider--cursor">
<div class="araxxe-slider--thumb"></div>
</div>
<div class="araxxe-slider--bar -filled" style="width: 20%"></div>
<div class="araxxe-slider--cursor -draggable">
<div class="araxxe-slider--thumb"></div>
<div class="araxxe-slider--pin">
<div class="araxxe-pin -color-service-ebv">30</div>
</div>
</div>
<div class="araxxe-slider--bar -expand"></div>
</div>.araxxe-slider.-color-service-a2psms
.araxxe-slider--bar(style='width: 80%')
.araxxe-slider--cursor.-draggable
.araxxe-slider--thumb
.araxxe-slider--pin
.araxxe-pin.-color-service-a2psms 30
.araxxe-slider--bar.-filled.-expand
.araxxe-slider--cursor
.araxxe-slider--thumb
.araxxe-slider.-color-service-ebv
.araxxe-slider--cursor
.araxxe-slider--thumb
.araxxe-slider--bar.-filled(style='width: 20%')
.araxxe-slider--cursor.-draggable
.araxxe-slider--thumb
.araxxe-slider--pin
.araxxe-pin.-color-service-ebv 30
.araxxe-slider--bar.-expand<table class="araxxe-table-details">
<tr class="araxxe-table-details--line">
<th class="araxxe-table-details--cell">
<div class="araxxe-title-info">Key 1
</div>
</th>
<td class="araxxe-table-details--cell"><span class="araxxe-text -bold">Value 1</span></td>
</tr>
<tr class="araxxe-table-details--line">
<th class="araxxe-table-details--cell">
<div class="araxxe-title-info">Key 2
</div>
</th>
<td class="araxxe-table-details--cell"><span class="araxxe-text -bold">Value 2</span></td>
</tr>
<tr class="araxxe-table-details--line">
<th class="araxxe-table-details--cell">
<div class="araxxe-title-info">Key 3
</div>
</th>
<td class="araxxe-table-details--cell"><span class="araxxe-text -bold">Value 3</span></td>
</tr>
<tr class="araxxe-table-details--line">
<th class="araxxe-table-details--cell">
<div class="araxxe-title-info">Key 4
</div>
</th>
<td class="araxxe-table-details--cell -align-right"><span class="araxxe-text -bold">Value 4</span></td>
</tr>
<tr class="araxxe-table-details--line">
<th class="araxxe-table-details--cell">
<div class="araxxe-title-info">Key 5
</div>
</th>
<td class="araxxe-table-details--cell"><span class="araxxe-text -bold">Value 5</span></td>
</tr>
</table>table.araxxe-table-details
tbody
tr.araxxe-table-details--line
th.araxxe-table-details--cell
.araxxe-title-info.
Key 1
td.araxxe-table-details--cell
span.araxxe-text.-bold Value 1
tr.araxxe-table-details--line
th.araxxe-table-details--cell
.araxxe-title-info.
Key 2
td.araxxe-table-details--cell
span.araxxe-text.-bold Value 2
tr.araxxe-table-details--line
th.araxxe-table-details--cell
.araxxe-title-info.
Key 3
td.araxxe-table-details--cell
span.araxxe-text.-bold Value 3
tr.araxxe-table-details--line
th.araxxe-table-details--cell
.araxxe-title-info.
Key 4
td.araxxe-table-details--cell.-align-right
span.araxxe-text.-bold Value 4
tr.araxxe-table-details--line
th.araxxe-table-details--cell
.araxxe-title-info.
Key 5
td.araxxe-table-details--cell
span.araxxe-text.-bold Value 5<table class="araxxe-table-simple">
<thead class="araxxe-table-simple--thead">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Column 1
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Column 2
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Column 3
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Column 4
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Column 5
</div>
</th>
</tr>
</thead>
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line">
<td class="araxxe-table-simple--cell">Cell 1/1</td>
<td class="araxxe-table-simple--cell">Cell 1/2</td>
<td class="araxxe-table-simple--cell">Cell 1/3</td>
<td class="araxxe-table-simple--cell">Cell 1/4</td>
<td class="araxxe-table-simple--cell">Cell 1/5</td>
</tr>
<tr class="araxxe-table-simple--line">
<td class="araxxe-table-simple--cell">Cell 2/1</td>
<td class="araxxe-table-simple--cell">Cell 2/2</td>
<td class="araxxe-table-simple--cell">Cell 2/3</td>
<td class="araxxe-table-simple--cell">Cell 2/4</td>
<td class="araxxe-table-simple--cell">Cell 2/5</td>
</tr>
<tr class="araxxe-table-simple--line">
<td class="araxxe-table-simple--cell">Cell 3/1</td>
<td class="araxxe-table-simple--cell">Cell 3/2</td>
<td class="araxxe-table-simple--cell">Cell 3/3</td>
<td class="araxxe-table-simple--cell">Cell 3/4</td>
<td class="araxxe-table-simple--cell">Cell 3/5</td>
</tr>
</tbody>
</table>
<table class="araxxe-table-simple">
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -w140">
<div class="araxxe-title-info -ellipsis" title="Key 1">Key 1
</div>
</th>
<td class="araxxe-table-simple--cell">Value 1</td>
</tr>
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -w140">
<div class="araxxe-title-info -ellipsis" title="Key 2">Key 2
</div>
</th>
<td class="araxxe-table-simple--cell">Value 2</td>
</tr>
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -w140">
<div class="araxxe-title-info -ellipsis" title="A very long key for 3">A very long key for 3
</div>
</th>
<td class="araxxe-table-simple--cell">Value 3</td>
</tr>
</tbody>
</table>
<table class="araxxe-table-simple -expandable -underlined">
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell"><span class="araxxe-spot -s18 -fill-graph-1"></span>
</td>
<td class="araxxe-table-simple--cell -expand">Label 1
</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">1234
</p>
</td>
<td class="araxxe-table-simple--cell">42</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell"><span class="araxxe-spot -s18 -fill-graph-2"></span>
</td>
<td class="araxxe-table-simple--cell -expand">Label 2
</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">1234
</p>
</td>
<td class="araxxe-table-simple--cell">42</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell"><span class="araxxe-spot -s18 -fill-graph-3"></span>
</td>
<td class="araxxe-table-simple--cell -expand">Label 3
</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">1234
</p>
</td>
<td class="araxxe-table-simple--cell">42</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell"><span class="araxxe-spot -s18 -fill-graph-4"></span>
</td>
<td class="araxxe-table-simple--cell -expand">Label 4
</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">1234
</p>
</td>
<td class="araxxe-table-simple--cell">42</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell"><span class="araxxe-spot -s18 -fill-graph-5"></span>
</td>
<td class="araxxe-table-simple--cell -expand">Label 5
</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">1234
</p>
</td>
<td class="araxxe-table-simple--cell">42</td>
</tr>
</tbody>
</table>
<table class="araxxe-table-simple -expandable -underlined">
<thead class="araxxe-table-simple--thead">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell" colspan="2">
<div class="araxxe-horizontal-spacing -s10 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-title-info">Description
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<span class="araxxe-icon araxxe-glyph-info -color-shade-75 -s20" title="Information"></span>
</div>
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Value
</div>
</th>
</tr>
</thead>
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell -expand">Label 1
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell -expand">Label 2
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell -expand">Label 3
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell -expand">Label 4
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell -expand">Label 5
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--cell -expand">Label 6
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
</tbody>
</table>
<table class="araxxe-table-simple -expandable -underlined -padded">
<thead class="araxxe-table-simple--thead">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell" colspan="2">
<div class="araxxe-horizontal-spacing -s10 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-title-info">Description
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<span class="araxxe-icon araxxe-glyph-info -color-shade-75 -s20" title="Information"></span>
</div>
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Value
</div>
</th>
</tr>
</thead>
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line -align-middle -clickable">
<td class="araxxe-table-simple--cell -expand">Label 1
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle -focus-light -clickable">
<td class="araxxe-table-simple--cell -expand">Label 2
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle -clickable">
<td class="araxxe-table-simple--cell -expand">Label 3
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle -clickable">
<td class="araxxe-table-simple--cell -expand">Label 4
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle -clickable">
<td class="araxxe-table-simple--cell -expand">Label 5
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle -clickable">
<td class="araxxe-table-simple--cell -expand">Label 6
</td>
<td class="araxxe-table-simple--cell">123</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
</tbody>
</table>
<table class="araxxe-table-simple -underlined">
<thead class="araxxe-table-simple--thead">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--indicator"></th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Value
</div>
</th>
<th class="araxxe-table-simple--cell"></th>
</tr>
</thead>
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--indicator"><span class="araxxe-indicator -danger" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-simple--cell">Label</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--indicator"><span class="araxxe-indicator -success" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-simple--cell">Label</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
<tr class="araxxe-table-simple--line -align-middle">
<td class="araxxe-table-simple--indicator"><span class="araxxe-indicator -main" role="status" aria-label="Main" title="Main"></span>
</td>
<td class="araxxe-table-simple--cell">Label</td>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">42 unit
</p>
</td>
</tr>
</tbody>
</table>
<table class="araxxe-table-simple -padded -service-simbox">
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell">
<p class="araxxe-description">Description
</p>
</th>
<td class="araxxe-table-simple--cell -align-right">12 345 UNIT</td>
</tr>
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell">
<p class="araxxe-description">Description
</p>
</th>
<td class="araxxe-table-simple--cell -align-right">12 345 UNIT</td>
</tr>
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell">
<p class="araxxe-description">Description
</p>
</th>
<td class="araxxe-table-simple--cell -align-right">12 345 UNIT</td>
</tr>
<tr class="araxxe-table-simple--line -no-underline">
<th class="araxxe-table-simple--cell">
<p class="araxxe-description">Description
</p>
</th>
<td class="araxxe-table-simple--cell -align-right">12 345 UNIT</td>
</tr>
<tr class="araxxe-table-simple--line -highlight">
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Total
</div>
</th>
<td class="araxxe-table-simple--cell -align-right">
<p class="araxxe-description">12 345 UNIT
</p>
</td>
</tr>
</tbody>
</table>
<table class="araxxe-table-simple -padded -vertical-border">
<thead class="araxxe-table-simple--thead">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -align-center">
<p class="araxxe-description">Title column
</p>
</th>
<th class="araxxe-table-simple--cell -align-center">
<p class="araxxe-description">Title column
</p>
</th>
<th class="araxxe-table-simple--cell -align-center" colspan="3">
<p class="araxxe-description">Title column
</p>
</th>
</tr>
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Origin
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Origin
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Origin
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Origin
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Origin
</div>
</th>
</tr>
</thead>
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line -hoverable">
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line"><span class="araxxe-text-info -color-service-a2psms">Prime origin</span>
</div>
</div>
</td>
</tr>
<tr class="araxxe-table-simple--line -hoverable">
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line"><span class="araxxe-text-info -color-service-a2psms">Prime origin</span>
</div>
</div>
</td>
</tr>
<tr class="araxxe-table-simple--line -hoverable">
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line">Prime origin</div>
</div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-vertical-spacing -s5">
<div class="araxxe-vertical-spacing--line">Uber</div>
<div class="araxxe-vertical-spacing--line"><span class="araxxe-text-info -color-service-a2psms">Prime origin</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="araxxe-table-simple">
<thead class="araxxe-table-simple--thead">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Title info
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Title info
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Title info
</div>
</th>
<th class="araxxe-table-simple--cell">
<div class="araxxe-title-info">Title info
</div>
</th>
</tr>
</thead>
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line">
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
</tr>
<tr class="araxxe-table-simple--line">
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
</tr>
<tr class="araxxe-table-simple--line">
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
<td class="araxxe-table-simple--cell">
<div class="araxxe-twinkle-area -h20"></div>
</td>
</tr>
</tbody>
</table>table.araxxe-table-simple
thead.araxxe-table-simple--thead
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell
.araxxe-title-info.
Column 1
th.araxxe-table-simple--cell
.araxxe-title-info.
Column 2
th.araxxe-table-simple--cell
.araxxe-title-info.
Column 3
th.araxxe-table-simple--cell
.araxxe-title-info.
Column 4
th.araxxe-table-simple--cell
.araxxe-title-info.
Column 5
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line
td.araxxe-table-simple--cell Cell 1/1
td.araxxe-table-simple--cell Cell 1/2
td.araxxe-table-simple--cell Cell 1/3
td.araxxe-table-simple--cell Cell 1/4
td.araxxe-table-simple--cell Cell 1/5
tr.araxxe-table-simple--line
td.araxxe-table-simple--cell Cell 2/1
td.araxxe-table-simple--cell Cell 2/2
td.araxxe-table-simple--cell Cell 2/3
td.araxxe-table-simple--cell Cell 2/4
td.araxxe-table-simple--cell Cell 2/5
tr.araxxe-table-simple--line
td.araxxe-table-simple--cell Cell 3/1
td.araxxe-table-simple--cell Cell 3/2
td.araxxe-table-simple--cell Cell 3/3
td.araxxe-table-simple--cell Cell 3/4
td.araxxe-table-simple--cell Cell 3/5
table.araxxe-table-simple
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-w140
.araxxe-title-info.-ellipsis(title='Key 1').
Key 1
td.araxxe-table-simple--cell Value 1
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-w140
.araxxe-title-info.-ellipsis(title='Key 2').
Key 2
td.araxxe-table-simple--cell Value 2
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-w140
.araxxe-title-info.-ellipsis(title='A very long key for 3').
A very long key for 3
td.araxxe-table-simple--cell Value 3
table.araxxe-table-simple.-expandable.-underlined
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell
span.araxxe-spot.-s18.-fill-graph-1
td.araxxe-table-simple--cell.-expand.
Label 1
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
1234
td.araxxe-table-simple--cell 42
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell
span.araxxe-spot.-s18.-fill-graph-2
td.araxxe-table-simple--cell.-expand.
Label 2
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
1234
td.araxxe-table-simple--cell 42
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell
span.araxxe-spot.-s18.-fill-graph-3
td.araxxe-table-simple--cell.-expand.
Label 3
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
1234
td.araxxe-table-simple--cell 42
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell
span.araxxe-spot.-s18.-fill-graph-4
td.araxxe-table-simple--cell.-expand.
Label 4
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
1234
td.araxxe-table-simple--cell 42
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell
span.araxxe-spot.-s18.-fill-graph-5
td.araxxe-table-simple--cell.-expand.
Label 5
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
1234
td.araxxe-table-simple--cell 42
table.araxxe-table-simple.-expandable.-underlined
thead.araxxe-table-simple--thead
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell(colspan='2')
.araxxe-horizontal-spacing.-s10.-middle
.araxxe-horizontal-spacing--column
.araxxe-title-info.
Description
.araxxe-horizontal-spacing--column
span.araxxe-icon.araxxe-glyph-info.-color-shade-75.-s20(title='Information')
th.araxxe-table-simple--cell
.araxxe-title-info.
Value
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell.-expand.
Label 1
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell.-expand.
Label 2
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell.-expand.
Label 3
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell.-expand.
Label 4
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell.-expand.
Label 5
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--cell.-expand.
Label 6
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
table.araxxe-table-simple.-expandable.-underlined.-padded
thead.araxxe-table-simple--thead
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell(colspan='2')
.araxxe-horizontal-spacing.-s10.-middle
.araxxe-horizontal-spacing--column
.araxxe-title-info.
Description
.araxxe-horizontal-spacing--column
span.araxxe-icon.araxxe-glyph-info.-color-shade-75.-s20(title='Information')
th.araxxe-table-simple--cell
.araxxe-title-info.
Value
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line.-align-middle.-clickable
td.araxxe-table-simple--cell.-expand.
Label 1
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle.-focus-light.-clickable
td.araxxe-table-simple--cell.-expand.
Label 2
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle.-clickable
td.araxxe-table-simple--cell.-expand.
Label 3
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle.-clickable
td.araxxe-table-simple--cell.-expand.
Label 4
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle.-clickable
td.araxxe-table-simple--cell.-expand.
Label 5
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle.-clickable
td.araxxe-table-simple--cell.-expand.
Label 6
td.araxxe-table-simple--cell 123
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
table.araxxe-table-simple.-underlined
thead.araxxe-table-simple--thead
tr.araxxe-table-simple--line
th.araxxe-table-simple--indicator
th.araxxe-table-simple--cell
.araxxe-title-info.
Value
th.araxxe-table-simple--cell
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--indicator
span.araxxe-indicator.-danger(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-simple--cell Label
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--indicator
span.araxxe-indicator.-success(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-simple--cell Label
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
tr.araxxe-table-simple--line.-align-middle
td.araxxe-table-simple--indicator
span.araxxe-indicator.-main(role='status', aria-label='Main', title='Main')
td.araxxe-table-simple--cell Label
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
42 unit
table.araxxe-table-simple.-padded.-service-simbox
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell
p.araxxe-description.
Description
td.araxxe-table-simple--cell.-align-right 12 345 UNIT
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell
p.araxxe-description.
Description
td.araxxe-table-simple--cell.-align-right 12 345 UNIT
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell
p.araxxe-description.
Description
td.araxxe-table-simple--cell.-align-right 12 345 UNIT
tr.araxxe-table-simple--line.-no-underline
th.araxxe-table-simple--cell
p.araxxe-description.
Description
td.araxxe-table-simple--cell.-align-right 12 345 UNIT
tr.araxxe-table-simple--line.-highlight
th.araxxe-table-simple--cell
.araxxe-title-info.
Total
td.araxxe-table-simple--cell.-align-right
p.araxxe-description.
12 345 UNIT
table.araxxe-table-simple.-padded.-vertical-border
thead.araxxe-table-simple--thead
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-align-center
p.araxxe-description.
Title column
th.araxxe-table-simple--cell.-align-center
p.araxxe-description.
Title column
th.araxxe-table-simple--cell.-align-center(colspan='3')
p.araxxe-description.
Title column
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell
.araxxe-title-info.
Origin
th.araxxe-table-simple--cell
.araxxe-title-info.
Origin
th.araxxe-table-simple--cell
.araxxe-title-info.
Origin
th.araxxe-table-simple--cell
.araxxe-title-info.
Origin
th.araxxe-table-simple--cell
.araxxe-title-info.
Origin
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line.-hoverable
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line
span.araxxe-text-info.-color-service-a2psms Prime origin
tr.araxxe-table-simple--line.-hoverable
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line
span.araxxe-text-info.-color-service-a2psms Prime origin
tr.araxxe-table-simple--line.-hoverable
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line Prime origin
td.araxxe-table-simple--cell
.araxxe-vertical-spacing.-s5
.araxxe-vertical-spacing--line Uber
.araxxe-vertical-spacing--line
span.araxxe-text-info.-color-service-a2psms Prime origin
table.araxxe-table-simple
thead.araxxe-table-simple--thead
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell
.araxxe-title-info.
Title info
th.araxxe-table-simple--cell
.araxxe-title-info.
Title info
th.araxxe-table-simple--cell
.araxxe-title-info.
Title info
th.araxxe-table-simple--cell
.araxxe-title-info.
Title info
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
tr.araxxe-table-simple--line
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
tr.araxxe-table-simple--line
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20
td.araxxe-table-simple--cell
.araxxe-twinkle-area.-h20You can add -odd and -even classes next to araxxe-table--tbody--line to manage manually striped lines.
<table class="araxxe-table-striped">
<thead class="araxxe-table-striped--thead -sticky -fill-shade-100">
<tr class="araxxe-table-striped--thead--line">
<th class="araxxe-table-striped--indicator"></th>
<th class="araxxe-table-striped--thead--cell -w34">
<button class="araxxe-icon araxxe-glyph-sm-checkbox -color-shade-50-faded -s34 -clickable"></button>
</th>
<th class="araxxe-table-striped--thead--cell -w130">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column on <br/> multiple lines
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50 -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column 1
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column 2
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column 3
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column 4
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell -w34">
<button class="araxxe-icon araxxe-glyph-sm-parameters -color-shade-50-faded -s34 -clickable"></button>
</th>
</tr>
</thead>
<tbody class="araxxe-table-striped--tbody">
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -faded -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 1 Column 1 on a long line to be displayed as ellipsis">Line 1 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 1 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -featured -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -success" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--open">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 2 Column 1 on a long line to be displayed as ellipsis">Line 2 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 2 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -bold -color-danger">4,200</span>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -bold -color-shade-0">1,234</span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -featured -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -danger" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -active -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 3 Column 1 on a long line to be displayed as ellipsis">Line 3 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 3 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -bold -color-success">4,200</span>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -bold -color-shade-0">1,234</span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 4 Column 1 on a long line to be displayed as ellipsis">Line 4 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 4 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 5 Column 1 on a long line to be displayed as ellipsis">Line 5 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 5 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -active -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 6 Column 1 on a long line to be displayed as ellipsis">Line 6 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 6 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 7 Column 1 on a long line to be displayed as ellipsis">Line 7 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 7 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 8 Column 1 on a long line to be displayed as ellipsis">Line 8 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 8 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-main -s34 -clickable -vertical-mirror"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line">
<td class="araxxe-table-striped--tbody--cell-details" colspan="8">
<div class="araxxe-container -s15">
<table class="araxxe-table-simple">
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -w140">
<div class="araxxe-title-info -ellipsis" title="Key 1">Key 1
</div>
</th>
<td class="araxxe-table-simple--cell">Value 1</td>
</tr>
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -w140">
<div class="araxxe-title-info -ellipsis" title="Key 2">Key 2
</div>
</th>
<td class="araxxe-table-simple--cell">Value 2</td>
</tr>
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -w140">
<div class="araxxe-title-info -ellipsis" title="A very long key for 3">A very long key for 3
</div>
</th>
<td class="araxxe-table-simple--cell">Value 3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -active -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 9 Column 1 on a long line to be displayed as ellipsis">Line 9 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 9 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 10 Column 1 on a long line to be displayed as ellipsis">Line 10 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 10 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
</tbody>
</table>
<table class="araxxe-table-striped">
<thead class="araxxe-table-striped--thead">
<tr class="araxxe-table-striped--thead--line">
<th class="araxxe-table-striped--indicator"></th>
<th class="araxxe-table-striped--thead--cell -w34">
<button class="araxxe-icon araxxe-glyph-sm-checkbox -color-shade-50-faded -s34 -clickable"></button>
</th>
<th class="araxxe-table-striped--thead--cell -w130">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column on <br/> multiple lines
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50 -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column 1
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column 2
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column 3
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell">
<div class="araxxe-column-sorting">
<div class="araxxe-column-sorting--text">
<div class="araxxe-title-info">Column 4
</div>
</div>
<div class="araxxe-column-sorting--sort">
<button class="araxxe-icon araxxe-glyph-sort -color-shade-50-faded -s34 -clickable"></button>
</div>
</div>
</th>
<th class="araxxe-table-striped--thead--cell -w34">
<button class="araxxe-icon araxxe-glyph-sm-parameters -color-shade-50-faded -s34 -clickable"></button>
</th>
</tr>
</thead>
<tbody class="araxxe-table-striped--tbody">
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -faded -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 1 Column 1 on a long line to be displayed as ellipsis">Line 1 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 1 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -featured -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -success" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--open">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 2 Column 1 on a long line to be displayed as ellipsis">Line 2 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 2 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -bold -color-danger">4,200</span>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -bold -color-shade-0">1,234</span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -featured -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -danger" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -active -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 3 Column 1 on a long line to be displayed as ellipsis">Line 3 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 3 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -bold -color-success">4,200</span>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -bold -color-shade-0">1,234</span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 4 Column 1 on a long line to be displayed as ellipsis">Line 4 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 4 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 5 Column 1 on a long line to be displayed as ellipsis">Line 5 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 5 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -active -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 6 Column 1 on a long line to be displayed as ellipsis">Line 6 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 6 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 7 Column 1 on a long line to be displayed as ellipsis">Line 7 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 7 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 8 Column 1 on a long line to be displayed as ellipsis">Line 8 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 8 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-main -s34 -clickable -vertical-mirror"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line">
<td class="araxxe-table-striped--tbody--cell-details" colspan="8">
<div class="araxxe-container -s15">
<table class="araxxe-table-simple">
<tbody class="araxxe-table-simple--tbody">
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -w140">
<div class="araxxe-title-info -ellipsis" title="Key 1">Key 1
</div>
</th>
<td class="araxxe-table-simple--cell">Value 1</td>
</tr>
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -w140">
<div class="araxxe-title-info -ellipsis" title="Key 2">Key 2
</div>
</th>
<td class="araxxe-table-simple--cell">Value 2</td>
</tr>
<tr class="araxxe-table-simple--line">
<th class="araxxe-table-simple--cell -w140">
<div class="araxxe-title-info -ellipsis" title="A very long key for 3">A very long key for 3
</div>
</th>
<td class="araxxe-table-simple--cell">Value 3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -odd">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -active -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 9 Column 1 on a long line to be displayed as ellipsis">Line 9 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 9 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
<tr class="araxxe-table-striped--tbody--line ion--hoverable ion--striped ion--clickable -even">
<td class="araxxe-table-striped--indicator"><span class="araxxe-indicator -blank" role="status" aria-label="Blank" title="Blank"></span>
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-more-vertical -color-shade-50-faded -s34 -clickable"></button>
</td>
<td class="araxxe-table-striped--tbody--cell">
<div class="araxxe-horizontal-spacing -s5 -middle">
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-notification-double-icon">
<div class="araxxe-notification-double-icon--first araxxe-glyph-sms -active"></div>
<div class="araxxe-notification-double-icon--last araxxe-glyph-call -horizontal-mirror"></div>
</div>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-dropdown ion--close">
<div class="araxxe-dropdown--button">
<button class="araxxe-caret-button"><span class="araxxe-caret-button--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span></span>
</button>
</div>
<div class="araxxe-dropdown--area -w300">
<div class="araxxe-contextual-menu">
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry for status</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-switch -off" role="switch" aria-checked="false"><span class="araxxe-switch--button"></span></span>
</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -active"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h34">
<div class="araxxe-contextual-entry--slot"><span class="araxxe-spot araxxe-glyph-status-stop -s18 -inactive"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
<div class="araxxe-contextual-menu--slot">
<button class="araxxe-contextual-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-radio-off -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Contextual entry</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
<td class="araxxe-table-striped--tbody--cell"><span class="araxxe-text -ellipsis" title="Line 10 Column 1 on a long line to be displayed as ellipsis">Line 10 Column 1 on a long line to be displayed as ellipsis</span>
</td>
<td class="araxxe-table-striped--tbody--cell">Line 10 Column 2
</td>
<td class="araxxe-table-striped--tbody--cell">4,200
</td>
<td class="araxxe-table-striped--tbody--cell">0,000
</td>
<td class="araxxe-table-striped--tbody--cell">
<button class="araxxe-icon araxxe-glyph-sm-arrow-down -color-shade-50-faded -s34 -clickable"></button>
</td>
</tr>
</tbody>
</table>table.araxxe-table-striped
thead.araxxe-table-striped--thead.-sticky.-fill-shade-100
tr.araxxe-table-striped--thead--line
th.araxxe-table-striped--indicator
th.araxxe-table-striped--thead--cell.-w34
button.araxxe-icon.araxxe-glyph-sm-checkbox.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell.-w130
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info
| Column on
br
| multiple lines
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50.-s34.-clickable
th.araxxe-table-striped--thead--cell
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column 1
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column 2
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column 3
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column 4
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell.-w34
button.araxxe-icon.araxxe-glyph-sm-parameters.-color-shade-50-faded.-s34.-clickable
tbody.araxxe-table-striped--tbody
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-faded.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 1 Column 1 on a long line to be displayed as ellipsis') Line 1 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 1 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-featured.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-success(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--open
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 2 Column 1 on a long line to be displayed as ellipsis') Line 2 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 2 Column 2
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-bold.-color-danger 4,200
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-bold.-color-shade-0 1,234
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-featured.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-danger(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-active.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 3 Column 1 on a long line to be displayed as ellipsis') Line 3 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 3 Column 2
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-bold.-color-success 4,200
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-bold.-color-shade-0 1,234
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 4 Column 1 on a long line to be displayed as ellipsis') Line 4 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 4 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 5 Column 1 on a long line to be displayed as ellipsis') Line 5 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 5 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-active.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 6 Column 1 on a long line to be displayed as ellipsis') Line 6 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 6 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 7 Column 1 on a long line to be displayed as ellipsis') Line 7 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 7 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 8 Column 1 on a long line to be displayed as ellipsis') Line 8 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 8 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-main.-s34.-clickable.-vertical-mirror
tr.araxxe-table-striped--tbody--line
td.araxxe-table-striped--tbody--cell-details(colspan='8')
.araxxe-container.-s15
table.araxxe-table-simple
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-w140
.araxxe-title-info.-ellipsis(title='Key 1').
Key 1
td.araxxe-table-simple--cell Value 1
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-w140
.araxxe-title-info.-ellipsis(title='Key 2').
Key 2
td.araxxe-table-simple--cell Value 2
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-w140
.araxxe-title-info.-ellipsis(title='A very long key for 3').
A very long key for 3
td.araxxe-table-simple--cell Value 3
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-active.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 9 Column 1 on a long line to be displayed as ellipsis') Line 9 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 9 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 10 Column 1 on a long line to be displayed as ellipsis') Line 10 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 10 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
table.araxxe-table-striped
thead.araxxe-table-striped--thead
tr.araxxe-table-striped--thead--line
th.araxxe-table-striped--indicator
th.araxxe-table-striped--thead--cell.-w34
button.araxxe-icon.araxxe-glyph-sm-checkbox.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell.-w130
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info
| Column on
br
| multiple lines
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50.-s34.-clickable
th.araxxe-table-striped--thead--cell
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column 1
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column 2
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column 3
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell
.araxxe-column-sorting
.araxxe-column-sorting--text
.araxxe-title-info.
Column 4
.araxxe-column-sorting--sort
button.araxxe-icon.araxxe-glyph-sort.-color-shade-50-faded.-s34.-clickable
th.araxxe-table-striped--thead--cell.-w34
button.araxxe-icon.araxxe-glyph-sm-parameters.-color-shade-50-faded.-s34.-clickable
tbody.araxxe-table-striped--tbody
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-faded.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 1 Column 1 on a long line to be displayed as ellipsis') Line 1 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 1 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-featured.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-success(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--open
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 2 Column 1 on a long line to be displayed as ellipsis') Line 2 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 2 Column 2
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-bold.-color-danger 4,200
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-bold.-color-shade-0 1,234
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-featured.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-danger(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-active.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 3 Column 1 on a long line to be displayed as ellipsis') Line 3 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 3 Column 2
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-bold.-color-success 4,200
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-bold.-color-shade-0 1,234
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 4 Column 1 on a long line to be displayed as ellipsis') Line 4 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 4 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 5 Column 1 on a long line to be displayed as ellipsis') Line 5 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 5 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-active.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 6 Column 1 on a long line to be displayed as ellipsis') Line 6 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 6 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 7 Column 1 on a long line to be displayed as ellipsis') Line 7 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 7 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 8 Column 1 on a long line to be displayed as ellipsis') Line 8 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 8 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-main.-s34.-clickable.-vertical-mirror
tr.araxxe-table-striped--tbody--line
td.araxxe-table-striped--tbody--cell-details(colspan='8')
.araxxe-container.-s15
table.araxxe-table-simple
tbody.araxxe-table-simple--tbody
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-w140
.araxxe-title-info.-ellipsis(title='Key 1').
Key 1
td.araxxe-table-simple--cell Value 1
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-w140
.araxxe-title-info.-ellipsis(title='Key 2').
Key 2
td.araxxe-table-simple--cell Value 2
tr.araxxe-table-simple--line
th.araxxe-table-simple--cell.-w140
.araxxe-title-info.-ellipsis(title='A very long key for 3').
A very long key for 3
td.araxxe-table-simple--cell Value 3
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-odd
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms
.araxxe-notification-double-icon--last.araxxe-glyph-call.-active.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 9 Column 1 on a long line to be displayed as ellipsis') Line 9 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 9 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable
tr.araxxe-table-striped--tbody--line.ion--hoverable.ion--striped.ion--clickable.-even
td.araxxe-table-striped--indicator
span.araxxe-indicator.-blank(role='status', aria-label='Blank', title='Blank')
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-more-vertical.-color-shade-50-faded.-s34.-clickable
td.araxxe-table-striped--tbody--cell
.araxxe-horizontal-spacing.-s5.-middle
.araxxe-horizontal-spacing--column
.araxxe-notification-double-icon
.araxxe-notification-double-icon--first.araxxe-glyph-sms.-active
.araxxe-notification-double-icon--last.araxxe-glyph-call.-horizontal-mirror
.araxxe-horizontal-spacing--column
.araxxe-dropdown.ion--close
.araxxe-dropdown--button
button.araxxe-caret-button
span.araxxe-caret-button--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-dropdown--area.-w300
.araxxe-contextual-menu
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry for status
.araxxe-contextual-entry--slot
span.araxxe-switch.-off(role='switch', aria-checked='false')
span.araxxe-switch--button
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-active
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h34
.araxxe-contextual-entry--slot
span.araxxe-spot.araxxe-glyph-status-stop.-s18.-inactive
.araxxe-contextual-entry--slot.-expand Contextual entry
.araxxe-contextual-menu--slot
button.araxxe-contextual-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-radio-off.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Contextual entry
td.araxxe-table-striped--tbody--cell
span.araxxe-text.-ellipsis(title='Line 10 Column 1 on a long line to be displayed as ellipsis') Line 10 Column 1 on a long line to be displayed as ellipsis
td.araxxe-table-striped--tbody--cell.
Line 10 Column 2
td.araxxe-table-striped--tbody--cell.
4,200
td.araxxe-table-striped--tbody--cell.
0,000
td.araxxe-table-striped--tbody--cell
button.araxxe-icon.araxxe-glyph-sm-arrow-down.-color-shade-50-faded.-s34.-clickable<div class="araxxe-title-underlined">
<div class="araxxe-title-underlined--title">
<div class="araxxe-title-info">Title underlined
</div>
</div>
<div class="araxxe-title-underlined--line">
<hr class="araxxe-line"/>
</div>
</div>.araxxe-title-underlined
.araxxe-title-underlined--title
.araxxe-title-info.
Title underlined
.araxxe-title-underlined--line
hr.araxxe-line<div class="araxxe-toast">
<div class="araxxe-horizontal-spacing -s10 -middle">
<div class="araxxe-horizontal-spacing--column -expand">Toast message.</div>
<div class="araxxe-horizontal-spacing--column">
<button class="araxxe-button-rounded -main">Button rounded
</button>
</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-toast--icon-action araxxe-glyph-close"></div>
</div>
</div>
</div>
<div class="araxxe-toast">
<div class="araxxe-horizontal-spacing -s10 -middle">
<div class="araxxe-horizontal-spacing--column -expand">Toast message.</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-toast--icon-action araxxe-glyph-close"></div>
</div>
</div>
</div>
<div class="araxxe-toast -dark">
<div class="araxxe-horizontal-spacing -s10 -middle">
<div class="araxxe-horizontal-spacing--column -expand">Toast message.</div>
<div class="araxxe-horizontal-spacing--column">
<div class="araxxe-toast--icon-action araxxe-glyph-close"></div>
</div>
</div>
</div>.araxxe-toast
.araxxe-horizontal-spacing.-s10.-middle
.araxxe-horizontal-spacing--column.-expand Toast message.
.araxxe-horizontal-spacing--column
button.araxxe-button-rounded.-main.
Button rounded
.araxxe-horizontal-spacing--column
.araxxe-toast--icon-action.araxxe-glyph-close
.araxxe-toast
.araxxe-horizontal-spacing.-s10.-middle
.araxxe-horizontal-spacing--column.-expand Toast message.
.araxxe-horizontal-spacing--column
.araxxe-toast--icon-action.araxxe-glyph-close
.araxxe-toast.-dark
.araxxe-horizontal-spacing.-s10.-middle
.araxxe-horizontal-spacing--column.-expand Toast message.
.araxxe-horizontal-spacing--column
.araxxe-toast--icon-action.araxxe-glyph-close<span class="araxxe-tooltip-field -error"><span class="araxxe-tooltip-field--icon araxxe-glyph-contact"></span><span class="araxxe-tooltip-field--text">Tooltip field</span><span class="araxxe-tooltip-field--triangle"></span></span>span.araxxe-tooltip-field.-error
span.araxxe-tooltip-field--icon.araxxe-glyph-contact
span.araxxe-tooltip-field--text Tooltip field
span.araxxe-tooltip-field--triangle<button class="araxxe-vertical-menu-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-folder -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Directory</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-delete -color-shade-50-faded -hover-color-main -s24 -clickable"></span>
</div>
</button>
<button class="araxxe-vertical-menu-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-folder -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Directory</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-delete -color-shade-50-faded -hover-color-main -s24 -clickable"></span>
</div>
</button>
<button class="araxxe-vertical-menu-entry ion--hoverable -h44 -selected">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-folder -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Directory</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-delete -color-shade-50-faded -hover-color-main -s24 -clickable"></span>
</div>
</button>
<button class="araxxe-vertical-menu-entry ion--hoverable -h44">
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-folder -color-shade-50-faded -s24"></span>
</div>
<div class="araxxe-contextual-entry--slot -expand">Directory</div>
<div class="araxxe-contextual-entry--slot">
<span class="araxxe-icon araxxe-glyph-delete -color-shade-50-faded -hover-color-main -s24 -clickable"></span>
</div>
</button>button.araxxe-vertical-menu-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-folder.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Directory
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-delete.-color-shade-50-faded.-hover-color-main.-s24.-clickable
button.araxxe-vertical-menu-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-folder.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Directory
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-delete.-color-shade-50-faded.-hover-color-main.-s24.-clickable
button.araxxe-vertical-menu-entry.ion--hoverable.-h44.-selected
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-folder.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Directory
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-delete.-color-shade-50-faded.-hover-color-main.-s24.-clickable
button.araxxe-vertical-menu-entry.ion--hoverable.-h44
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-folder.-color-shade-50-faded.-s24
.araxxe-contextual-entry--slot.-expand Directory
.araxxe-contextual-entry--slot
span.araxxe-icon.araxxe-glyph-delete.-color-shade-50-faded.-hover-color-main.-s24.-clickable