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 list design
- Default card list design
- Primary card list design
- Secondary card list design
- Grid list layout
- Hover on card list items
- Card list example
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>
...
</ul>
Also with buttons or anchor
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.
<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)
<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.
<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
<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.
<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.
<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
Article number 101 Office use
Delivery time 1-7 Working days
390,00 SEK
Unit price 400,00 SEK
Article number 102 Office use
Delivery time 5-9 Working days
670,00 SEK
Unit price 800,00 SEK
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://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" 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>