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

Summary:

basic-card

The basic card list is a flexible content container, with a predefined inner space and where You can put any kind of content inside.

Content ...
Content ... 
					


<div class="card-list">
  <div class="card-list-item">
     Content ...
  </div>
  <div class="card-list-item">
     Content ...
  </div>
  ...
</div>

Can be integreated as a unorder list

  • Content ...
  • Content ...
  • Content ... 
					


<ul class="card-list">
  <li class="card-list-item">
     Content ...
  </li>
  <li class="card-list-item">
     Content ...
  </li>
  ...
</ul>

Also with buttons or anchor

Content ... Content ... 
					


<div class="card-list card-list-hover">
  <button class="card-list-item" type="button">
     Content ...
  </button>
  <button class="card-list-item" type="button">
     Content ...
  </button>
  <a class="card-list-item" role="button" tabindex="0">
     Content ...
  </a>
  <a class="card-list-item" role="button" tabindex="0">
     Content ...
  </a>
  ...
</div>

Design variants

In VUD we have available 3 types/variant of cards list.

"Default" variant: .card-list-default

Add the .card-list-default class to the card list main wrapper (.card-list). The variant adds a green border on the left and a shadow to the card list item wrapper, and a half vertical inner space / padding.

  • Content ...
  • Content ...
  • Content ... 
					


<ul class="card-list card-list-default">
  <li class="card-list-item">
     Content ...
  </li>
  <li class="card-list-item">
     Content ...
  </li>
  ...
</ul>

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 example below.

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" variant: .card-list-primary

Add the .card-list-primary class to the card list main wrapper (.card-list). The variant adds a shadow to the card list item wrapper.

Content ...
Content ... 
					


<div class="card-list card-list-primary">
  <div class="card-list-item">
     Content ...
  </div>
  <div class="card-list-item">
     Content ...
  </div>
  ...
</div>

Example for primary variant with grid helper classes and predefined sections/classes (.title, .description, .icon, .price)

Client (KPMG)

19 June, 2019

Claim ID: 1223445

Awaiting approval

12
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="icon print 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" variant: .card-list-secondary

Add the .card-list-secondary class to the card list main wrapper (.card-list). The variant adds a light neutral background. This type of card list can be used only on a light background.

Content ...
Content ... 
					


<div class="card-list card-list-secondary">
  <div class="card-list-item">
     Content ...
  </div>
  <div class="card-list-item">
     Content ...
  </div>
  ...
</div>

Example for secondary variant

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>

Grid list layout

To transform a card-list from a vertical list to a grid list layout add the .card-list-grid class to the card list main wrapper (.card-list) and the apropiate grid columns helper class (eg.: .grid-cols-3) for the correct number of desiar columns.

Content ...
Content ...
Content ...
Content ...
Content ...
Content ...
Content ...
Content ... 
					


<div class="card-list card-list-grid grid-cols-lg-4 grid-cols-md-3 grid-cols-2">
  <div class="card-list-item">
     Content ...
  </div>
  <div class="card-list-item">
     Content ...
  </div>
  ...
</div>

Hover on card list

For this style you need to add the .card-list-hover class to the card list main wrapper.

Content ...
Content ...
Content ... 
					


<div class="card-list card-list-hover">
  <div class="card-list-item">
     Content ...
  </div>
  <div class="card-list-item">
     Content ...
  </div>
  ...
</div>

Card list example

Example of a card list item / Product

Air balloon
Item x - 12 Pieces
Article number 101
Model type

Article number 101 Office use

Delivery time 1-7 Working days

390,00 SEK

Unit price 400,00 SEK

Apple waste
Item x - 12 Pieces
Article number 102
Model type

Article number 102 Office use

Delivery time 5-9 Working days

670,00 SEK

Unit price 800,00 SEK

Bicycle
Item x - 12 Pieces
Article number 103
Model type

Article number 103 Office use

Delivery time 1-3 Working days

170,00 SEK

Unit price 185,00 SEK 

					


<div class="card-list card-list-primary">
  <div class="card-list-item row gap-x-0">
    <div class="col-md-4 col-sm-6">
      <div class="title">
        <img src="https://ux.visma.com/wp-content/uploads/photo-gallery/VUD-Pictograms/thumb/Air_Baloon.svg" alt="Air balloon" class="mr-16" />
        <div>
          <h5><a href="#!">Item x - 12 Pieces</a></h5>
          <h6 class="text-secondary">Article number 101</h6>
          <div class="d-flex justify-content-start gap-12">
            <span class="vismaicon vismaicon-sm vismaicon-web mr-0"></span>
            <span class="vismaicon vismaicon-sm vismaicon-info mr-0"></span>
            <span class="vismaicon vismaicon-sm vismaicon-environment mr-0"></span>
            <span class="vismaicon vismaicon-sm vismaicon-bonus-gift icon-success mr-0"></span>
            <span class="vismaicon vismaicon-sm vismaicon-adoption-leave icon-warning mr-0"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="description">
        <b class="font-16">Model type</b>
        <p><span class="text-secondary">Article number 101</span> Office use</p>
        <p><span class="text-secondary">Delivery time</span> 1-7 Working days</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="d-flex justify-content-between align-items-center gap-32">
        <div class="flex-grow-1">
          <p class="price mb-4"><b>390,00</b> SEK</p>
          <p class="d-flex justify-content-between text-secondary mb-4">
            <span>Unit price</span>
            <span>400,00 SEK</span>
          </p>
          <div class="d-flex justify-content-between gap-16">
            <input type="number" class="form-control" placeholder="0" style="max-width: 6rem;" />
            <button type="button" class="btn btn-primary">Confirm</button>
          </div>
        </div>
        <label for="checkbox" class="checkbox m-0">
          <input id="checkbox" type="checkbox" />
          <span class="checkmark"></span>
        </label>
      </div>
    </div>
  </div>

  ...
</div>