UI Kit

Overview
Principles
Icons
Colors
Flex grid
Functions
Grid
Media
Mixins
Typography
Utility
Button
Checkbox
Emoji
Field
Input
Multiselect
Numberinput
Radio
Select
Switch
Textarea
Tokeninput
Upload
Box
Emptystate
Field
Fullheight
Header
Infolayer
Phone
Separator
Fixed
Deprecated Flex Grid
Grid
Accordion
Navigation bar
Pagination
Steps
Tab
Verticalnav
Alert
Notice
Progress
Spinner
Validator
Button
Button group
Button radio
Calendar
Card
Carousel
Chart
Colorpicker
Compare
Criteria
Datepicker
Daterange
Datetimepicker
Dialog
Dropdown
Fieldset
Inplaceeditor
Label
List
Overlay
Ring
Snackbar
Table
Tooltip

Flex grid

Last update:
()
Message doc(flexgrid): add xsmall example
Committer: rudywaltz
Version history

Default

Copy Jade
Copy HTML
Show code
Hide code 

<div class="e-grid">
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div class="e-grid">
      <div class="e-cell">
        <div content="default" class="doc-griditem"></div></div>
      <div class="e-cell">
        <div content="default" class="doc-griditem"></div></div></div></div></div>


                                <div class="e-grid">
                                  <div class="e-cell">
                                    <div content="default" class="doc-griditem"></div>
                                  </div>
                                  <div class="e-cell">
                                    <div content="default" class="doc-griditem"></div>
                                  </div>
                                  <div class="e-cell">
                                    <div content="default" class="doc-griditem"></div>
                                  </div>
                                  <div class="e-cell">
                                    <div class="e-grid">
                                      <div class="e-cell">
                                        <div content="default" class="doc-griditem"></div>
                                      </div>
                                      <div class="e-cell">
                                        <div content="default" class="doc-griditem"></div>
                                      </div>
                                    </div>
                                  </div>
                                </div>

Variations

xSmall
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-xsmall 

<div class="e-grid e-grid-xsmall">
  <div class="e-cell e-cell-xsmall">
    <div content="xsmall" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-xsmall">
    <div content="xsmall" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-xsmall">
    <div content="xsmall" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-xsmall">
    <div class="e-grid e-grid-xsmall">
      <div class="e-cell e-cell-xsmall">
        <div content="xsmall" class="doc-griditem"></div></div>
      <div class="e-cell e-cell-xsmall">
        <div content="xsmall" class="doc-griditem"></div></div></div></div></div>


                                  <div class="e-grid e-grid-xsmall">
                                    <div class="e-cell e-cell-xsmall">
                                      <div content="xsmall" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-xsmall">
                                      <div content="xsmall" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-xsmall">
                                      <div content="xsmall" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-xsmall">
                                      <div class="e-grid e-grid-xsmall">
                                        <div class="e-cell e-cell-xsmall">
                                          <div content="xsmall" class="doc-griditem"></div>
                                        </div>
                                        <div class="e-cell e-cell-xsmall">
                                          <div content="xsmall" class="doc-griditem"></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Small
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-small 

<div class="e-grid e-grid-small">
  <div class="e-cell e-cell-small">
    <div content="small" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-small">
    <div content="small" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-small">
    <div content="small" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-small">
    <div class="e-grid e-grid-small">
      <div class="e-cell e-cell-small">
        <div content="small" class="doc-griditem"></div></div>
      <div class="e-cell e-cell-small">
        <div content="small" class="doc-griditem"></div></div></div></div></div>


                                  <div class="e-grid e-grid-small">
                                    <div class="e-cell e-cell-small">
                                      <div content="small" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-small">
                                      <div content="small" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-small">
                                      <div content="small" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-small">
                                      <div class="e-grid e-grid-small">
                                        <div class="e-cell e-cell-small">
                                          <div content="small" class="doc-griditem"></div>
                                        </div>
                                        <div class="e-cell e-cell-small">
                                          <div content="small" class="doc-griditem"></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Medium
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-medium 

<div class="e-grid e-grid-medium">
  <div class="e-cell e-cell-medium">
    <div content="medium" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-medium">
    <div content="medium" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-medium">
    <div content="medium" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-medium">
    <div class="e-grid e-grid-medium">
      <div class="e-cell e-cell-medium">
        <div content="medium" class="doc-griditem"></div></div>
      <div class="e-cell e-cell-medium">
        <div content="medium" class="doc-griditem"></div></div></div></div></div>


                                  <div class="e-grid e-grid-medium">
                                    <div class="e-cell e-cell-medium">
                                      <div content="medium" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-medium">
                                      <div content="medium" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-medium">
                                      <div content="medium" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-medium">
                                      <div class="e-grid e-grid-medium">
                                        <div class="e-cell e-cell-medium">
                                          <div content="medium" class="doc-griditem"></div>
                                        </div>
                                        <div class="e-cell e-cell-medium">
                                          <div content="medium" class="doc-griditem"></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Large
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-large 

