5
New Styleguide page for "Loading"
Introduce CDN links to all images
Add Section with index-tiles to branding page
New Styleguide page for "Branding"
FC
Extend ".wui-bs-alert" with all fruit-color-variantes
Font-Awesome has been updated to version 5.12.0
Ut
"Utils" has been extended with opacity, heights and colors
1

Do you have any design-related questions or suggestions? We'd love to hear from you.

Please contact Wuiman to discuss your ideas.

John Doe

Labels

  • Alignment. Labels are always vertically centered with adjacent texts, buttons, etc.
  • Border-radius. Labels have a slight border-radius of 0.25em which is the default. For some cases - e.g. labels have no margin - you have a modifier ( .wui-label--angular) to reset the border-radius.
  • Color. Default labels are highlighted in green ( #078390). But for specific status or if labels help users to differentiate between various objects they contain modifiers to change their color.
  • Size. A label with default-size will fit into table-rows or input fields without influencing their heights. You can choose between 4 different sizes with the help of modifiers.

We use labels in different contexts and for different purposes, but they should still be consistent across the platform. The basic label comes with 3 different variations for:

  • Text and icons
  • Numbers
  • Price labels
  • wui-tags. Optically tags are very similar to labels. However, they differ slightly in function and HTML structure.

Stable

Feel free to use this component. It has been tested and is already live in production. Anyways – if you find a problem with this component let me know. You can contact me via slack, email (tjaeger@wescale.com) or personally.

Default wui label

Labels help users to quickly register the status of a particular item. For example the three different states - success, warning and danger - are shown in their usual colors - green, yellow and red. For further status colors have a look at the table below or at the wescale colors.

Example of default labels

Label default
Label secondary with longer name.wui-label--secondary
Label success.wui-label--success
Label warning.wui-label--warning
Label danger.wui-label--danger
Default label with icon

Labels among each other have the same width according to the widest. The size of labels in tables is limited to a width of 180px and than truncated with ellipsis - so better be concise when it comes to wording (see: Table).

Labels can also contain icons. Note when choosing a color - an unchecked option is not always dangerous or needs a warning. The impact on the users workflow by the activation of an option is made from case to case.

In addition to the modifiers for the color, there are a few more for the size. In tables we do not need these modifiers because we always use the default size there. But outside of tables, you can use the following size-modifiers for all different variations of labels:
.wui-label-size--sm .wui-label-size--lg and .wui-label-size--xlg

wui-label--sm default size wui-label--lg wui-label--xlg

Number Labels

Labels with numbers are very similar to the default labels. The main difference is about the font-weight. Numbers are always bold. Furthermore it is not very common to have a big range of colors, because numbers usually don't show states. For the most cases you will have the label-green ( #078390). Except for labels that contain the number "0". These ones are grey ( #888).

Example of number labels

27.wui-label--number
0.wui-label--number .wui-label--muted

Number labels are centered and have a min-width so that numbers of two digits have the same width than single-digit-labels.

Price labels

Price labels are a very special type of label for our domain. These labels are used exclusively for price information. Differences to the other tags are the missing border-radius which is set by .wui-label--angular. Modifiers for resizing can also be used together with the .wui-label--price. Because the price-labels are often used in other contexts, the sizes differ slightly from those of the other labels.

EUR 312.95 EUR 312.95 EUR 312.95
<span class="wui-label wui-label--price wui-label--angular" title="EUR 312.95">
  EUR 312.95
</span>
Copy

Tags

Optically tags are very similar to labels. But in contrast to labels, tags are not set by the system to inform about a specific status. Tags could be set, written or changed directly by the users.

Keyboard control for a tag input

  • Return. Confirms tag.
  • Tab. Confirms tag and focuses the next element.
  • Space (if not provided by respective tag). Confirms tag.
  • Back-space. Deletes tag.

Example of input tags

If there are a lot of tags, the input field itself will increase, so that all labels fit inside a second or third row

Tags can be used in different scenarios. Sometimes they are restricted to a max number of characters or a specific character set like the tags for tenant codes.

<span class="wui-tag" title="Title of tag">
    removable tag
  <span class="wui-tag__remove">
    <i class="fa fa-times"></i>
  </span>
</span>
Copy