Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

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
Open in playground
Show code
Hide code
.e-legend

<div class="e-legend">
  <div class="e-legend__title">
    Ut dolor officia velit 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>
<div class="e-legend">
  <div class="e-legend__title">
    Incididunt labore enim veniam 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>
JavaScript
Copy JavaScript
Fugiat non adipiscing ut
14.72%

Component Variation

Multiple
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-legend

<div class="e-legend">
  <div class="e-legend__title">
    Mollit laborum tempor ut 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>
<div class="e-legend">
  <div class="e-legend__title">
    Sint deserunt ad velit 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>
<div class="e-legend">
  <div class="e-legend__title">
    Magna pariatur amet aute 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>
<div class="e-legend">
  <div class="e-legend__title">
    Dolor anim non minim 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
</div>
JavaScript
Copy JavaScript
Aliquip ipsum et veniam
14.72%
Amet veniam eiusmod officia
14.72%

With total value
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-legend__value > span.e-legend__secondaryvalue

<div class="e-legend">
  <div class="e-legend__title">
    Nostrud est aliquip consectetur 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
    <span class="e-legend__secondaryvalue">
      (122)
    </span>
  </div>
</div>
<div class="e-legend">
  <div class="e-legend__title">
    Sit mollit ipsum est 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
    <span class="e-legend__secondaryvalue">
      (122)
    </span>
  </div>
</div>
JavaScript
Copy JavaScript
Dolore anim exercitation dolore
14.72%(122)

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

<div class="e-legend">
  <div class="e-legend__title">
    Ad dolore adipiscing aliqua 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
  <div class="e-legend__description">
    Eiusmod ut aliqua qui irure 
  </div>
</div>
<div class="e-legend">
  <div class="e-legend__title">
    Proident laborum et in 
  </div>
  <div class="e-legend__value text-color-info">
    14.72%
  </div>
  <div class="e-legend__description">
    Mollit ut sunt ut duis 
  </div>
</div>
JavaScript
Copy JavaScript
Id incididunt commodo tempor
14.72%
Labore labore laborum enim consequat

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.
    • Be used to give standalone information about the exact value of a variable.
  • Be used as to guide users through more complex visualizations, 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.

Content guidelines

Types:

  1. Total numeric value: the outcome is a natural number
  2. 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.
  3. Textual value: the outcome is a string.
  4. Hybrid value: the mixture of the options mentioned above.