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

Fieldset

Last update:
()
Message doc(search): new tags and hidden components --skip-ci
Committer: Tamás Bíró
Version history

Fieldset
Copy Jade
Copy HTML
Show code
Hide code 

<fieldset class="e-fieldset">
  <div class="e-row">
    <div class="e-col-12">
      <div class="e-fieldset__item e-fieldset__item-chart">
        Minim mollit incididunt velit dolore 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        Non non labore quis sit 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Deserunt pariatur nisi minim in 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Labore in eiusmod esse ut 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Culpa veniam occaecat dolore lorem 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Id commodo nostrud ut et 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Ut laboris labore commodo anim 
      </div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        Aute amet cillum veniam culpa 
      </div>
    </div>
  </div>
</fieldset>


                                <fieldset class="e-fieldset">
                                  <div class="e-row">
                                    <div class="e-col-12">
                                      <div class="e-fieldset__item e-fieldset__item-chart">Eu exercitation nostrud cillum voluptate 
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">Non nisi cillum mollit nisi 
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">Ex consectetur do amet nisi 
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">Eu id consequat est eiusmod 
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">Duis velit adipiscing elit aliquip 
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">Cupidatat dolor nisi non incididunt 
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">Culpa dolor aliquip nulla in 
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">Cupidatat occaecat pariatur aliquip anim 
                                      </div>
                                    </div>
                                  </div>
                                </fieldset>
Commodo pariatur mollit labore qui
Dolor dolore fugiat ut pariatur
Incididunt ipsum aliquip do et
Minim voluptate magna ullamco laboris
Nostrud consequat fugiat laborum aute
Ut amet sit in nostrud
Exercitation nulla ipsum anim sint
Occaecat tempor occaecat ipsum labore

Fieldset in textarea
Copy Jade
Copy HTML
Show code
Hide code 

<div class="e-field">
  <div class="e-field__label">
    Label
  </div>
  <div class="e-toolbox">
    <div class="e-toolbox__content">
      <div class="e-toolbox__actions">
        <e-tooltip content="tooltip content" class="float-left">
          <div class="e-btn e-btn-onlyicon e-svgclickfix">
            <e-icon icon="user"></e-icon>
          </div>
        </e-tooltip>
      </div>
      <e-tooltip content="tooltip content" class="float-right">
        <div class="text-color-warning">
          <e-icon icon="warning" color="warning" type="table"></e-icon>
          <strong>
            150/140
          </strong>
        </div>
      </e-tooltip>
    </div>
  </div>
  <div class="e-flex e-flex-sticky">
    <textarea placeholder="Textarea placeholder" class="e-flex__item e-flex__item-auto e-input e-input-textarea e-input-auto_height"></textarea>
    <div class="e-flex__item">
      <div class="e-fieldset e-fieldset-sidebar">
        <div class="e-fieldset__item e-fieldset__item-chart">
          English -
          <span class="text-color-shade">
            &nbsp;32%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
          Russian -
          <span class="text-color-shade">
            &nbsp;7.5%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Deutsch -
          <span class="text-color-shade">
            &nbsp;2.6%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          French -
          <span class="text-color-shade">
            &nbsp;56%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Turkish -
          <span class="text-color-shade">
            &nbsp;86%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Hungarian -
          <span class="text-color-shade">
            &nbsp;12%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Spanish -
          <span class="text-color-shade">
            &nbsp;0.13%
          </span>
        </div>
        <div class="e-fieldset__item e-fieldset__item-chart">
          Swedish -
          <span class="text-color-shade">
            &nbsp;0.13%
          </span>
        </div>
      </div>
      <a class="e-btn e- e-btn-fieldset">
        <e-icon icon="cog"></e-icon>
        Manage Language
      </a>
    </div>
  </div>
</div>


                                <div class="e-field">
                                  <div class="e-field__label">Label</div>
                                  <div class="e-toolbox">
                                    <div class="e-toolbox__content">
                                      <div class="e-toolbox__actions">
                                        <e-tooltip content="tooltip content" class="float-left">
                                          <div class="e-btn e-btn-onlyicon e-svgclickfix">
                                            <e-icon icon="user"></e-icon>
                                          </div>
                                        </e-tooltip>
                                      </div>
                                      <e-tooltip content="tooltip content" class="float-right">
                                        <div class="text-color-warning">
                                          <e-icon icon="warning" color="warning" type="table"></e-icon><strong>150/140</strong>
                                        </div>
                                      </e-tooltip>
                                    </div>
                                  </div>
                                  <div class="e-flex e-flex-sticky">
                                    <textarea placeholder="Textarea placeholder" class="e-flex__item e-flex__item-auto e-input e-input-textarea e-input-auto_height"></textarea>
                                    <div class="e-flex__item">
                                      <div class="e-fieldset e-fieldset-sidebar">
                                        <div class="e-fieldset__item e-fieldset__item-chart">English -<span class="text-color-shade">&nbsp;32%</span></div>
                                        <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">Russian -<span class="text-color-shade">&nbsp;7.5%</span></div>
                                        <div class="e-fieldset__item e-fieldset__item-chart">Deutsch -<span class="text-color-shade">&nbsp;2.6%</span></div>
                                        <div class="e-fieldset__item e-fieldset__item-chart">French -<span class="text-color-shade">&nbsp;56%</span></div>
                                        <div class="e-fieldset__item e-fieldset__item-chart">Turkish -<span class="text-color-shade">&nbsp;86%</span></div>
                                        <div class="e-fieldset__item e-fieldset__item-chart">Hungarian -<span class="text-color-shade">&nbsp;12%</span></div>
                                        <div class="e-fieldset__item e-fieldset__item-chart">Spanish -<span class="text-color-shade">&nbsp;0.13%</span></div>
                                        <div class="e-fieldset__item e-fieldset__item-chart">Swedish -<span class="text-color-shade">&nbsp;0.13%</span></div>
                                      </div><a class="e-btn e- e-btn-fieldset">
                                        <e-icon icon="cog"></e-icon>Manage Language</a>
                                    </div>
                                  </div>
                                </div>
