List

Pack name: seed-list

List component pack for Seed

Contents

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

  • 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>

Dotted

  • 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>

Sizes

All of the following sizes support responsive modifiers.

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>