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

Legend

Legends give context to various numerical or textual value. They help users to get a high-level overview of the success of specific intentions.

Default

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

<div class="e-legend">
  <div class="e-legend__title">
    In fugiat sunt ullamco 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>

<div class="e-legend"><div class="e-legend__title">Ipsum minim voluptate mollit </div><div class="e-legend__value text-color-info">14.72%</div></div>
Laboris officia sint duis
14.72%

Component Variation

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

<div class="e-legend">
  <div class="e-legend__title">
    Veniam sed lorem adipiscing 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>
<div class="e-legend">
  <div class="e-legend__title">
    Et est sunt dolor 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>

<div class="e-legend"><div class="e-legend__title">Aliquip eiusmod non nulla </div><div class="e-legend__value text-color-info">14.72%</div></div><div class="e-legend"><div class="e-legend__title">Exercitation nostrud deserunt veniam </div><div class="e-legend__value text-color-info">14.72%</div></div>
Do labore elit cupidatat
14.72%
Ea dolore aute laboris
14.72%

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

<div class="e-legend">
  <div class="e-legend__title">
    Sint commodo sint sint 
  </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">Mollit laboris exercitation eu </div><div class="e-legend__value text-color-info">14.72%&nbsp;<small>(122)</small></div></div>
Sit esse nulla do
14.72% (122)

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

<div class="e-legend">
  <div class="e-legend__title">
    Minim do irure eu 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
  <div class="e-legend__description">
    Velit adipiscing ut dolor tempor 
  </div>
</div>

<div class="e-legend"><div class="e-legend__title">Aute ex officia esse </div><div class="e-legend__value text-color-info">14.72%</div><div class="e-legend__description">Occaecat consectetur proident sunt ullamco </div></div>
Laborum ea consequat elit
14.72%
Dolor commodo dolor proident aliquip

Legend

Legends give context to various numerical or textual value. They help users to get a high-level overview of the success of specific intentions.

Structure

  1. Name of the notion
  2. Value of the notion
  3. Supplementary explanation
  4. Supplementary explanation value

Best practices

Legends should:

  • Be used
    • To outsource information from the plot area of the chart to explain all the displayed visual elements.
    • To give standalone information about the exact value of a variable.
  • Be used as to guide users through more complex visualizationus, so they don’t have to only rely on their visual perception.
  • Use appropriate color to the context (of the page) and it's meaning.

Try to avoid:

Content guidelines

Types:

  • Total numeric value: the outcome is a natural number
  • Percentage value: the outcome is a rate number. In some cases it is essential to provide the original number from which the percentage is calculated.
  • Textual value: the outcome is a string.
  • Hybrid value: the mixture of the options mentioned above.