Label
150/140
English - 32%
Russian - 7.5%
Deutsch - 2.6%
French - 56%
Turkish - 86%
Hungarian - 12%
Spanish - 0.13%
Swedish - 0.13%
Manage Language

Fieldset

Copy Jade
Copy HTML
Show code
Hide code 

<fieldset class="e-fieldset">
  <div class="e-row">
    <div class="e-col-12">
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        <input id="legend-impressions" type="checkbox" checked="checked" data-id="0" class="e-checkbox e-checkbox-impressions">
        <label title="Impressions" for="legend-impressions">
          Impressions
        </label>
        <div class="e-fieldset__item__indicator background-color-impressions"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-reach" type="checkbox" data-id="1" class="e-checkbox">
        <label title="Reach" for="legend-reach">
          Reach
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
        <input id="legend-frequency" type="checkbox" data-id="2" checked class="e-checkbox e-checkbox-frequency">
        <label title="Frequency" for="legend-frequency">
          Frequency
        </label>
        <div class="e-fieldset__item__indicator background-color-frequency"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-socialreach" type="checkbox" data-id="3" class="e-checkbox">
        <label title="Social reach" for="legend-socialreach">
          Social reach
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-clicks" type="checkbox" data-id="4" class="e-checkbox">
        <label title="Clicks" for="legend-clicks">
          Clicks
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-likes" type="checkbox" data-id="5" class="e-checkbox">
        <label title="Likes" for="legend-likes">
          Likes
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-comments" type="checkbox" data-id="6" class="e-checkbox">
        <label title="Comments" for="legend-comments">
          Comments
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-pageclick" type="checkbox" data-id="7" class="e-checkbox">
        <label title="Page click" for="legend-pageclick">
          Page click
        </label>
        <div class="e-fieldset__item__indicator"></div></div>
      <div class="e-fieldset__item e-fieldset__item-chart">
        <input id="legend-conversions" type="checkbox" data-id="8" class="e-checkbox">
        <label title="Conversions" for="legend-conversions">
          Conversions
        </label>
        <div class="e-fieldset__item__indicator"></div></div></div></div>
</fieldset>


                                <fieldset class="e-fieldset">
                                  <div class="e-row">
                                    <div class="e-col-12">
                                      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
                                        <input id="legend-impressions" type="checkbox" checked="checked" data-id="0" class="e-checkbox e-checkbox-impressions">
                                        <label title="Impressions" for="legend-impressions">Impressions</label>
                                        <div class="e-fieldset__item__indicator background-color-impressions"></div>
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">
                                        <input id="legend-reach" type="checkbox" data-id="1" class="e-checkbox">
                                        <label title="Reach" for="legend-reach">Reach</label>
                                        <div class="e-fieldset__item__indicator"></div>
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart e-fieldset__item-chart-active">
                                        <input id="legend-frequency" type="checkbox" data-id="2" checked="" class="e-checkbox e-checkbox-frequency">
                                        <label title="Frequency" for="legend-frequency">Frequency</label>
                                        <div class="e-fieldset__item__indicator background-color-frequency"></div>
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">
                                        <input id="legend-socialreach" type="checkbox" data-id="3" class="e-checkbox">
                                        <label title="Social reach" for="legend-socialreach">Social reach</label>
                                        <div class="e-fieldset__item__indicator"></div>
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">
                                        <input id="legend-clicks" type="checkbox" data-id="4" class="e-checkbox">
                                        <label title="Clicks" for="legend-clicks">Clicks</label>
                                        <div class="e-fieldset__item__indicator"></div>
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">
                                        <input id="legend-likes" type="checkbox" data-id="5" class="e-checkbox">
                                        <label title="Likes" for="legend-likes">Likes</label>
                                        <div class="e-fieldset__item__indicator"></div>
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">
                                        <input id="legend-comments" type="checkbox" data-id="6" class="e-checkbox">
                                        <label title="Comments" for="legend-comments">Comments</label>
                                        <div class="e-fieldset__item__indicator"></div>
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">
                                        <input id="legend-pageclick" type="checkbox" data-id="7" class="e-checkbox">
                                        <label title="Page click" for="legend-pageclick">Page click</label>
                                        <div class="e-fieldset__item__indicator"></div>
                                      </div>
                                      <div class="e-fieldset__item e-fieldset__item-chart">
                                        <input id="legend-conversions" type="checkbox" data-id="8" class="e-checkbox">
                                        <label title="Conversions" for="legend-conversions">Conversions</label>
                                        <div class="e-fieldset__item__indicator"></div>
                                      </div>
                                    </div>
                                  </div>
                                </fieldset>