Numerous Problems Multiplied

    @vrembem/card

    1.36.1 • 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-1dp 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-4dp Sets the box-shadow property of the card_link modifier.
    $link-shadow-hover core.$box-shadow-8dp 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.

    Install

    npm i @vrembem/card

    DownloadsWeekly Downloads

    302

    Version

    1.36.1

    License

    MIT

    Unpacked Size

    24.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • sebnitu