Summary
- 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
<div class="wui-grid wui-grid--sm">
<div class="wui-grid__item col-xs-6">
<a class="unstyled" href="#">
<div class="wui-content-tile wui-content-tile--single-info">
<div class="wui-content-tile__image wui-content-tile__image--icon"><i class="fab fa-font-awesome-flag"></i></div>
<div class="wui-content-tile__primary"><p>This content tile contains just one additional info.</p></div>
</div>
</a>
</div>
<div class="wui-grid__item col-xs-6">
<a class="unstyled" href="#">
<div class="wui-content-tile wui-content-tile--single-info">
<div class="wui-content-tile__image wui-content-tile__image--picture"><img src="/release/assets/images/avatar.png" /></div>
<div class="wui-content-tile__primary"><p>The additional infos are truncated after two lines.</p></div>
</div>
</a>
</div>
<div class="wui-grid__item col-xs-6">
<a class="unstyled" href="#">
<div class="wui-content-tile wui-content-tile--single-info wui-content-tile--selected">
<div class="wui-content-tile__image wui-content-tile__image--icon">
<div class="wui-content-tile__indicator wui-content-tile__indicator--big wui-content-tile__indicator--check"><i class="fas fa-check"></i></div>
<i class="fab fa-font-awesome-flag"></i>
</div>
<div class="wui-content-tile__primary"><p>Only selected tiles can have a "check-indicator".</p></div>
</div>
</a>
</div>
<div class="wui-grid__item col-xs-6">
<div class="wui-content-tile wui-content-tile--single-info">
<div class="wui-content-tile__image wui-content-tile__image--picture">
<img src="/release/assets/images/avatar.png" />
<a class="unstyled" href="#">
<div class="wui-content-tile__indicator wui-content-tile__indicator--big wui-content-tile__indicator--delete"><i class="fas fa-times"></i></div>
</a>
</div>
<div class="wui-content-tile__primary"><p>On hover there is a "delete-indicator".</p></div>
</div>
</div>
</div>
Two additional infos
<div class="wui-grid wui-grid--sm">
<div class="wui-grid__item col-xs-6">
<a class="unstyled" href="#">
<div class="wui-content-tile wui-content-tile--double-info">
<div class="wui-content-tile__image wui-content-tile__image--icon"><i class="fab fa-font-awesome-flag"></i></div>
<div class="wui-content-tile__primary"><p>First line of content</p></div>
<div class="wui-content-tile__secondary"><p>Second line of content</p></div>
</div>
</a>
</div>
<div class="wui-grid__item col-xs-6">
<a class="unstyled" href="#">
<div class="wui-content-tile wui-content-tile--double-info">
<div class="wui-content-tile__image wui-content-tile__image--picture"><img src="/release/assets/images/avatar.png" /></div>
<div class="wui-content-tile__primary"><p>Each line on itself is trancated if the text is to long</p></div>
<div class="wui-content-tile__secondary"><p>Each line on itself is trancated if the text is to long</p></div>
</div>
</a>
</div>
<div class="wui-grid__item col-xs-6">
<a class="unstyled" href="#">
<div class="wui-content-tile wui-content-tile--double-info wui-content-tile--selected">
<div class="wui-content-tile__image wui-content-tile__image--picture">
<img src="/release/assets/images/avatar.png" />
<div class="wui-content-tile__indicator wui-content-tile__indicator--big wui-content-tile__indicator--check"><i class="fas fa-check"></i></div>
</div>
<div class="wui-content-tile__primary"><p>Add following class for selected tiles</p></div>
<div class="wui-content-tile__secondary"><p>.wui-content-tile--selected</p></div>
</div>
</a>
</div>
<div class="wui-grid__item col-xs-6">
<div class="wui-content-tile wui-content-tile--double-info">
<div class="wui-content-tile__image wui-content-tile__image--icon">
<a class="unstyled" href="#">
<div class="wui-content-tile__indicator wui-content-tile__indicator--big wui-content-tile__indicator--delete"><i class="fas fa-times"></i></div>
</a>
<i class="fab fa-font-awesome-flag"></i>
</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>
</div>
</div>
Three additional infos
<div class="wui-grid wui-grid--sm">
<div class="wui-grid__item col-xs-6">
<a class="unstyled" href="#">
<div class="wui-content-tile wui-content-tile--tripple-info">
<div class="wui-content-tile__headline"><h4>Headline truncated by ellipsis if longer than one line</h4></div>
<div class="wui-content-tile__image wui-content-tile__image--icon"><i class="fab fa-font-awesome-flag"></i></div>
<div class="wui-content-tile__primary"><p>First line of content</p></div>
<div class="wui-content-tile__secondary"><p>Second line of content</p></div>
</div>
</a>
</div>
<div class="wui-grid__item col-xs-6">
<a class="unstyled" href="#">
<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="/release/assets/images/avatar.png" /></div>
<div class="wui-content-tile__primary"><p>Each line on itself is trancated if the text is to long</p></div>
<div class="wui-content-tile__secondary"><p>Each line on itself is trancated if the text is to long</p></div>
</div>
</a>
</div>
<div class="wui-grid__item col-xs-6">
<a class="unstyled" href="#">
<div class="wui-content-tile wui-content-tile--tripple-info wui-content-tile--selected">
<div class="wui-content-tile__headline"><h4>Headline</h4></div>
<div class="wui-content-tile__image wui-content-tile__image--icon">
<div class="wui-content-tile__indicator wui-content-tile__indicator--big wui-content-tile__indicator--check"><i class="fas fa-check"></i></div>
<i class="fab fa-font-awesome-flag"></i>
</div>
<div class="wui-content-tile__primary"><p>Add following class for selected tiles</p></div>
<div class="wui-content-tile__secondary"><p>.wui-content-tile--selected</p></div>
</div>
</a>
</div>
<div class="wui-grid__item col-xs-6">
<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="/release/assets/images/avatar.png" />
<a class="unstyled" href="#">
<div class="wui-content-tile__indicator wui-content-tile__indicator--big wui-content-tile__indicator--delete"><i class="fas fa-times"></i></div>
</a>
</div>
<div class="wui-content-tile__primary"><p>Delete indicator</p></div>
<div class="wui-content-tile__secondary"><p>On hover</p></div>
</div>
</div>
</div>
Content tile (infinite infos)
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.
- 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-grid wui-grid--sm">
<div class="wui-grid__item col-xs-6">
<div class="wui-content-tile wui-content-tile--unlimited-info">
<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"><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>
</div>
<div class="wui-grid__item col-xs-6">
<div class="wui-content-tile wui-content-tile--unlimited-info">
<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--picture"><img src="/release/assets/images/avatar.png" /></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>
</div>
<div class="wui-grid__item col-xs-6">
<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>
</div>
<div class="wui-grid__item col-xs-6">
<div class="wui-content-tile wui-content-tile--unlimited-info">
<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--picture"><img src="/release/assets/images/avatar.png" /></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 title="Don't forget the title attribute" class="wui-btn wui-btn--default wui-btn--sm wui-btn--outline pull-right"><i class="fas fa-trash"></i></button>
</div>
</div>
</div>
</div>
There is no wui-mono component documentation available yet. But you are always welcome to contact the wui-team
via Slack: #wescale-wui-public
via Mail: wescale-wui@wescale.com
