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

Alerts

Summary

The .wui-bs-alert is one of several ways to inform about what is happening in the system. For more information about the other feedback types and when an alert should be used, see feedback.

  • Visibility. If an alert appears outside the user view (after performing an action), you should always show the alert by scrolling to its position automatically.
  • Colors. Alerts can be displayed in all fruit colors, the status colors and a few more. The coloring is one of the most important properties of an alert and can be used even if it is only an alert "in the broadest sense".

Related pages

In Review

This component was thoroughly tested. However, it has not yet been applied in many cases in production. Maybe there will be changes due to case-related issues. If you want to use this component in production please let me know, so that we can talk about possible future changes and be sure that none of the changes will disrupt your work. Feel free to contact me via slack, email (tjaeger@wescale.com) or personally.

Alert colors

wui-bs-alert--success Yar lorem ipsum Lookout flogging bilge rat main sheet nipper fluke to go on account heave down clap of thunder. sails six pounders skysail code of conduct sloop black spot main sheet draft.

wui-bs-alert--highlight Rope's end lorem ipsum wench quarterdeck run a shot across the bow Nelsons folly lad. Deadlights strike colors schooner fluke mizzen careen marooned. Rigging cog hearties Nelsons folly Admiral of the Black brig swing the lead.

wui-bs-alert--plum Lorem ipsum cScuttle barkadeer bowsprit come about cog. Long boat tack parley lass wench. Line matey jury mast loot brig. Piracy squiffy lanyard skysail clipper. Deck ye coffer scurvy reef sails. Chain Shot trysail boatswain main sheet killick.

wui-bs-alert--peach Plunder lorem ipsum barkadeer rope's end Corsair parrel trysail rutters hands draught. Topsail tack haul wind run a rig Pirate Round swing the lead lateen sail broadside Shiver me timbers. Piracy American Main cable lass blow the man down.

You can change the color of the alert using modifiers. Besides the status colors (--success, --warning, --danger) all wescale fruit colors (--peach, --yangmei, ..., --cherry) are available. The status color of alerts is always a bit stronger than the other colors to emphasize their semantic meaning. The font color of those is also slightly stronger to maintain a good contrast ratio.

Since the color of links would not be visible on every background, this color is also controlled by the modifier. To make links recognizable as such, it is important to use the class .alert-link.

wui element combo

wui-bs-alert meets wui-icon-list
  • Lorem Grog hogshead black jack yard. Spanker draft walk the plank Sea Legs. Lateen sail marooned nipper smartly. Booty black jack skysail snow. Piracy barque dead men tell no tales warp.
  • Ipsum Keel yo-ho-ho booty swing the lead pirate clap of thunder American Main Sail ho. Hornswaggle bilge run a shot across the bow ho gally Admiral of the Black hands stern.