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

Legend

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

Default

Copy Jade
Copy HTML
Show code
Hide code
.e-legend 

<div class="e-legend">
  <div class="e-legend__title">
    Minim eu qui ullamco 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>


                                <div class="e-legend">
                                  <div class="e-legend__title">In non eu cillum 
                                  </div>
                                  <div class="e-legend__value text-color-info">14.72%</div>
                                </div>
Adipiscing eiusmod veniam non
14.72%

Component Variation

Multiple
Copy Jade
Copy HTML
Show code
Hide code
.e-legend 

<div class="e-legend">
  <div class="e-legend__title">
    Dolor est dolore aute 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>
<div class="e-legend">
  <div class="e-legend__title">
    Voluptate aliqua fugiat ut 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>


                                  <div class="e-legend">
                                    <div class="e-legend__title">Non magna consequat eiusmod 
                                    </div>
                                    <div class="e-legend__value text-color-info">14.72%</div>
                                  </div>
                                  <div class="e-legend">
                                    <div class="e-legend__title">Pariatur ipsum sed ut 
                                    </div>
                                    <div class="e-legend__value text-color-info">14.72%</div>
                                  </div>
Qui aliquip ut fugiat
14.72%
Ut eu do exercitation
14.72%

With total value
Copy Jade
Copy HTML
Show code
Hide code
.e-legend__value > small 

<div class="e-legend">
  <div class="e-legend__title">
    Sit dolore aliquip ea 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%&nbsp;
    <small>
      (122)
    </small>
  </div>
</div>


                                  <div class="e-legend">
                                    <div class="e-legend__title">Tempor cillum pariatur cupidatat 
                                    </div>
                                    <div class="e-legend__value text-color-info">14.72%&nbsp;<small>(122)</small></div>
                                  </div>
Labore commodo incididunt do
14.72% (122)

With description
Copy Jade
Copy HTML
Show code
Hide code
.e-legend__description 

<div class="e-legend">
  <div class="e-legend__title">
    Proident lorem amet exercitation 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
  <div class="e-legend__description">
    Amet non ad aute enim 
  </div>
</div>


                                  <div class="e-legend">
                                    <div class="e-legend__title">Incididunt excepteur velit mollit 
                                    </div>
                                    <div class="e-legend__value text-color-info">14.72%</div>
                                    <div class="e-legend__description">Incididunt excepteur ut nostrud labore 
                                    </div>
                                  </div>
Cillum cillum incididunt irure
14.72%
Pariatur deserunt nulla sit dolor