Cards

a library of sass mixins

View Demo

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-cards

or

yarn add elr-scss-cards

Implementation

Scss

.card {
  @include elr-card;
}

.card-border {
  @include elr-card(
    $config: (
      border-color: $light-gray,
      shadow: none,
    )
  );
}

.card-rounded {
  @include elr-card(
    $config: (
      border-color: $light-gray,
      shadow: none,
      border-radius: $base-fontsize * 0.5,
    )
  );
}

.card-centered {
  @include elr-card-centered;
}

HTML

<div class="card">
  <div class="card-inner">
    <div class="card-header">
      <div class="header-content">
        <h2 class="card-title">Title of Card</h2>
        <h3 class="card-subtitle">This is a subtitle for this card</h3>
      </div>
    </div>
    <div class="card-body">
      <div class="card-content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem
          aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure
          amet non, nihil corporis?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem
          aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure
          amet non, nihil corporis?
        </p>
      </div>
    </div>
    <div class="card-footer">
      <div class="card-actions">
        <a class="elr-button elr-button-primary">Button Link</a>
        <a class="elr-button elr-button-danger">Button Link</a>
      </div>
    </div>
  </div>
</div>

License

SEE LICENSE IN LICENSE.md