Card

npm install @vrembem/card

@use "@vrembem/card";

Options

Card uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

--vb-card-background

var(--vb-background)

--vb-card-foreground

var(--vb-foreground)

--vb-card-border

none

--vb-card-divider

var(--vb-border)

--vb-card-border-radius

var(--vb-border-radius)

--vb-card-box-shadow

0 0 0 1px var(--vb-border-color)

--vb-card-padding

1.25em

--vb-card-transition-timing-function

var(--vb-transition-timing-function)

--vb-card-transition-duration

var(--vb-transition-duration)

--vb-card-transition-property

background-color, border-color, box-shadow, transform

--vb-card-title-color

var(--vb-foreground-strong)

--vb-card-title-font-size

var(--vb-font-size-lg)

--vb-card-title-font-weight

var(--vb-font-weight-semi-bold)

--vb-card-title-line-height

inherit

--vb-card-screen-opacity

0.8

--vb-card-screen-background

var(--vb-background)

--vb-card-link-offset

-0.25em

Basic usage

Cards are a highly composable container component that comes with a variety of elements. The three most basic are:

• card__body
• card__image
• card__title

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit, lacus vel consectetur placerat, nisl eros malesuada orci, id venenatis nisi quam non turpis.

HTML

<div class="card">
  <img class="card__image" src="..." />
  <div class="card__body">
    <h2 class="card__title">...</h2>
    ...
  </div>
</div>

Copied!

For creating more distinct sections in a card, header and footer elements can be used. It's also possible to have multiple card__body elements in your cards as needed.

• card__header
• card__footer

<div class="card">
  <div class="card__header">
    <h2 class="card__title">...</h2>
  </div>
  <div class="card__body">
    ...
  </div>
  <div class="card__footer">
    ...
  </div>
</div>

Backgrounds

Card background and screen elements are displayed behind other card elements. These can be paired with the data-mode="light" or data-mode="dark" data attributes to create a light or dark card theme.

• card__background
• card__screen

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit, lacus vel consectetur placerat, nisl eros malesuada orci, id venenatis nisi quam non turpis.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit, lacus vel consectetur placerat, nisl eros malesuada orci, id venenatis nisi quam non turpis.

HTML

<div class="card">
  ...
  <img src="..." class="card__background" />
  <div class="card__screen"></div>
</div>

Copied!

Anchor cards

When creating a card using the anchor <a> element, additional styles are applied to make the card more visually interactive with hover and focus styles.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit, lacus vel consectetur placerat, nisl eros malesuada orci id venenatis nisi quam non turpis... Continue Reading

HTML

<a href="#" class="card">
  ...
</a>

Copied!