Grid

1
2  <div class="o-grid">
3    <div class="o-grid__cell u-6of12">Grid cell</div>
4    <div class="o-grid__cell u-6of12">Grid cell</div>
5  </div>
6

1
2  <div class="o-grid">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">Grid cell</div>
4    <div class="o-grid__cell u-12of12 u-6of12-tablet">Grid cell</div>
5  </div>
6

1
2  <div class="o-grid o-grid--middle">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">Grid cell</div>
4    <div class="o-grid__cell u-12of12 u-6of12-tablet">
5    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id assumenda rerum corporis saepe tenetur nihil vitae atque non aliquam, hic aperiam enim error mollitia odio magnam, quisquam. Quia, corporis.
6    </div>
7  </div>
8

1
2  <div class="o-grid o-grid--bottom">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">Grid cell</div>
4    <div class="o-grid__cell u-12of12 u-6of12-tablet">
5    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id assumenda rerum corporis saepe tenetur nihil vitae atque non aliquam, hic aperiam enim error mollitia odio magnam, quisquam. Quia, corporis.
6    </div>
7  </div>
8

1
2  <div class="o-grid o-grid--center">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">
4    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id assumenda rerum corporis saepe tenetur nihil vitae atque non aliquam, hic aperiam enim error mollitia odio magnam, quisquam. Quia, corporis.
5    </div>
6  </div>
7

1
2  <div class="o-grid o-grid--right">
3    <div class="o-grid__cell u-12of12 u-6of12-tablet">
4    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et id assumenda rerum corporis saepe tenetur nihil vitae atque non aliquam, hic aperiam enim error mollitia odio magnam, quisquam. Quia, corporis.
5    </div>
6  </div>
7