<div class="e-grid e-grid-large">
  <div class="e-cell e-cell-large">
    <div content="large" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-large">
    <div content="large" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-large">
    <div content="large" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-large">
    <div class="e-grid e-grid-large">
      <div class="e-cell e-cell-large">
        <div content="large" class="doc-griditem"></div></div>
      <div class="e-cell e-cell-large">
        <div content="large" class="doc-griditem"></div></div></div></div></div>


                                  <div class="e-grid e-grid-large">
                                    <div class="e-cell e-cell-large">
                                      <div content="large" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-large">
                                      <div content="large" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-large">
                                      <div content="large" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-large">
                                      <div class="e-grid e-grid-large">
                                        <div class="e-cell e-cell-large">
                                          <div content="large" class="doc-griditem"></div>
                                        </div>
                                        <div class="e-cell e-cell-large">
                                          <div content="large" class="doc-griditem"></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Small in normal
Copy Jade
Copy HTML
Show code
Hide code 

<div class="e-grid">
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div class="e-grid e-grid-small">
      <div class="e-cell e-cell-small">
        <div content="small" class="doc-griditem"></div></div>
      <div class="e-cell e-cell-small">
        <div content="small" class="doc-griditem"></div></div></div></div></div>


                                  <div class="e-grid">
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div class="e-grid e-grid-small">
                                        <div class="e-cell e-cell-small">
                                          <div content="small" class="doc-griditem"></div>
                                        </div>
                                        <div class="e-cell e-cell-small">
                                          <div content="small" class="doc-griditem"></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Normal in small
Copy Jade
Copy HTML
Show code
Hide code 

<div class="e-grid e-grid-small">
  <div class="e-cell e-cell-small">
    <div content="small" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-small">
    <div content="small" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-small">
    <div content="small" class="doc-griditem"></div></div>
  <div class="e-cell e-cell-small">
    <div class="e-grid">
      <div class="e-cell">
        <div content="default" class="doc-griditem"></div></div>
      <div class="e-cell">
        <div content="default" class="doc-griditem"></div></div></div></div></div>


                                  <div class="e-grid e-grid-small">
                                    <div class="e-cell e-cell-small">
                                      <div content="small" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-small">
                                      <div content="small" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-small">
                                      <div content="small" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell e-cell-small">
                                      <div class="e-grid">
                                        <div class="e-cell">
                                          <div content="default" class="doc-griditem"></div>
                                        </div>
                                        <div class="e-cell">
                                          <div content="default" class="doc-griditem"></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Fixed width grid
Copy Jade
Copy HTML
Show code
Hide code 

<div class="e-grid">
  <div class="e-cell e-cell-4">
    <div content="4" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4">
    <div content="4" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4">
    <div class="e-grid">
      <div class="e-cell e-cell-4">
        <div content="4" class="doc-griditem doc-griditem-auto"></div></div>
      <div class="e-cell e-cell-4">
        <div content="4" class="doc-griditem doc-griditem-auto"></div></div>
      <div class="e-cell e-cell-4">
        <div content="4" class="doc-griditem doc-griditem-auto"></div></div></div></div></div>


                                  <div class="e-grid">
                                    <div class="e-cell e-cell-4">
                                      <div content="4" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4">
                                      <div content="4" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4">
                                      <div class="e-grid">
                                        <div class="e-cell e-cell-4">
                                          <div content="4" class="doc-griditem doc-griditem-auto"></div>
                                        </div>
                                        <div class="e-cell e-cell-4">
                                          <div content="4" class="doc-griditem doc-griditem-auto"></div>
                                        </div>
                                        <div class="e-cell e-cell-4">
                                          <div content="4" class="doc-griditem doc-griditem-auto"></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Auto-width
Copy Jade
Copy HTML
Show code
Hide code
.e-cell-auto 

<div class="e-grid">
  <div class="e-cell e-cell-auto">
    <div content="auto" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div></div>


                                  <div class="e-grid">
                                    <div class="e-cell e-cell-auto">
                                      <div content="auto" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                  </div>

Space around
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-around 

<div class="e-grid e-grid-around">
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div></div>


                                  <div class="e-grid e-grid-around">
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                  </div>

