Styleguide

Category

Tag

All Colors

Grid System

/src/css/object/component/row.styl
1
2
3 
<div class="_c-row">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
1
2
3 
<div class="_c-row _c-row--reverse">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
1
2
3 
<div class="_c-row _c-row--nowrap">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
1
2 
<div class="_c-row _c-row--left">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
1
2 
<div class="_c-row _c-row--right">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
1
2 
<div class="_c-row _c-row--center">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
1
2 
<div class="_c-row _c-row--between">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
1
2 
<div class="_c-row _c-row--around">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
</div>
1
2
2
3
3
3 
<div class="_c-row _c-row--top">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
2
3
3
3 
<div class="_c-row _c-row--bottom">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
2
3
3
3 
<div class="_c-row _c-row--middle">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
2
3
3
3 
<div class="_c-row _c-row--baseline">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
3 
<div class="_c-row _c-row--collapse">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
1
2
3 
<div class="_c-row _c-row--margin">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
1
2
3 
<div class="_c-row _c-row--margin-s">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
1
2
3 
<div class="_c-row _c-row--margin-l">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3
  </div>
</div>
1
2
2
3
3
3 
<div class="_c-row _c-row--fill">
  <div class="_c-row__col _c-row__col--1-3">
    1
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="_c-row__col _c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>