Box

HTML

JADE

Default

.e-box

In duis exercitation enim minim labore lorem excepteur in cupidatat magna ad ut in non in ex ipsum laborum ut in deserunt id ex magna elit ut ullamco mollit aliquip elit reprehenderit labore mollit nisi culpa do aliquip voluptate elit non esse enim in irure labore labore irure ullamco pariatur

<div class="e-box">
  Dolore nisi voluptate excepteur sed aute commodo tempor velit adipiscing ut occaecat laboris dolor amet est voluptate laboris id commodo id cillum consequat incididunt amet occaecat amet enim adipiscing ipsum sunt ut sint sint dolor et velit et occaecat sit laboris deserunt minim aliquip aliqua id dolore elit ad in 
</div>


                        <div class="e-box">Incididunt duis quis consequat nisi sunt exercitation nostrud veniam eiusmod velit eiusmod laborum in elit exercitation minim cupidatat labore aliqua eu quis reprehenderit incididunt pariatur amet ad sint eu non cillum consectetur ullamco ad incididunt ea ut proident cillum deserunt in aliquip reprehenderit veniam cupidatat dolore elit fugiat lorem adipiscing 
                        </div>

Variations

Inner

.e-box-inner

Labore fugiat cupidatat esse nostrud sed voluptate dolore nulla laborum nostrud eu in dolore commodo fugiat reprehenderit exercitation nostrud ea exercitation pariatur adipiscing ut eu elit ipsum aliqua in mollit nulla ipsum ullamco exercitation duis dolor pariatur consectetur excepteur ad do elit ad tempor officia dolore deserunt fugiat quis ullamco

<div class="e-box e-box-inner">
  Irure culpa et ipsum tempor duis officia consequat aliqua incididunt consectetur occaecat mollit cupidatat ex ullamco ut tempor mollit dolore esse ut non consequat sit tempor ut cillum ipsum excepteur adipiscing et ad enim enim ut dolor nostrud sint sint duis incididunt fugiat duis sed ex fugiat fugiat quis pariatur 
</div>


                          <div class="e-box e-box-inner">Amet commodo velit sunt velit fugiat ullamco voluptate laboris do non incididunt nulla nulla magna ut veniam fugiat anim eu in mollit adipiscing eu velit dolore ut lorem ad officia aliquip ex anim esse veniam proident pariatur cupidatat laboris ipsum minim sit dolore duis duis in ut occaecat ut cupidatat 
                          </div>

Charts

.e-box-charts

Sunt adipiscing minim minim reprehenderit consectetur ut adipiscing ipsum et enim incididunt anim excepteur nostrud deserunt in nulla dolore proident reprehenderit enim cillum anim ad pariatur cillum ut incididunt do nulla minim ea nisi deserunt in irure sunt cillum non pariatur non occaecat voluptate ut fugiat est voluptate esse elit

<div class="e-box e-box-charts">
  Eiusmod nostrud do pariatur dolor velit veniam ut laborum in enim sed occaecat incididunt eu minim anim fugiat magna aliquip ut reprehenderit non adipiscing occaecat irure pariatur reprehenderit minim amet fugiat in dolor non consequat duis consequat exercitation dolore eu esse culpa nisi cupidatat laboris velit duis cillum amet excepteur 
</div>


                          <div class="e-box e-box-charts">Velit ut reprehenderit consectetur irure id ad ad dolor velit exercitation eiusmod dolor dolor magna lorem reprehenderit pariatur ut consectetur adipiscing excepteur id voluptate dolor nulla voluptate amet cupidatat proident dolore amet ea sint eu lorem sint proident nisi est labore lorem eu excepteur ullamco irure cillum commodo culpa id 
                          </div>

Chart item

.e-box-chart

Commodo eiusmod do incididunt sint do laborum ut sint ut ut ex magna laboris voluptate irure ipsum laborum magna excepteur duis in ut velit id velit cillum laboris cupidatat in nostrud reprehenderit reprehenderit aute eiusmod dolore est consectetur ipsum officia ullamco nostrud cupidatat dolor aliquip eiusmod deserunt in mollit sed

<div class="e-box e-box-chart">
  Non eiusmod magna consequat magna in minim eiusmod fugiat cillum aliquip ullamco consequat ut non ad voluptate consequat non officia id elit consequat veniam mollit occaecat cupidatat aute anim ut laborum ut pariatur voluptate do dolor pariatur velit ullamco sint cillum elit id aute laborum do voluptate anim commodo amet 
</div>


                          <div class="e-box e-box-chart">Ullamco ut tempor deserunt mollit velit ipsum nostrud tempor adipiscing laboris ad adipiscing nisi laboris duis ad reprehenderit lorem do ut dolore consequat ea consequat esse consectetur qui fugiat aliqua nostrud voluptate id irure ut id est pariatur fugiat in non exercitation eiusmod elit culpa quis mollit in consequat mollit 
                          </div>

No padding

.e-box-nopadding

Dolore magna ex ea quis magna dolore mollit lorem ex elit proident est velit commodo incididunt aliqua culpa est culpa culpa proident lorem reprehenderit voluptate sed id duis proident dolor magna in qui duis ad culpa amet reprehenderit magna ex elit commodo qui veniam mollit dolore in ea aliquip sed

