Nonchalant Programming Master


    3.0.10 • Public • Published


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

    npm version



    npm install @vrembem/card


    @use "@vrembem/card";


    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>

    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 class="card__body">
      <div class="card__footer">

    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">
      <img src="..." class="card__background" />
      <div class="card__screen"></div>



    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>


    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">


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

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


    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>


    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.


    npm i @vrembem/card

    DownloadsWeekly Downloads






    Unpacked Size

    24.4 kB

    Total Files


    Last publish


    • sebnitu