Summary
- Section. Each card contains several sections. You don’t have to use all of them but at least one of them ;) The order of sections may not be changed.
- Containing elements. For reasons of consistency, only certain components may appear in certain sections. See the examples to get a better impression of where to put which element.
- Cards Tiles. wui-cards are not wui-content-tiles even if they may look very similar. Unlike tiles, cards contain content that serves as an entry point to more detailed information.
- Action. The header area of a card is always clickable. Since the card itself is basically a summary of several items, the primary action enables users to move further and further into the details of an app.
- Grid. Cards are wrapped in a
.wui-grid__itemwhich in turn is part of a.wui-grid. Facets and cards are always aligned at the top. In these cases, the.wui-gridalso has the class.p-0.
Header
The header contains either an image an wui-appicon or a wui-table-grid. Within an image or appicon header, there are additional objects that can be positioned at their intended positions. There is a predefined overlay for the top .wui-imageoverlay--top and one for the bottom .wui-imageoverlay--bottom. In addition to that, there are 4 areas (the respective corners) in which UI atoms can be placed (the positioning itself can be done via the position-utils).
Image
<div class="wui-card2">
<div class="wui-card2__header wui-card2__header--image">
<div class="wui-image wui-image--padded">
<img src="/assets/images/card/camera-test-image.jpg" />
<div class="wui-image__overlay wui-image__overlay--top">some text here</div>
<div class="wui-image__overlay wui-image__overlay--bottom">some text here</div>
</div>
</div>
</div>
Appicon
<div class="wui-card2">
<div class="wui-card2__header wui-card2__header--appicon">
<div class="wui-appicon2 wui-appicon2--content-fit wui-appicon2--lg">
<div class="wui-appicon2__indicator"><i class="fas fas fa-check"></i></div>
<i class="fab fa-font-awesome-flag"></i>
</div>
<div class="position--absolute position--top position--left p-5">top left</div>
<div class="position--absolute position--top position--right p-5">top right</div>
<div class="position--absolute position--bottom position--right p-5">bottom right</div>
<div class="position--absolute position--bottom position--left p-5">bottom left</div>
</div>
</div>
.wui-table-grid
| Key Value | Key Value |
<div class="wui-card2">
<div class="wui-card2__header wui-card2__header--table-grid">
<table class="wui-table-grid wui-table-grid--inner-border">
<tbody>
<tr>
<td>
<span class="text--overflow-ellipsis display--block font-size--4xl wui-color--highlight">Key</span>
<span class="">Value</span>
</td>
<td>
<span class="text--overflow-ellipsis display--block font-size--4xl wui-color--highlight">Key</span>
<span class="text--overflow-ellipsis display--block">Value</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Within the different tables the header-overlays should be avoided as far as possible, otherwise it could quickly become too much. Depending on how much information you want to display in the header, choose one of the following 5 options.
<div class="wui-grid wui-grid--sm p-0">
<div class="wui-grid__item col-sm-3">
<table class="wui-table-grid wui-table-grid--inner-border wui-table-grid--padded">
<tbody>
<tr>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="wui-grid__item col-sm-3">
<table class="wui-table-grid wui-table-grid--inner-border wui-table-grid--padded">
<tbody>
<tr>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="wui-grid__item col-sm-3">
<table class="wui-table-grid wui-table-grid--inner-border wui-table-grid--padded">
<tbody>
<tr>
<td colspan="2">
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
</tr>
<tr>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="wui-grid__item col-sm-3">
<table class="wui-table-grid wui-table-grid--inner-border wui-table-grid--padded">
<tbody>
<tr>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="wui-grid__item col-sm-3">
<table class="wui-table-grid wui-table-grid--inner-border wui-table-grid--padded">
<tbody>
<tr>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
</tr>
<tr>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
<td>
<div class="wui-bg-color--gray-95 border-1"> </div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Body
The body contains headline, subheading, and text as needed. In addition, keyword tags or the like can also be displayed below the text.
It is extremely important that all cards are of the same height so that the wui grid layout does not break. Therefore, different modifiers can be used. Use
.text-line-limit--3/4/5/6to truncate the description and.wui-card2__body--fadeoutto fade out the last line.
Headline of wui-card2
Subtitle of wui card2
- First
- line of text which is truncated if it is to long
- Second
- line of text
- Thir
- line of text
<div class="wui-card2">
<div class="wui-card2__body">
<h2 class="wui-card2__title">
Headline of wui-card2
</h2>
<h3 class="wui-card2__subtitle">Subtitle of wui card2</h3>
<div class="wui-card2__text">
<dl class="wui-definition-list wui-definition-list--h wui-definition-list--truncated">
<dt title="Attribute">First</dt>
<dd title="Value">line of text which is truncated if it is to long</dd>
<dt title="Attribute">Second</dt>
<dd title="Value">line of text</dd>
<dt title="Attribute">Thir</dt>
<dd title="Value">line of text</dd>
</dl>
</div>
</div>
</div>
Title of wui-card2
Subtitle of wui card2
This text is truncated after 6 lines. This is done using the modifier "text-line-limit--6". In addition, another modifier is used which is responsible for hiding the last line. The modifier "wui-card2__body--fadeout" will fade out to the background-color #f1f1f1. Even if the text is shorter than 6 lines, the min-height of this element is set, so that the card itself still is the same height than the others.
<div class="wui-card2">
<div class="wui-card2__body">
<h2 class="wui-card2__title">
Title of wui-card2
</h2>
<h3 class="wui-card2__subtitle">Subtitle of wui card2</h3>
<p class="wui-card2__text text-line-limit--6 wui-card2__body--fadeout">
This text is truncated after 6 lines. This is done using the modifier "text-line-limit--6". In
addition, another modifier
is used which is responsible for hiding the last line. The modifier "wui-card2__body--fadeout"
will
fade out to the background-color #f1f1f1. Even if the text is shorter than 6 lines, the
min-height
of this element is set, so that the card itself still is the same height than the others.</p>
</div>
</div>
Footer
The footer is quite flexible and can contain different elements. However, if there is an action button for the card, it should always be positioned in this section. For the general use of Buttons and their order look here. The footer should be single-lined.
<div class="wui-card2">
<div class="wui-card2__footer">
<button class="wui-btn wui-btn--primary pull-right">Primary</button>
</div>
</div>
Amendment
If there is more information to be placed on the card, it can be placed in the Amendments-section. This section should also be single-lined and, if possible, should not allow line breaks.
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
