List
List component pack for Seed
Install
npm install seed-list --save
Dependencies
Example
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Using non-list selectors
Chia seeds
Flax seeds
Sesame seeds
Pumpkin seeds
Sunflower seeds
<div class="c-list">
<div class="c-list__item">Chia seeds</div>
<div class="c-list__item">Flax seeds</div>
<div class="c-list__item">Sesame seeds</div>
<div class="c-list__item">Pumpkin seeds</div>
<div class="c-list__item">Sunflower seeds</div>
</div>Modifiers
Block
Supports responsive modifiers.
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list c-list--block">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Bordered
Supports responsive modifiers.
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list c-list--bordered">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Bullet
Chia seeds
Flax seeds
Sesame seeds
Pumpkin seeds
Sunflower seeds
<div class="c-list c-list--bullet">
<div class="c-list__item">Chia seeds</div>
<div class="c-list__item">Flax seeds</div>
<div class="c-list__item">Sesame seeds</div>
<div class="c-list__item">Pumpkin seeds</div>
<div class="c-list__item">Sunflower seeds</div>
</div>Dotted
Supports responsive modifiers.
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list c-list--dotted">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Inline
Supports responsive modifiers.
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list c-list--inline">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Number
Chia seeds
Flax seeds
Sesame seeds
Pumpkin seeds
Sunflower seeds
<div class="c-list c-list--number">
<div class="c-list__item">Chia seeds</div>
<div class="c-list__item">Flax seeds</div>
<div class="c-list__item">Sesame seeds</div>
<div class="c-list__item">Pumpkin seeds</div>
<div class="c-list__item">Sunflower seeds</div>
</div>Sizes
Extra small
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list c-list--xs">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Small
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list c-list--sm">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Medium
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list c-list--md">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Large
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list c-list--lg">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Extra large
- Chia seeds
- Flax seeds
- Sesame seeds
- Pumpkin seeds
- Sunflower seeds
<ul class="c-list c-list--xl">
<li>Chia seeds</li>
<li>Flax seeds</li>
<li>Sesame seeds</li>
<li>Pumpkin seeds</li>
<li>Sunflower seeds</li>
</ul>Configurations
Below are the default Sass configuration variables for seed-list. The variables can be found in the pack’s _config.scss file.
seed-list/_config.scss// Namespaces
$seed-list-namespace: "c-list" !default;
$seed-list-item-namespace: #{$seed-list-namespace}__item !default;
// Sizes
$seed-list-size-default: spacing(1) !default;
$seed-list-sizes: (
xs: 0,
sm: ceil(spacing(1) / 2),
md: $seed-list-size-default,
lg: spacing(2),
xl: spacing(4)
) !default;