Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Box

Default

Copy Pug
Copy HTML
Show code
Hide code
.e-box

<div class="e-box">
  Labore eu nulla elit in elit dolore et exercitation aliqua ut aliquip officia ipsum non aliqua mollit adipiscing enim non dolore aliquip amet ad occaecat amet in ullamco in culpa pariatur non ut laborum esse eiusmod consequat eiusmod ut mollit ut nulla ut elit adipiscing pariatur aliquip sit sed ut 
</div>

<div class="e-box">Esse velit nisi adipiscing cillum in deserunt eu tempor dolore non anim lorem minim in qui sit occaecat reprehenderit dolor ipsum commodo deserunt consectetur velit in officia elit nostrud sint mollit dolor qui et consectetur eiusmod cillum ut adipiscing labore et mollit dolor reprehenderit sunt excepteur ullamco ex consequat incididunt </div>
Exercitation tempor officia esse reprehenderit ut et voluptate dolore proident sit ipsum aute incididunt esse ut pariatur exercitation ea velit officia veniam sint deserunt nisi ad dolore lorem tempor consectetur in proident aute ipsum sed ipsum culpa do tempor laborum sit fugiat in dolore cillum ex quis do non aliquip

Variations

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

<div class="e-box e-box-simple">
  Fugiat duis esse proident minim dolor laboris sed nulla occaecat magna ad tempor ex voluptate laboris ut exercitation nostrud occaecat pariatur nostrud in exercitation nostrud lorem lorem mollit sit in in do amet sunt deserunt laboris aliqua occaecat dolore mollit mollit anim proident deserunt dolore commodo cillum ullamco velit ad 
</div>

<div class="e-box e-box-simple">Magna in enim exercitation in excepteur cillum id consequat id exercitation amet dolor in dolore deserunt amet exercitation ut velit cillum non labore non quis laboris do magna laboris anim adipiscing et reprehenderit labore voluptate pariatur exercitation esse proident aute excepteur sint anim aliqua ipsum dolore aute et tempor qui </div>
Eu eiusmod velit est proident aliqua occaecat aliquip pariatur ad non adipiscing aute irure pariatur do occaecat quis cillum dolore officia consectetur exercitation aute sunt eiusmod commodo dolore adipiscing duis commodo velit nisi commodo ut in incididunt commodo elit voluptate quis in pariatur labore labore exercitation magna tempor fugiat esse

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

<div class="e-box e-box-inner">
  Ut tempor irure ipsum ea lorem ipsum id sed anim enim deserunt tempor esse do officia culpa ut id quis aliquip nulla adipiscing laborum adipiscing proident quis amet in aliqua cupidatat quis eiusmod consequat esse ullamco id sunt aute non dolor ullamco id ex qui anim in occaecat fugiat dolore 
</div>

<div class="e-box e-box-inner">Nulla consectetur in elit et sit nulla labore et duis enim cupidatat irure commodo cillum sunt reprehenderit consequat culpa in fugiat eiusmod consectetur laboris voluptate aliquip deserunt sed cillum labore officia in amet commodo elit irure exercitation ut enim incididunt quis reprehenderit proident ad lorem ipsum mollit ea exercitation in </div>
Laboris voluptate tempor ut nulla quis est eiusmod amet velit proident dolore velit aliquip dolore ad amet consectetur ullamco eu occaecat mollit occaecat est do dolore sit dolor magna ipsum amet incididunt et aliquip quis incididunt ut est laborum aute mollit ad aliqua mollit est excepteur ullamco labore sit adipiscing

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

<div class="e-box e-box-charts">
  Irure aliquip eu duis tempor amet amet fugiat culpa esse voluptate irure nostrud occaecat qui veniam aute ullamco eiusmod mollit et in dolor aliquip commodo proident voluptate enim tempor veniam ut occaecat qui lorem amet in non est dolore incididunt duis ad ipsum ex labore dolor ut esse nulla reprehenderit 
</div>

<div class="e-box e-box-charts">Eiusmod nisi tempor lorem magna adipiscing anim lorem ad ea labore nulla ex nisi duis dolor cillum duis ipsum reprehenderit cupidatat ut proident velit non anim ipsum ex aliqua ut culpa dolore reprehenderit deserunt aliquip ex anim cupidatat officia et quis adipiscing lorem ad in ut culpa qui dolor sed </div>
In adipiscing sit qui occaecat cillum non et veniam ullamco cupidatat non eiusmod anim commodo dolore pariatur sit eiusmod aute enim aliquip do cupidatat amet occaecat ut non laborum labore aute proident proident sed ipsum tempor consequat labore veniam sunt eu est excepteur aliquip esse incididunt cillum laborum irure ut

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

<div class="e-box e-box-chart">
  Excepteur est ut consectetur minim nulla et esse incididunt laborum veniam ut anim sit ex anim in ex dolore veniam nulla non dolore exercitation anim sunt dolor labore consectetur ad in excepteur amet ut deserunt aliquip id sit excepteur elit amet occaecat in eiusmod nulla ut laboris sint ullamco ipsum 
</div>

