Cards list

Lists are a collection of small amount of information that the user should see in a single page. Lists are a good alternative to the grids, as the most important information is clearly emphasize using different visual approaches. Read more about cards list in the UX Guidelines.

Use when

To display small amounts of data in a structured way and the need for filtering and sorting is low
To give the user an overview of a set of alternatives

Design

In Nordic Cool 4 we have available 3 types of cards list.

For the perfect arrangement (depending on how many columns you will have) you will need to play with the columns from the grid system and in some cases with the flex layout. Check the examples below and also the code snipets from the right panel.

Default state `.card-list-default`

Dec 05

Extra work / Overtime

Primary state `.card-list-primary`

Client (KPMG)

19 June, 2019

Claim ID: 1223445

Awaiting approval

Download

140 SEK

Secondary state `.card-list-secondary`

This type of card list can be used only on a light background.

Amanda Lundius has an expense that need approval

December 20

				
<!-- Default state - .card-list.card-list-default -->
<div class="card-list card-list-default">
  <div class="card-list-item row justify-content-between justify-content-xs-start">
    <div class="date col-3 col-xs-auto">
       Dec <span>05</span>
    </div>
    <div class="description col-9 col-xs-auto">
       <span class="vismaicon vismaicon-time"></span>
       Extra work / Overtime
    </div>
    <div class="action col-sm-auto col-12 justify-content-center justify-content-sm-end">
       <button class="btn">Click me</button>
    </div>
  </div>
</div>	

<!-- Primary state - .card-list.card-list-primary -->
<div class="card-list card-list-primary">
  <div class="card-list-item row">
    <div class="title col-md-3">
       <span class="vismaicon vismaicon-time"></span>
       <div>
          <h4>Client (KPMG)</h4>
          <div class="date">19 June, 2019</div>
       </div>
    </div>
    <div class="description col-md-3">
       <p>Claim ID: 1223445</p>
       <p>Awaiting approval</p>
    </div>
    <div class="icon flex-column col-md-1 col-6">
       <span class="vismaicon vismaicon-briefcase"></span>
       <span>12</span>
    </div>
    <div class="print icon divider col-md-2 col-6">
       <a href="#">
          <span class="vismaicon vismaicon-pdf"></span>
          <span>Download</span>
       </a>
    </div>
    <div class="price col-md-2">
       <b>14</b> SEK
    </div>
  </div>
</div>

<!-- Secondary state - .card-list.card-list-secondary -->
<div class="card-list card-list-secondary">
  <div class="card-list-item row">
    <div class="description">
       Amanda Lundius has an expense that need approval
       <div class="date">December 20</div>
    </div>
    <div class="action">
       <a href="#">
          <span class="vismaicon vismaicon-time"></span>
       </a>
       <a href="#">
          <span class="vismaicon vismaicon-money"></span>
       </a>
    </div>
  </div>
</div>