Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Box

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box

<div class="e-box">
  Qui enim tempor fugiat proident ex ipsum voluptate sed commodo do tempor labore dolor dolor dolore in cupidatat magna aliqua officia dolor ex aute nostrud sit duis laboris nulla ad consequat commodo in ad commodo elit qui in ut sit id magna dolor aliqua quis ut consectetur veniam amet exercitation 
</div>
<div class="e-box">
  Anim sed ullamco magna elit veniam sunt in dolor consectetur eu et non id magna quis sint eu sed labore consectetur irure ad elit in amet aliqua dolore do sit minim est id id duis lorem elit fugiat ullamco ut anim reprehenderit consectetur adipiscing aliquip sed lorem ea quis esse 
</div>
JavaScript
Copy JavaScript
Esse anim et qui incididunt laboris commodo cillum ea adipiscing deserunt commodo enim officia culpa ipsum sit exercitation sed dolore veniam deserunt occaecat duis ut aliquip ut nulla in in consectetur enim adipiscing tempor eu sint et aute ullamco dolore commodo exercitation deserunt lorem laborum cillum ipsum quis elit nisi

Variations

Simple
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box-simple

<div class="e-box e-box-simple">
  Tempor non reprehenderit voluptate quis occaecat fugiat tempor non excepteur est mollit nisi eu veniam aute qui duis cillum in voluptate esse officia adipiscing do aliquip ea ullamco incididunt reprehenderit reprehenderit incididunt sed ipsum labore sunt labore eu magna cupidatat sunt sit ad dolore lorem incididunt consequat cupidatat id enim 
</div>
<div class="e-box e-box-simple">
  Dolor do nostrud tempor sed fugiat nostrud enim aliqua duis in enim duis consequat culpa elit eiusmod aliqua in id nostrud cillum ut ut qui ea duis fugiat occaecat deserunt enim et occaecat veniam qui dolor fugiat excepteur irure adipiscing labore aliqua sit excepteur ut tempor deserunt tempor ad in 
</div>
JavaScript
Copy JavaScript
Eiusmod pariatur minim enim laboris dolore quis nisi dolor mollit et est esse non sunt nulla ut amet dolore velit fugiat sunt non qui ipsum excepteur reprehenderit ut reprehenderit irure minim aliquip in laboris et non enim cupidatat ipsum exercitation in ut occaecat in ut elit esse sed ea et

Inner
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box-inner

<div class="e-box e-box-inner">
  Ea ex in nulla tempor consequat sunt in exercitation in aute sunt ullamco veniam veniam consectetur labore velit enim nulla magna mollit minim incididunt deserunt qui ex in incididunt eiusmod deserunt eiusmod reprehenderit est esse consectetur exercitation ipsum in in esse cupidatat ex sed culpa enim do sunt fugiat qui 
</div>
<div class="e-box e-box-inner">
  Aliquip quis aute officia ullamco ut ad laborum ut elit lorem est velit amet nisi cupidatat non reprehenderit aliquip sint ut et cupidatat magna labore dolore consequat sint ea voluptate dolor duis ea reprehenderit in fugiat laboris pariatur est dolore nisi eiusmod velit labore velit incididunt irure labore quis nisi 
</div>
JavaScript
Copy JavaScript
Aliqua ut non ipsum aute nisi nostrud occaecat non fugiat dolore sit aliquip eu labore labore incididunt quis excepteur eiusmod occaecat excepteur sint sunt sit laboris laborum sed ipsum non nulla deserunt laborum sed ea voluptate magna reprehenderit do cillum commodo dolor dolore consequat in consectetur irure nostrud duis enim

Charts
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box-charts

<div class="e-box e-box-charts">
  Qui exercitation culpa anim voluptate excepteur sit consequat deserunt esse dolor qui tempor dolor ullamco laboris aliquip deserunt et eiusmod fugiat enim lorem incididunt aliquip aliqua excepteur in voluptate consectetur pariatur lorem culpa labore magna commodo consectetur eu elit qui incididunt dolor occaecat ipsum do dolore enim aute laboris do 
</div>
<div class="e-box e-box-charts">
  Id eiusmod ipsum irure nulla id nulla tempor esse ut culpa in dolor amet nostrud sunt velit irure ipsum id sit consectetur qui dolore do mollit eiusmod labore sit non in sit tempor esse dolore eiusmod nulla nostrud commodo sunt ad culpa irure ut consectetur cillum pariatur non reprehenderit ipsum 
</div>
JavaScript
Copy JavaScript
Reprehenderit quis occaecat laboris sed enim laborum tempor anim id voluptate nostrud quis nulla ullamco cillum ut ullamco nisi quis fugiat in ea laborum deserunt esse reprehenderit laboris minim nostrud qui dolor laborum ut veniam do qui minim deserunt fugiat reprehenderit aute nisi mollit lorem tempor voluptate veniam eiusmod ex

Chart item
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box-chart

<div class="e-box e-box-chart">
  Excepteur incididunt ad aliquip excepteur labore sint occaecat ad reprehenderit proident minim eiusmod aute ipsum reprehenderit culpa enim dolor ea sit ea voluptate ea id eu non dolore ut veniam fugiat velit labore ut dolore proident cillum dolor ut quis sunt culpa fugiat tempor ex ut nostrud magna minim in 
</div>
<div class="e-box e-box-chart">
  Exercitation aliqua ut enim veniam deserunt excepteur ea culpa sit laboris excepteur fugiat voluptate mollit cillum fugiat dolore dolor eiusmod elit cupidatat id aliquip cupidatat ullamco in veniam in commodo magna voluptate aute id quis et esse sed in sed cillum ad veniam ad lorem fugiat tempor esse nulla minim 
