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 integrated as a unorder list
<ul class="card-list">
<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 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 code library there are available 2 types/variant of cards list.
- "Primary" variant - Add the .card-list-primary class to the card list main wrapper (.card-list). The variant remove the border on the card and adding a bigger vertical spacing/padding.
- "Secondary" variant - Add the .card-list-secondary class to the card list main wrapper (.card-list). The variant adds a light neutral background.
<div class="card-list card-list-secondary">
<div class="card-list-item">
Content ...
</div>
<div class="card-list-item">
Content ...
</div>
...
</div>
Columns
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 appropriate grid columns helper class (eg.: .grid-cols-3) for the correct number of desire columns.
<div class="card-list card-list-grid grid-cols-4">
<div class="card-list-item row gap-x-0">Content ...</div>
<div class="card-list-item row gap-x-0">Content ...</div>
<div class="card-list-item row gap-x-0">Content ...</div>
<div class="card-list-item row gap-x-0">Content ...</div>
<div class="card-list-item row gap-x-0">Content ...</div>
</div>
Hero card
The hero card is constructed around grid system and helper classes (e.g. spacings, display, flex) for a better integration in your project.
<section class="hero-card">
<div class="col-md-7 col-lg-6 col-xl-7">
<div class="hero-card-content">
<h2 class="card-title">
Welcome, <strong>Smith</strong>
</h2>
<p>
It's time to onboard a new team member in <strong>September</strong>...
</p>
<div class="btn-block">
<button class="btn">Workflow overview</button>
<button class="btn btn-primary">Begin preparation</button>
</div>
</div>
</div>
<div class="col-md-5 col-lg-6 col-xl-5 pr-md-0 mb-n32 justify-content-center justify-content-md-end">
<picture class="hero-card-illustration">
<img class="show-on-light" src="...path-to-img/yoga-illustration-light.svg" alt="Yoga Illustration">
<img class="show-on-dark" src="...path-to-img/yoga-illustration-dark.svg" alt="Yoga Illustration">
</picture>
</div>
</section>
For the image to wrap under the hero card content, add the .flex-wrap class (flex helper classes) to the main wrapper or .order-* (order helper classes) to the box you need to re-order.
<section class="hero-card flex-wrap">
...
</section>
Larger illustration
Add .hero-card-illustration-lg class to the illustration wrapper (.hero-card-illustration) to have a larger illustration.
<section class="hero-card">
<div class="col-lg-6">
<div class="hero-card-content">
...
</div>
</div>
<div class="col-lg-6 pr-lg-0 mb-lg-n32 justify-content-center justify-content-lg-end">
<picture class="hero-card-illustration hero-card-illustration-lg">
<img src="...path-to-img/house-illustration.svg" alt="House Illustration">
</picture>
</div>
</section>