Space between
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-between 

<div class="e-grid e-grid-between">
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div></div>


                                  <div class="e-grid e-grid-between">
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                  </div>

Center
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-center 

<div class="e-grid e-grid-center">
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div></div>


                                  <div class="e-grid e-grid-center">
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                  </div>

Vertical center
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-vertical_center 

<div style="height: 100px; border: 1px solid #999;" class="e-grid e-grid-vertical_center">
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div>
  <div class="e-cell">
    <div content="default" class="doc-griditem"></div></div></div>


                                  <div style="height: 100px; border: 1px solid #999;" class="e-grid e-grid-vertical_center">
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                    <div class="e-cell">
                                      <div content="default" class="doc-griditem"></div>
                                    </div>
                                  </div>

Wrap
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-wrap 

<div class="e-grid e-grid-wrap">
  <div class="e-cell e-cell-4">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div></div>


                                  <div class="e-grid e-grid-wrap">
                                    <div class="e-cell e-cell-4">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                  </div>

Wrap small
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-wrap .e-grid-small 

<div class="e-grid e-grid-wrap e-grid-small">
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div></div>


                                  <div class="e-grid e-grid-wrap e-grid-small">
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                  </div>

Wrap mixed
Copy Jade
Copy HTML
Show code
Hide code
.e-grid-wrap .e-grid-small and .e-grid-large 

<div class="e-grid e-grid-wrap e-grid-small">
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div class="e-grid e-grid-large">
      <div class="e-cell e-cell-large e-cell-6">
        <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
      <div class="e-cell e-cell-large e-cell-6">
        <div content="default" class="doc-griditem doc-griditem-auto"></div></div></div></div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div class="e-grid e-grid-wrap">
      <div class="e-cell e-cell-6">
        <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
      <div class="e-cell e-cell-6">
        <div content="default" class="doc-griditem doc-griditem-auto"></div></div>
      <div class="e-cell e-cell-6">
        <div content="default" class="doc-griditem doc-griditem-auto"></div></div></div></div></div>


                                  <div class="e-grid e-grid-wrap e-grid-small">
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div class="e-grid e-grid-large">
                                        <div class="e-cell e-cell-large e-cell-6">
                                          <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                        </div>
                                        <div class="e-cell e-cell-large e-cell-6">
                                          <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-small">
                                      <div class="e-grid e-grid-wrap">
                                        <div class="e-cell e-cell-6">
                                          <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                        </div>
                                        <div class="e-cell e-cell-6">
                                          <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                        </div>
                                        <div class="e-cell e-cell-6">
                                          <div content="default" class="doc-griditem doc-griditem-auto"></div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

Borders
Copy Jade
Copy HTML
Show code
Hide code 

<div class="e-grid">
  <div class="e-cell e-cell-4 e-cell-border_bottom e-cell-border_top e-cell-border_right e-cell-border_left">
    <div class="e-btn e-btn-link">
      link button
    </div>
  </div>
  <div class="e-cell e-cell-4 e-cell-border_bottom e-cell-border_top e-cell-border_right">
    <div class="e-btn e-btn-link">
      link button
    </div>
  </div>
  <div class="e-cell e-cell-4 e-cell-border_bottom e-cell-border_top e-cell-border_right">
    <div class="e-grid">
      <div class="e-cell e-cell-4">
        <div class="e-btn e-btn-link">
          link button
        </div>
      </div>
      <div class="e-cell e-cell-4">
        <div class="e-btn e-btn-link">
          link button
        </div>
      </div>
      <div class="e-cell e-cell-4">
        <div class="e-btn e-btn-link">
          link button
        </div>
      </div>
    </div>
  </div>
</div>


                                  <div class="e-grid">
                                    <div class="e-cell e-cell-4 e-cell-border_bottom e-cell-border_top e-cell-border_right e-cell-border_left">
                                      <div class="e-btn e-btn-link">link button</div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-border_bottom e-cell-border_top e-cell-border_right">
                                      <div class="e-btn e-btn-link">link button</div>
                                    </div>
                                    <div class="e-cell e-cell-4 e-cell-border_bottom e-cell-border_top e-cell-border_right">
                                      <div class="e-grid">
                                        <div class="e-cell e-cell-4">
                                          <div class="e-btn e-btn-link">link button</div>
                                        </div>
                                        <div class="e-cell e-cell-4">
                                          <div class="e-btn e-btn-link">link button</div>
                                        </div>
                                        <div class="e-cell e-cell-4">
                                          <div class="e-btn e-btn-link">link button</div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
link button
link button
link button
link button
link button