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.
<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 >
<li class ="card-list-item" >
Content ...
</li >
</ul >
Also with buttons or anchor
<div class ="card-list card-list-hover" >
<button type ="button" class ="card-list-item" >
Content ...
</button >
<button type ="button" class ="card-list-item" >
Content ...
</button >
<a role ="button" tabindex ="0" class ="card-list-item" >
Content ...
</a >
<a role ="button" tabindex ="0" class ="card-list-item" >
Content ...
</a >
</div >
Design variants
In the Design System 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 >
<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
Click me
<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.
<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
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 ="print" >
<span class ="vismaicon vismaicon-pdf mb-4" > </span >
<span > Download</span >
</a >
</div >
<div class ="price col-md-2" >
<b > 140</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.
<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 class ="card-list-item" >
Content ...
</div >
<div class ="card-list-item" >
Content ...
</div >
<div class ="card-list-item" >
Content ...
</div >
<div class ="card-list-item" >
Content ...
</div >
<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 class ="card-list-item" >
Content ...
</div >
</div >
Card list example
Example of a card list item / Product
Model type
Article number 101 Office use
Delivery time 1-7 Working days
Model type
Article number 102 Office use
Delivery time 5-9 Working days
Model type
Article number 103 Office use
Delivery time 1-3 Working days
<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://documentation.vud.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" name ="nbr" style ="max-width: 6rem;" >
<button type ="button" class ="btn btn-primary" > Confirm</button >
</div >
</div >
<label class ="checkbox m-0" for ="checkbox1" >
<input type ="checkbox" id ="checkbox1" >
<span class ="checkmark" > </span >
</label >
</div >
</div >
</div >
<div class ="card-list-item row gap-x-0" >
<div class ="col-md-4 col-sm-6" >
<div class ="title" >
<img src ="https://documentation.vud.visma.com/wp-content/uploads/photo-gallery/VUD-Pictograms/thumb/Apple_Waste.svg" alt ="Apple waste" class ="mr-16" >
<div >
<h5 > <a href ="#!" > Item x - 12 Pieces</a > </h5 >
<h6 class ="text-secondary" > Article number 102</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 102</span > Office use</p >
<p > <span class ="text-secondary" > Delivery time</span > 5-9 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 > 670,00</b > SEK</p >
<p class ="d-flex justify-content-between text-secondary mb-4" >
<span > Unit price </span >
<span > 800,00 SEK</span >
</p >
<div class ="d-flex justify-content-between gap-16" >
<input type ="number" class ="form-control" placeholder ="0" name ="nbr" style ="max-width: 6rem;" >
<button type ="button" class ="btn btn-primary" > Confirm</button >
</div >
</div >
<label class ="checkbox m-0" for ="checkbox1" >
<input type ="checkbox" id ="checkbox1" >
<span class ="checkmark" > </span >
</label >
</div >
</div >
</div >
<div class ="card-list-item row gap-x-0" >
<div class ="col-md-4 col-sm-6" >
<div class ="title" >
<img src ="https://documentation.vud.visma.com/wp-content/uploads/photo-gallery/VUD-Pictograms/thumb/Bicycle.svg" alt ="Bicycle" class ="mr-16" >
<div >
<h5 > <a href ="#!" > Item x - 12 Pieces</a > </h5 >
<h6 class ="text-secondary" > Article number 103</h6 >
<div class ="d-flex justify-content-start gap-12" >
<span class ="vismaicon vismaicon-sm vismaicon-web m-0" > </span >
<span class ="vismaicon vismaicon-sm vismaicon-info m-0" > </span >
<span class ="vismaicon vismaicon-sm vismaicon-environment m-0" > </span >
<span class ="vismaicon vismaicon-sm vismaicon-bonus-gift icon-success m-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 103</span > Office use</p >
<p > <span class ="text-secondary" > Delivery time</span > 1-3 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 > 170,00</b > SEK</p >
<p class ="d-flex justify-content-between text-secondary mb-4" >
<span > Unit price </span >
<span > 185,00 SEK</span >
</p >
<div class ="d-flex justify-content-between gap-16" >
<input type ="number" class ="form-control" placeholder ="0" name ="nbr" style ="max-width: 6rem;" >
<button type ="button" class ="btn btn-primary" > Confirm</button >
</div >
</div >
<label class ="checkbox m-0" for ="checkbox1" >
<input type ="checkbox" id ="checkbox1" >
<span class ="checkmark" > </span >
</label >
</div >
</div >
</div >
</div >
Design System
