Card
Card component pack for Seed
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.
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>Configurations
Below are the default Sass configuration variables for seed-card. The variables can be found in the pack’s _config.scss file.
seed-card/_config.scss// Dependencies
@import "pack/seed-border/config";
// Namespaces
$seed-card-namespace: c-card !default;
$seed-card-block-namespace: #{$seed-card-namespace}__block !default;
// Config: Card
$seed-card-background-color: #fff !default;
$seed-card-border: $seed-border !default;
$seed-card-border-radius: 4px !default;
// Config: Card block
$seed-card-block-sizes: (
md: 20px 20px,
sm: 12px 20px,
xs: 8px 20px,
) !default;