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

App Icons

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.

  • Appicons. This special type of image is round and in one of 5 predefined sizes.
  • Image or Icon. Appicons can contain both images or icons.
  • Indicator. No matter if the appicon contains an image or an icon - each one can additionally contain an indicator. If the indicator is not an icon use the modifier .wui-appicon2__indicator--text.

Appicon variations

Default

Default + indicator

Image

Image + indicator

                        
                          
<div class="wui-appicon2 wui-appicon2--xlg">
                            <i class="fab fa-font-awesome-flag"></i>
                          </div>

                        
                      
                        
                          
<div class="wui-appicon2 wui-appicon2--xlg">
                            <i class="fab fa-font-awesome-flag"></i>
                            <div class="wui-appicon2__indicator">
                              <i class="fas fa-check"></i>
                            </div>
                          </div>

                        
                      
                        
                          
<div class="wui-appicon2 wui-appicon2--xlg">
                            <div class="wui-image wui-image--content-fit">
                              <img src="/next/assets/images/avatar.png">
                            </div>
                          </div>

                        
                      
                        
                          
<div class="wui-appicon2 wui-appicon2--xlg">
                            <div class="wui-image wui-image--content-fit">
                              <img src="/next/assets/images/avatar.png">
                            </div>
                            <div class="wui-appicon2__indicator">
                              <i class="fas fa-check"></i>
                            </div>
                          </div>

The default background of the wui-appicon is a light gray. You can also use other colors here considering the color-guidlines. Remember to use .text--white on darker backgrounds, so that you always have a proper contrast.
If the image is not square or it is a png with transparent background, the best thing to use is .wui-bg-color--white for the appicon.

Appicons with text

Text right
Text left

The margin may vary. For appicons which are .wui-appicon2--lg it is .wui-inline-list--md.
For larger appicons it is .wui-inline-list--lg,
for smaller appicons it is .wui-inline-list--sm.

                        
                          
<div class="wui-inline-list wui-inline-list--md">
                            <div class="wui-inline-list__item">
                              <div class="wui-appicon2 wui-appicon2--lg">
                                <i class="fab fa-font-awesome-flag"></i>
                              </div>
                            </div>
                            <div class="wui-inline-list__item">
                              <h6>Text right</h6>
                            </div>
                          </div>

                        
                      
                        
                          
<div class="wui-inline-list wui-inline-list--md">
                            <div class="wui-inline-list__item">
                              <h6>Text left</h6>
                            </div>
                            <div class="wui-inline-list__item">
                              <div class="wui-appicon2 wui-appicon2--lg">
                                <i class="fab fa-font-awesome-flag"></i>
                              </div>
                            </div>
                          </div>
Text top
Text bottom

If the text is above or below the appicon, you cannot use .wui-inline-list and because of this you'll have a slightly different structure for this component. The alignment of the text doesn't need individual classes it can be done exclusively with utils.
For most cases it is best to center text and appicon to avoid an optical imbalance.

                        
                          
<h6 class="p-b-10">Text top</h6>
                          <div class="wui-appicon2 wui-appicon2--lg">
                            <i class="fab fa-font-awesome-flag"></i>
                          </div>

                        
                      
                        
                          
<div class="wui-appicon2 wui-appicon2--lg">
                            <i class="fab fa-font-awesome-flag"></i>
                          </div>
                          <h6 class="p-t-10">Text bottom</h6>

Sizes

The following modifiers work with all different appicon variations. They influence the size of the appicon, the icons themselves and the appicon-indicators. There are indicators for all appicon sizes, although indicators for small or extra small Appicons should be avoided due to their size.

Use .wui-appicon2__indicator--text for text and numbers within the indicator.

123
Size: 20px * 20px
.wui-appicon2--xsm
123
Size: 32px * 32px
.wui-appicon2--sm
123
Size: 40px * 40px
.wui-appicon2--md
123
Size: 60px * 60px
.wui-appicon2--lg
123
Size: 84px * 84px
.wui-appicon2--xlg