<div class="e-box e-box-chart">Dolore lorem anim sint magna veniam voluptate aliquip ut veniam incididunt ut eu sunt dolore minim in culpa qui eiusmod cupidatat in nulla commodo enim in proident ut aute exercitation consectetur consequat fugiat sunt in sed laboris non ut dolor mollit qui aute duis ipsum nisi in irure pariatur laborum </div>
Eu incididunt pariatur in dolore pariatur in dolore sit velit tempor quis veniam elit et nisi dolor ut in laboris nostrud quis elit ut aute eiusmod nostrud excepteur laboris veniam dolore labore reprehenderit culpa dolore labore eiusmod enim minim quis aliquip cillum commodo pariatur nostrud esse officia laborum magna incididunt

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

<div class="e-box e-box-nopadding">
  Labore excepteur veniam enim cupidatat dolor proident sunt nulla ex in consectetur tempor mollit ut enim voluptate quis in sint laborum est dolor laboris in consequat fugiat ut ad aute sit occaecat deserunt consequat minim magna sed officia consectetur cupidatat cillum enim magna dolore ex elit labore tempor adipiscing voluptate 
</div>

<div class="e-box e-box-nopadding">Irure exercitation voluptate consequat amet laboris velit ut duis nisi ut ipsum velit lorem proident tempor dolore enim proident velit enim esse veniam culpa dolore eiusmod dolor voluptate ipsum et minim anim id sed sint laboris veniam ullamco non dolor dolor laboris proident enim aliquip exercitation exercitation esse sunt nisi </div>
Consectetur veniam aliqua sint in ullamco ipsum sunt dolor consequat minim proident non consectetur in consectetur ea irure anim esse minim cupidatat ullamco nulla et adipiscing sit ut fugiat irure consectetur sint exercitation aute non dolor dolore labore sint amet est eu dolor proident qui in exercitation in ut in

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

<div class="e-box e-box-smallmargin">
  Mollit in ut deserunt duis cupidatat cillum ipsum ullamco excepteur aute ullamco ullamco exercitation deserunt voluptate dolor ut ex ad dolore id ullamco dolore ut veniam aliqua ipsum culpa anim dolor deserunt officia nostrud magna velit ad aute sed officia duis ut ex sint ad irure nulla anim id ut 
</div>

<div class="e-box e-box-smallmargin">Ut exercitation sint sunt incididunt nulla elit officia ex occaecat pariatur eiusmod cupidatat dolore veniam voluptate dolore eiusmod commodo consectetur proident irure irure duis in dolor tempor quis magna cupidatat velit cillum quis ut fugiat ad lorem mollit duis aute anim sed dolore velit irure quis consectetur dolor qui elit </div>
Aute nisi eu do laborum id ut anim incididunt velit amet amet laborum elit cupidatat voluptate ex dolore in magna sunt consequat id voluptate proident veniam aliqua minim commodo velit occaecat enim cupidatat nostrud consectetur tempor deserunt dolor proident nostrud dolore ad ut labore nulla dolore nisi sit consequat ad

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

<div class="e-box e-box-login">
  Irure ut anim esse aliquip minim sed qui ipsum aliqua 
  <br>
  Ipsum est reprehenderit labore nostrud dolore pariatur ut ut nostrud 
</div>

<div class="e-box e-box-login">Exercitation qui reprehenderit labore sunt officia adipiscing ea quis est <br>Veniam id in elit elit deserunt excepteur ut dolor non </div>

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

<div class="e-box e-box-login e-box-login-dark">
  Irure elit tempor quis id minim elit occaecat incididunt cillum 
  <br>
  Tempor ea ea esse pariatur ea eiusmod dolor culpa cupidatat 
</div>

<div class="e-box e-box-login e-box-login-dark">Sed ut ea labore sunt ipsum sit dolor dolore id <br>Et magna ullamco dolore magna dolor id commodo lorem incididunt </div>

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

<div class="e-box e-box-login e-box-login-wide">
  Elit enim in et cupidatat sunt ut nulla nisi enim velit eiusmod esse proident in ut reprehenderit fugiat veniam in et tempor sint mollit pariatur occaecat minim excepteur pariatur anim ut voluptate fugiat et ad consequat eu exercitation laboris dolore in labore sed fugiat dolor cupidatat id dolor in deserunt lorem do deserunt quis velit eiusmod laboris officia sit sint ut deserunt velit ea ullamco officia cillum laboris laborum aliquip eu veniam excepteur officia occaecat occaecat ex aliqua quis non amet lorem anim qui in amet in aute anim in consequat id deserunt dolore minim in labore ad esse sint 
</div>

<div class="e-box e-box-login e-box-login-wide">Fugiat sed cillum veniam consequat ipsum ullamco lorem labore culpa dolor consectetur non fugiat elit laborum sunt fugiat laborum voluptate consectetur ut labore veniam enim ea exercitation esse incididunt amet velit culpa ex laborum consectetur magna cupidatat consequat eu esse nostrud cillum exercitation proident laboris commodo non velit occaecat sunt in ad ad qui adipiscing commodo qui occaecat proident nulla laboris commodo pariatur deserunt veniam laboris dolor ipsum nulla sunt dolore dolore labore aliquip cillum irure officia ut nostrud fugiat aute culpa veniam reprehenderit lorem consectetur dolore eu labore enim aliqua anim veniam dolore velit dolore anim veniam lorem voluptate </div>