Card

The cards component provides a flexible and extensive content container with multiple variants and options.

npm version

npm install @vrembem/card
@import "vrembem/card/index";

card

The base card component comes with a number of elements for card composition. The three most basic being:

  • card__body
  • card__image
  • card__title

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

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

card__header + card__footer

These are used for when you need separated card headers and footers.

  • card__header
  • card__footer

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

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

card__screen + card__background

Card screens and backgrounds are displayed behind the other card elements. These are typically paired with .card_invert which switches text colors to better suite a dark background.

  • card__screen
  • card__background

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

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

card_invert

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

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

card_link

card_fade

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Action

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

card_zoom

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Action

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

card_invert card_fade card_zoom

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque.

card_link

Demos

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.

Card Title

Quisque eget erat non dolor rutrum pellentesque ac vel dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur.