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 VUD 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.

Default

Dec 05

Extra work / Overtime

					

<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

Client (KPMG)

19 June, 2019

Claim ID: 1223445

Awaiting approval

Download

140 SEK

					

<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

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

Amanda Lundius has an expense that need approval

December 20

					

<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>