@vrembem/card

3.0.19 • Public • Published

Card

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

npm version

Documentation

Installation

npm install @vrembem/card

Styles

@use "@vrembem/card";

Markup

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

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

card__header + card__footer

Used to separate distinct card sections for headers and footers. It's also possible to include multiple card__body elements as needed.

  • card__header
  • card__footer
<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 the card_invert modifier which switches text colors to better suite a dark background theme.

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

Modifiers

card_fade

Hides the content of a card so that only the card__background is visible. The content is then revealed on user interaction via :hover and :focus events.

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

card_invert

Inverts the contrast of the card component (by default adds a dark background with white text). This can be used together with the card__screen and card__background elements to help keep the content of a card legible.

<div class="card card_invert">
  ...
</div>

card_link

Add styles to a card when the entire component is a clickable link.

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

card_zoom

A style enhancement modifier for when the card__background element is used. This will create a "zoom" effect when the card is hovered or focused.

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

Customization

Sass Variables

Variable Default Description
$prefix-block null String to prefix blocks with.
$prefix-element "__" String to prefix elements with.
$prefix-modifier "_" String to prefix modifiers with.
$prefix-modifier-value "_" String to prefix modifier values with.
$padding 1.25em Sets the padding property on the card__body, card__header and card__footer elements.
$background core.$white Sets the background property.
$border null Sets the border property.
$sep-border core.$border Sets the border property that separates card elements.
$border-radius core.$border-radius Sets the border-radius property.
$box-shadow core.$box-shadow-1 Sets the box-shadow property.
$color null Sets the color property.
$transition-property background-color, border-color, box-shadow, transform Sets the transition-property property.
$transition-duration core.$transition-duration Sets the transition-duration property.
$transition-timing-function core.$transition-timing-function Sets the transition-timing-function property.
$title-font-size core.$font-size-lg Sets the font-size property on the card__title element.
$title-line-height core.$line-height-lg Sets the line-height property on the card__title element.
$title-font-weight core.$font-weight-semi-bold Sets the font-weight property on the card__title element.
$screen-opacity 0.7 Sets the opacity property on the card__screen element.
$screen-background core.$night Sets the background property on the card__screen element.
$invert-background core.$night Sets the background property of the card_invert modifier.
$invert-border-color null Sets the border-color property of the card_invert modifier.
$invert-sep-border-color core.$border-color-invert Sets the border-color property that separates card elements of the card_invert modifier.
$invert-color core.$white Sets the background property of the card_invert modifier.
$link-shadow core.$box-shadow-2 Sets the box-shadow property of the card_link modifier.
$link-shadow-hover core.$box-shadow-3 Sets the box-shadow property of the card_link modifier on :hover state.
$link-offset 0.25em Sets the distance that the card will travel vertically on :hover of the card_link modifier.

Package Sidebar

Install

npm i @vrembem/card

Weekly Downloads

10

Version

3.0.19

License

MIT

Unpacked Size

24.4 kB

Total Files

14

Last publish

Collaborators

  • sebnitu