Cards

Cards help to structure the interface and give clear guidance to the user on what is relevant and to take action on it. They highlight the section that the users’ eye should be directed to.

Card with a white background is a default one and it is used everywhere in Tool.


General CSS for cards

.card {
  border-radius: 3px;
  box-shadow: 0 2px 5px 0 rgba(77, 85, 104, .10), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 1px 2px 0 rgba(0, 0, 0, .08);
}

.foundation_white {
  background: #fff;
}

.foundation_grey {
  background: #fafcfd;
  box-shadow: inset 0 -1px 0 0 #dee4ea, inset 0 1px 0 0 #dee4ea, 0 2px 5px 0 rgba(77, 85, 104, .10), 0 1px 1px 0 rgba(0, 0, 0, .07), 0 1px 2px 0 rgba(0, 0, 0, .08);
}

Card headlines

We use short and clear header texts. Remember to stay crisp and clear and don’t put full sentences in the headlines.

Card headline

 

 

 

 


Additional CSS for card headlines

.card_header {
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid rgba(230, 235, 240, .6);
}
 
.card_header h2 {
  display: flex;
  align-items: center;
  height: 56px;
}
 
.card_header h2 *:first-child {
  display: inline-flex;
  margin: 0 auto 0 0;
}

Additional card types

Card with a table

Table nameAdd a column

 

 

 

Results 1 – 9

Card with a headline and description

Card headline
Example of card description

 

 

 

 


Grey card with input elements

Card headline

Example label

 

Delete


Additional CSS for table cards and large headers

.table-navigation {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid rgba(230, 235, 240, .6);
  user-select: none;
}
 
.table-navigation *:first-child {
  margin: 0 auto 0 0;
}
 
.table-navigation-results {
  margin-right:16px;
  white-space:nowrap;
}
 
.card_header_large {
  line-height: 1.2;
  height: 72px;
  padding-top: 16px;
}

Overview card example

The headline of the Overview card has no line, so the attention of the user is directed to the score.

Overview card example

Anatomy of a card

Top left: Headline of a card
Top right: Card actions
Bottom: Pagination or action