Card

Pack name: seed-card

Card component pack for Seed

Contents

Install

npm install seed-card --save

Dependencies


Example

Hey! I'm a card :)
<div class="c-card">
  Hey! I'm a card :)
</div>

Blocks

Contents of a card are placed within a .c-card__block

Card block
<div class="c-card">
  <div class="c-card__block">
    Card block
  </div>
</div>

Sibling card blocks will automatically be separated with a border.

Card block
Card block
<div class="c-card">
  <div class="c-card__block">
    Card block
  </div>
  <div class="c-card__block">
    Card block
  </div>
</div>

Sizes

Card blocks have size modifiers, ranging from xs-md. These adjust the vertical padding of the blocks.

These size modifier classes support responsive modifiers.

Class Padding
c-card__block--md 20px 20px (Default)
c-card__block--sm 12px 20px
c-card__block--xs 8px 20px

Example:

Medium (Default)
Small
Extra small
<div class="c-card">
  <div class="c-card__block c-card__block--md">
    Medium (Default)
  </div>
  <div class="c-card__block c-card__block--sm">
    Small
  </div>
  <div class="c-card__block c-card__block--xs">
    Extra small
  </div>
</div>

Modifiers

Square

Whoa! I'm a square card :)
<div class="c-card c-card--square">
  <div class="c-card__block">
    Whoa! I'm a square card :)
  </div>
</div>