Cards
Cards
Use cards for a container with border that changes color and adds a shadow on hover. Use .pv-card-link to expand the click area of a link within a card to the entire surface of the card.
Example
A card featuring our cool boss.
Chris Severn
CEO & Co-founder
HTML
<figure class="pv-card">
<img src="/prototypes/assets/leader-chris.png" alt="">
<figcaption class="pv-surface pv-inset-square-24">
<p class="pv-text-title-xl">Chris Severn</p>
<p class="pv-stack-24 pv-text-body-md">CEO & Co-founder</p>
<p class="pv-text-inherit"><a href="" class="pv-card-link">LinkedIn</a></p>
</figcaption>
</figure>Image Hover
Use image hover within a card to contain two images, showing the first by default and the second on hover.
Example
Swapping between two images on hover.
Adam Geitgey
CTO & Co-founder
HTML
<div class="pv-image-hover">
<img src="/prototypes/assets/leader-adam.png" alt="">
<img src="/prototypes/assets/leader-adam-hover.png" alt="">
</div>Clickable Cards
You can use .pv-card directly on a or button elements as well.
Example
A card as a button.
HTML
<button class="pv-card pv-inset-square-12 pv-space-between">
<div>
<p>Green Sword Green Armor</p>
<p class="pv-text-body-xs pv-text-subdued">Custom Utah... & 23 more plans | Clinical Chi... & 5 more specialties | Inpatient & 5 more service areas</p>
</div>
<div class="pv-flex" style="--flex-align: start">
<div class="pv-text-right">
<p class="pv-text-title-sm">$626.23</p>
<p class="pv-text-subdued pv-text-body-xs">Negotiated</p>
</div>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pv-icon pv-text-subdued"><path d="M19.7 9.6c-.2-.2-.5-.3-.6-.3s-.3-.1-.5-.1l-3.7-.6-1.7-3.5c-.1-.2-.2-.3-.2-.5-.1-.1-.2-.4-.5-.5-.2-.1-.3-.1-.5-.1s-.3 0-.5.1c-.3.1-.4.4-.5.5s-.2.3-.2.5L9.1 8.6l-3.7.5c-.2 0-.4.1-.5.1s-.4.1-.6.3c-.2.3-.3.7-.3 1.1 0 .3.2.5.3.6l.4.4 2.7 2.7-.6 3.8v.5c0 .2 0 .4.1.7.2.3.5.5.8.6h.2c.2 0 .4-.1.5-.1.1-.1.3-.1.5-.2H9l2.1-1.2 1.1-.6 3.3 1.8c.2.1.3.2.5.2.1 0 .3.1.5.1h.2c.3-.1.6-.3.8-.6.1-.3.1-.6.1-.7 0-.2 0-.3-.1-.5l-.6-3.8 2.7-2.7.4-.4c.1-.1.3-.3.3-.6-.3-.4-.4-.8-.6-1z"/></svg>
</div>
</button>Card Select
Card select is essentially a group of radio buttons where clicking a card activates the corresponding radio button. You can customize the gap between cards as well as the selected/unselected text and icons using custom properties.
| Custom Property | Default Value | Description |
|---|---|---|
--gap |
16px | Space between cards |
--unselected |
"Apply to Table" | Status text on unselected cards |
--unselected-icon |
Icon on unselected cards | |
--selected |
"Applied" | Status text on selected cards |
--selected-icon |
Icon on selected card |
Be sure that the label immediately follows the radio input and that the input id matches the for attribute in the label so that clicking the card checks the radio button. The empty div in each card is populated with the selected/unselected text and icon.
Example
A card select.
HTML
<div class="pv-card-select">
<input type="radio" name="config" id="1" checked>
<label for="1">
<div class="pv-border-bottom pv-inset-square-20">
<p class="pv-text-title-sm">Payer Comparison</p>
<p>Compare up to 5 codes from 5 plans, across <strong>5 specific providers</strong>.</p>
</div>
<div></div>
</label>
<input type="radio" name="config" id="2">
<label for="2">
<div class="pv-border-bottom pv-inset-square-20">
<p class="pv-text-title-sm">Provider Comparison</p>
<p>Compare up to 5 codes from 5 plans, across <strong>5 specific providers</strong>.</p>
</div>
<div></div>
</label>
<input type="radio" name="config" id="3">
<label for="3">
<div class="pv-border-bottom pv-inset-square-20">
<p class="pv-text-title-sm">Provider Type Comparison</p>
<p>Compare up to 5 codes from 5 plans, across <strong>5 provider types</strong>.</p>
</div>
<div></div>
</label>
</div>