<div class="e-box e-box-nopadding">
  Voluptate consequat sit incididunt labore fugiat id deserunt enim enim aliquip lorem non pariatur quis commodo elit veniam eiusmod cupidatat qui tempor dolore elit eiusmod sit est cupidatat laboris reprehenderit non excepteur officia dolore cupidatat quis exercitation cillum ut exercitation ut occaecat fugiat pariatur sunt magna ad dolor duis in 
</div>


                          <div class="e-box e-box-nopadding">Aliquip occaecat aute pariatur irure dolore sint quis adipiscing labore occaecat quis in sunt commodo deserunt sit sint in dolor irure est sed ut sunt eu laboris elit adipiscing incididunt ipsum ex enim laboris pariatur deserunt enim dolor nisi mollit commodo nostrud velit laboris sit dolore ut ut laborum magna 
                          </div>

Small margin

.e-box-smallmargin

Commodo enim lorem est id minim non non dolor incididunt dolore dolor in id elit et incididunt sit veniam elit tempor sint mollit tempor do laborum dolor incididunt in laboris dolore proident incididunt adipiscing cupidatat et duis deserunt do enim nostrud lorem ex aliquip ex adipiscing in et tempor deserunt

<div class="e-box e-box-smallmargin">
  Ex ex amet in cillum aliquip aliquip veniam sed non ut sit deserunt voluptate pariatur id anim labore fugiat in ut qui cillum ad ea eu excepteur ipsum ut sit aute deserunt in veniam reprehenderit adipiscing quis cupidatat sunt in dolor adipiscing incididunt occaecat enim fugiat laborum excepteur excepteur sed 
</div>


                          <div class="e-box e-box-smallmargin">Eu consequat esse in cillum consequat enim voluptate eiusmod laborum enim labore aliqua adipiscing sint adipiscing qui ad incididunt eu deserunt fugiat labore nisi ad ea ea in consectetur dolore deserunt in velit irure incididunt sint consequat lorem esse voluptate in commodo esse excepteur tempor eu officia labore aute pariatur 
                          </div>

Login

.e-box-login

<div class="e-box e-box-login">
  Qui ex ea dolore nisi dolore in commodo labore in 
  <br>
  Sint adipiscing aliqua ut eu dolore occaecat nisi qui ut 
</div>


                          <div class="e-box e-box-login">Adipiscing nostrud esse officia anim ea ullamco labore commodo irure <br>Officia ut ullamco aliqua commodo pariatur do consectetur non et 
                          </div>

Login dark

.e-box-login.e-box-login-dark

<div class="e-box e-box-login e-box-login-dark">
  Duis adipiscing sint nulla nisi eu aute irure aliquip anim 
  <br>
  In veniam ut aliqua pariatur qui veniam ut dolor et 
</div>


                          <div class="e-box e-box-login e-box-login-dark">Veniam sit culpa adipiscing duis mollit officia eiusmod elit eu <br>Commodo adipiscing dolor dolor reprehenderit minim aute eu in cillum 
                          </div>

Login wide (max width)

.e-box-login.e-box-login-wide

Nulla irure ea amet ex eu occaecat ex est non anim aliquip commodo veniam esse ex officia dolore in nostrud qui excepteur id tempor incididunt irure irure mollit nostrud est ex eiusmod cupidatat nulla occaecat ea aute ut et anim occaecat ullamco et est aliqua aute aliquip do cillum aute est est ea laboris laboris sed lorem amet nostrud dolor dolor consequat elit irure exercitation reprehenderit voluptate non amet do anim eiusmod ad lorem ut occaecat eu in sit laboris tempor quis sit in veniam est occaecat cillum officia aliquip anim in cupidatat esse non occaecat velit laborum consectetur ad

<div class="e-box e-box-login e-box-login-wide">
  Id enim laboris esse excepteur proident labore anim culpa elit minim culpa velit sint ipsum id non in exercitation deserunt ex duis dolor sit sed aute enim aute aliqua anim reprehenderit veniam dolore fugiat culpa consectetur minim ut amet incididunt do reprehenderit nostrud ullamco nulla consequat ullamco tempor dolore sed in anim irure in veniam ut id lorem proident dolor elit quis aliqua velit esse ut mollit enim culpa dolor eu irure eu do culpa cillum aute ullamco laboris culpa eu labore id eiusmod tempor occaecat culpa eu ex aliquip reprehenderit cupidatat dolor lorem veniam sit mollit ut id cupidatat 
</div>


                          <div class="e-box e-box-login e-box-login-wide">In ex ex culpa ea ut est ea elit culpa ut ut velit adipiscing pariatur magna excepteur laborum proident irure est amet do consectetur sint in est adipiscing dolor cillum ut sunt excepteur enim qui ad lorem tempor veniam et cupidatat et in nulla sed aliquip nulla amet eiusmod magna ad et in dolor mollit aliqua incididunt ad excepteur deserunt eu in qui amet laborum veniam consequat ipsum consectetur id anim tempor officia commodo dolor officia ullamco reprehenderit veniam ut id ut sint voluptate irure culpa incididunt veniam voluptate magna in officia eiusmod ullamco ex sit magna veniam labore in 
                          </div>

Last update

Message	style(scss): more linting
Date:	()
Committer:	Tamás Bíró

Component history

Box

Default .e-box

Variations

Inner .e-box-inner

Charts .e-box-charts

Chart item .e-box-chart

No padding .e-box-nopadding

Small margin .e-box-smallmargin

Login .e-box-login

Login dark .e-box-login.e-box-login-dark

Login wide (max width) .e-box-login.e-box-login-wide