</div>
JavaScript
Copy JavaScript
Occaecat laboris sint exercitation eu officia pariatur duis eu ad in dolore lorem ullamco nostrud est aute non officia eu anim in aute irure consequat cupidatat sed ut cillum in reprehenderit veniam amet minim sint dolore velit laboris eiusmod reprehenderit veniam excepteur ut deserunt enim consequat id lorem culpa sunt

No padding
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box-nopadding

<div class="e-box e-box-nopadding">
  In voluptate consectetur occaecat excepteur aute consequat fugiat in in sed pariatur in dolore dolor consectetur amet id ipsum mollit magna cupidatat lorem duis qui esse sunt qui enim cillum lorem quis in commodo ut commodo aute incididunt non irure ut adipiscing pariatur magna veniam ut dolor ut consequat id 
</div>
<div class="e-box e-box-nopadding">
  Ut minim velit in pariatur incididunt tempor do nulla ad amet quis duis aliquip ut cupidatat esse est dolore eiusmod eiusmod ut ullamco eiusmod sint magna ut officia ad occaecat lorem mollit enim aute occaecat tempor aute ut nisi magna incididunt eiusmod nostrud nisi ea eiusmod et et ex dolor 
</div>
JavaScript
Copy JavaScript
Nulla dolor minim voluptate aliquip proident ut in in ullamco magna consectetur voluptate irure elit cillum cupidatat aliquip ut adipiscing eu amet nisi dolor anim sed labore dolore do in cillum in enim minim amet aliqua irure eiusmod exercitation mollit minim amet nisi nostrud do ea nulla ut anim ex

Small margin
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box-smallmargin

<div class="e-box e-box-smallmargin">
  Laboris id adipiscing elit enim proident dolore nulla id amet do magna elit in tempor ea pariatur consectetur proident enim cillum dolor ut in nisi reprehenderit sed consequat qui id veniam minim laborum laborum reprehenderit mollit veniam lorem in do dolore incididunt et reprehenderit ipsum officia aliqua pariatur pariatur ad 
</div>
<div class="e-box e-box-smallmargin">
  Aliqua dolor dolore elit amet ullamco ut pariatur lorem ex laboris anim cupidatat anim in excepteur minim dolor amet dolore esse incididunt lorem labore sed dolor ullamco magna laboris enim ex ea amet dolore aliqua ipsum labore aliqua elit lorem enim eiusmod sint quis aute sunt est dolore nisi ipsum 
</div>
JavaScript
Copy JavaScript
Adipiscing do exercitation incididunt mollit in dolor tempor excepteur adipiscing anim est cillum magna cillum mollit nisi do dolor elit nulla et ea reprehenderit aliquip consectetur excepteur voluptate dolor officia cupidatat consequat irure aute aute sint eu in dolor ad incididunt dolor adipiscing duis fugiat lorem elit lorem dolore proident

Login
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box-login

<div class="e-box e-box-login">
  In nisi anim labore dolor ut et sint adipiscing quis 
  <br>
  Quis sed officia nostrud anim incididunt id consequat fugiat eiusmod 
</div>
<div class="e-box e-box-login">
  Exercitation elit eu sit anim aliqua ullamco commodo sit magna 
  <br>
  Elit sit laboris eu tempor esse aliqua ut sit dolore 
</div>
JavaScript
Copy JavaScript

Login dark
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box-login.e-box-login-dark

<div class="e-box e-box-login e-box-login-dark">
  Incididunt fugiat eu id aliqua excepteur lorem amet dolor cillum 
  <br>
  Proident non proident dolore aliqua esse ut incididunt duis dolore 
</div>
<div class="e-box e-box-login e-box-login-dark">
  Esse deserunt dolor eiusmod adipiscing elit enim aliquip mollit aliqua 
  <br>
  In eu laborum sunt do nostrud voluptate do velit sint 
</div>
JavaScript
Copy JavaScript

Login wide (max width)
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-box-login.e-box-login-wide

<div class="e-box e-box-login e-box-login-wide">
  Excepteur lorem culpa dolore esse non excepteur amet ex ad amet pariatur laborum irure in tempor deserunt culpa incididunt nisi amet sit aliquip aliquip consequat laboris elit eu fugiat in ullamco in ut aute aliqua sint in nostrud dolor laboris eu elit culpa pariatur minim fugiat duis officia consectetur mollit eiusmod consequat laboris cupidatat sint dolore aliqua nulla ea quis dolore laborum mollit consequat minim enim sit quis in ut voluptate non do dolore veniam sunt veniam ut aliqua consequat qui amet commodo culpa reprehenderit ut sit commodo adipiscing aliqua ut officia sunt pariatur velit elit ex nulla dolore exercitation 
</div>
<div class="e-box e-box-login e-box-login-wide">
  In aute dolor minim ut reprehenderit ad in id cillum commodo ea ipsum est mollit pariatur ullamco aliqua ut dolor tempor ut pariatur duis ut eu consequat ut esse mollit quis aliquip laboris cillum do aliquip dolore quis in id non minim enim commodo ad occaecat ex ex mollit esse cillum dolor aliqua elit ut dolore nulla excepteur exercitation laboris incididunt adipiscing ullamco sunt labore ad eu adipiscing consequat adipiscing occaecat qui dolor ipsum irure sed proident velit ut excepteur dolore pariatur commodo non cillum occaecat proident ipsum dolor aliqua sunt duis proident enim culpa ipsum lorem proident pariatur magna 
</div>
JavaScript
Copy JavaScript