| 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 |
Do you have any design-related questions or suggestions? We'd love to hear from you.
Please contact Wuiman to discuss your ideas.
Content Tiles
Content tile (1-3 additional infos)
- Consistency. Never mix different types of content tiles in one section.
- Circular image. Every tile contains either an icon or a picture.
- Tile indicator. You can either select tiles or delete tiles. There will never be a "check" replaced by a "remove" on hover.
- Remove tiles. The indicator to remove a tile is only visible when hovering the tile. Note: Not every tile is a removable tile.
These content tiles based on the same HTML structure. Depending on the information which should be displayed you can choose between three different types. Appart from the circular image the different content tiles have:
- One additional info. One text in (max.) two lines.
- Two additional infos. Two one-liners.
- Three additional infos. A headline with two one-liners.
One additional info
Default icon
Default picture
Selected tile with indicator
Delete indicator
<div class="wui-content-tile wui-content-tile--single-info">
<div class="wui-content-tile__image wui-content-tile__image--picture">
<img src="/next/assets/images/avatar.png">
<div class="wui-content-tile__indicator wui-content-tile__indicator--big wui-content-tile__indicator--delete">
<i class="fas fa-times"></i>
</div>
</div>
<div class="wui-content-tile__primary">
<p>Two lines of text</p>
</div>
</div>
Two additional infos
Default icon
Default picture
Selected tile with indicator
Delete indicator
<div class="wui-content-tile wui-content-tile--double-info">
<div class="wui-content-tile__image wui-content-tile__image--picture">
<img src="/next/assets/images/avatar.png">
<div class="wui-content-tile__indicator wui-content-tile__indicator--big wui-content-tile__indicator--delete">
<i class="fas fa-times"></i>
</div>
</div>
<div class="wui-content-tile__primary">
<p>Delete indicator</p>
</div>
<div class="wui-content-tile__secondary">
<p>Note the focus</p>
</div>
</div>
Three additional infos
Default icon
Default picture
Selected tile with indicator
Delete indicator
<div class="wui-content-tile wui-content-tile--tripple-info">
<div class="wui-content-tile__headline">
<h4>Headline</h4>
</div>
<div class="wui-content-tile__image wui-content-tile__image--picture">
<img src="/next/assets/images/avatar.png">
<div class="wui-content-tile__indicator wui-content-tile__indicator--big wui-content-tile__indicator--delete">
<i class="fas fa-times"></i>
</div>
</div>
<div class="wui-content-tile__primary">
<p>Telete indicator</p>
</div>
<div class="wui-content-tile__secondary">
<p>Note the focus</p>
</div>
</div>
Content tile (infinite infos)
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using these content tiles. So we try to avoid them whenever possible. If there are heaps of information which can't be deprived use the content tile (infinite infos). But always keep in mind: Sometimes less is more.
- Consistency. Never mix different types of content tiles in one section.
- Remove tiles. To remove a content tile use the icon button within the footer.
- Circular image. Every tile contains either an icon or a picture.
- Structure. Tiles contain a header, body, and footer. The footer is quite flexible and may imply a link, buttons or both.
Headline is truncated after two lines
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
Headline is truncated after two lines
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
Headline is truncated after two lines
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
Headline is truncated after two lines
The point of tiles is to give a good overview to users and provide them with key information. The overview can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
<div class="wui-content-tile wui-content-tile--unlimited-info wui-content-tile--selected">
<div class="wui-content-tile__header">
<div class="wui-content-tile__header-icon">
<div class="wui-content-tile__header-image-sm wui-content-tile__image wui-content-tile__image--icon">
<div class="wui-content-tile__indicator wui-content-tile__indicator--small wui-content-tile__indicator--check">
<i class="fas fa-check"></i>
</div>
<i class="fab fa-font-awesome-flag"></i>
</div>
</div>
<div class="wui-content-tile__header-text">
<div class="wui-content-tile__two-lined-text">
h6>Headline is truncated after two lines</h6>
</div>
</div>
</div>
<div class="wui-content-tile__body">
<p>The point of tiles is to give a good overview to users and provide them with key information. The overview
can get quite complex when using the content tiles (infinite infos). So we try to avoid these type of tiles whenever possible.
</p>
</div>
<div class="wui-content-tile__footer clearfix">
<button class="wui-btn wui-btn--default wui-btn--sm pull-right">Secondary button</button>
</div>
</div>