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="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="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 -h44 -draggable">
<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 -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="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.-h44.-draggable
.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.-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 -top -right" style="margin: 4px 36px 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 -left" style="margin: 4px 36px 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>
<div class="araxxe-dot-flagged -left" style="margin: 4px 36px 0 0">
<div class="araxxe-dot-flagged--dot">
<div class="araxxe-dot -s24 -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 -top -right" style="margin: 4px 36px 0 0">
<div class="araxxe-dot-flagged--dot">
<div class="araxxe-dot -s24 -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.-top.-right(style="margin: 4px 36px 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.-left(style="margin: 4px 36px 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
.araxxe-dot-flagged.-left(style="margin: 4px 36px 0 0")
.araxxe-dot-flagged--dot
.araxxe-dot.-s24.-fill-valid
span.araxxe-icon.araxxe-glyph-call.-s16
.araxxe-dot-flagged--flag
span.araxxe-flag.-fill-danger CLI
.araxxe-dot-flagged.-top.-right(style="margin: 4px 36px 0 0")
.araxxe-dot-flagged--dot
.araxxe-dot.-s24.-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" style="margin: 4px 24px 0 0">
<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" style="margin: 4px 24px 0 0">
<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" style="margin: 4px 24px 0 0">
<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(style="margin: 4px 24px 0 0")
.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(style="margin: 4px 24px 0 0")
.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(style="margin: 4px 24px 0 0")
.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" style="margin: 4px 24px 0 0">
<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" style="margin: 4px 24px 0 0">
<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>
<div class="araxxe-icon-flagged -top -right" style="margin: 4px 24px 0 0">
<div class="araxxe-icon-flagged--icon">
<span class="araxxe-icon araxxe-glyph-antenna -s44"></span>
</div>
<div class="araxxe-icon-flagged--flag"><span class="araxxe-flag -fill-shade-5">10''</span>
</div>
</div>.araxxe-icon-flagged.-left(style="margin: 4px 24px 0 0")
.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(style="margin: 4px 24px 0 0")
.araxxe-icon-flagged--icon
span.araxxe-icon.araxxe-glyph-laptop-gear-up.-s58
.araxxe-icon-flagged--flag
span.araxxe-flag.-a2psms-olo OLO
.araxxe-icon-flagged.-top.-right(style="margin: 4px 24px 0 0")
.araxxe-icon-flagged--icon
span.araxxe-icon.araxxe-glyph-antenna.-s44
.araxxe-icon-flagged--flag
span.araxxe-flag.-fill-shade-5 10''<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
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