Components

Box

By default two styling modifiers are provided: default and primary. Remove the default padding with tight, adjust it according to the spacing settings with tiny, small, large or huge.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio suscipit eligendi et nesciunt autem iste laborum inventore fugiat repudiandae nisi voluptate soluta recusandae ullam magnam omnis nostrum, facere, accusantium at!

Button

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio suscipit eligendi et nesciunt autem iste laborum inventore fugiat repudiandae nisi voluptate soluta recusandae ullam magnam omnis nostrum, facere, accusantium at!

Button

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio suscipit eligendi et nesciunt autem iste laborum inventore fugiat repudiandae nisi voluptate soluta recusandae ullam magnam omnis nostrum, facere, accusantium at!

Button

<div class="grid">
	<div class="grid__item md-w-1/3">
		<div class="box">
			<h3 class="mrgt0">Lorem ipsum</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio suscipit eligendi et nesciunt autem iste laborum inventore fugiat repudiandae nisi voluptate soluta recusandae <a href="#">ullam magnam</a> omnis nostrum, facere, accusantium at!</p>
			<p class="mrgb0"><a href="#" class="btn btn--primary btn--block">Button</a></p>
		</div>
	</div>
	<div class="grid__item md-w-1/3">
		<div class="box box--default">
			<h3 class="mrgt0">Lorem ipsum</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio suscipit eligendi et nesciunt autem iste laborum inventore fugiat repudiandae nisi voluptate soluta recusandae <a href="#">ullam magnam</a> omnis nostrum, facere, accusantium at!</p>
			<p class="mrgb0"><a href="#" class="btn btn--primary btn--block">Button</a></p>
		</div>
	</div>
	<div class="grid__item md-w-1/3">
		<div class="box box--primary">
			<h3 class="mrgt0">Lorem ipsum</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio suscipit eligendi et nesciunt autem iste laborum inventore fugiat repudiandae nisi voluptate soluta recusandae <a href="#">ullam magnam</a> omnis nostrum, facere, accusantium at!</p>
			<p class="mrgb0"><a href="#" class="btn btn--default btn--block">Button</a></p>
		</div>
	</div>
</div>
Toggle code

Buttons

Base

By default, we normalize button style to the minimum. Use the sizes, styles and variants classes to make them shinier. You can also use this as a base for any custom button.

Anchor 
<a href="#" class="btn">Anchor</a>
<button class="btn">Button</button>
<input type="submit" value="Submit" class="btn">
Toggle code

Sizes

<button class="btn btn--default btn--small">Small</button>
<button class="btn btn--default">Regular</button>
<button class="btn btn--default btn--large">Large</button>
Toggle code

States

<button class="btn btn--primary" disabled>Disabled</button>
Toggle code

Styles

<button class="btn btn--default">Default</button>
<button class="btn btn--primary">Primary</button>
Toggle code

Variants

<p><button class="btn btn--bare">Bare button</button></p>
<p><button class="btn btn--default btn--block">Block button</button></p>
Toggle code

Embed Responsive

Thanks to Nicolas Gallagher and SUIT CSS.

16/9

4/3

<div class="grid">
	<div class="grid__item sm-w-1/2">
		<h4 class="mrgt0">16/9</h4>
		<div class="embed-responsive embed-responsive--16/9">
			<iframe class="embed-responsive__item" src="https://www.youtube.com/embed/eHSSNyIlAps"></iframe>
		</div>
	</div>
	<div class="grid__item sm-w-1/2">
		<h4 class="mrgt0">4/3</h4>
		<div class="embed-responsive embed-responsive--4/3">
			<iframe class="embed-responsive__item" src="https://www.youtube.com/embed/0daS_SDCT_U"></iframe>
		</div>
	</div>
</div>
Toggle code

Grid And Widths

Widths

Widths are percentages represented by fractions. All classes are constructed like .w-{nominator}/{denominator}. By default you have halves, thirds, quarters, fifths and sixths. You can easily add more by changing the $widths-columns setting.

Widths are independent from the grid, you’re free to use them anywhere, with other components such as mosaic, media, etc.

Note that only the smallest fractions are generated; for example .w-2/4 doesn’t exist when both quarters and halves are in the settings, .w-1/2 take over it.

1/6
5/6
1/5
4/5
1/4
3/4
1/3
2/3
2/5
3/5
1/2
1/2
1/1
<div class="( grid )">
	<div class="w-1/6 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">1/6</div>
	</div>
	<div class="w-5/6 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">5/6</div>
	</div>
</div>

<div class="( grid ) mrgt">
	<div class="w-1/5 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">1/5</div>
	</div>
	<div class="w-4/5 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">4/5</div>
	</div>
</div>

<div class="( grid ) mrgt">
	<div class="w-1/4 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">1/4</div>
	</div>
	<div class="w-3/4 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">3/4</div>
	</div>
</div>

<div class="( grid ) mrgt">
	<div class="w-1/3 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">1/3</div>
	</div>
	<div class="w-2/3 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">2/3</div>
	</div>
</div>

<div class="( grid ) mrgt">
	<div class="w-2/5 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">2/5</div>
	</div>
	<div class="w-3/5 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">3/5</div>
	</div>
</div>

<div class="( grid ) mrgt">
	<div class="w-1/2 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">1/2</div>
	</div>
	<div class="w-1/2 ( grid__item )">
		<div class="( box box--default box--tiny text-center )">1/2</div>
	</div>
</div>

<div class="( grid ) mrgt">
	<div class="( grid__item )">
		<div class="( box box--default box--tiny text-center )">1/1</div>
	</div>
</div>
Toggle code

Widths Responsive

Change an element width depending on predefined breakpoints. This use a mobile-first approach — it use breakpoints defined as min-width only — and therefor cover all upper resolutions.

XS 1/1 · SM 1/2 · MD 1/3 · LG 1/4
XS 1/1 · SM 1/2 · MD 1/3 · LG 1/4
<div class="( grid grid--center )">
	<div class="sm-w-1/2 md-w-1/3 lg-w-1/4 ( grid__item )">
		<div class="( box box--default box--tiny text-center )"><strong>XS</strong> 1/1 &middot; <strong>SM</strong> 1/2 &middot; <strong>MD</strong> 1/3 &middot; <strong>LG</strong> 1/4</div>
	</div>
	<div class="sm-w-1/2 md-w-1/3 lg-w-1/4 ( grid__item xs-mrgt )">
		<div class="( box box--default box--tiny text-center )"><strong>XS</strong> 1/1 &middot; <strong>SM</strong> 1/2 &middot; <strong>MD</strong> 1/3 &middot; <strong>LG</strong> 1/4</div>
	</div>
</div>
Toggle code

Gutters

 
Tight
 
 
Tiny
 
 
Small
 
 
Default
 
 
Large
 
 
Huge
 
<div class="grid grid--tight">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">Tight</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
</div>

<div class="grid grid--tiny ( mrgt )">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">Tiny</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
</div>

<div class="grid grid--small ( mrgt )">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">Small</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
</div>

<div class="grid mrgt">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">Default</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
</div>

<div class="grid grid--large ( mrgt )">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">Large</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
</div>

<div class="grid grid--huge ( mrgt )">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">Huge</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
</div>
Toggle code

Spaced Rows

Since 1.6.0

By default no space is added between rows, resulting in grid items being stuck together. To space them out, add the class .grid--multiline. The distance is proportionnal to the gutters, meaning it changes along with grid size classes (.grid--tiny, .grid--small, …).

 
 
 
 
 
 
<div class="grid grid--multiline">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
</div>
Toggle code

Alignment

Change columns alignment with .grid modifiers; combining horizontal (center, right) and vertical (middle, bottom) alignment are possible. Top and left are the default values.

Right
 
 
Center
 

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.

Middle

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.

Bottom

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

<div class="grid grid--right ( mrgt )">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">Right</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
</div>

<div class="grid grid--center ( mrgt )">
	<div class="grid__item ( w-1/6 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
	<div class="grid__item ( w-1/6 )">
		<div class="( box box--default box--tiny text-center )">Center</div>
	</div>
	<div class="grid__item ( w-1/6 )">
		<div class="( box box--default box--tiny text-center )">&nbsp;</div>
	</div>
</div>

<div class="grid grid--middle ( mrgt )">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--small )">
			<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.</p>
		</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--small text-center )">Middle</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--small )">
			<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
		</div>
	</div>
</div>

<div class="grid grid--bottom ( mrgt )">
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--small )">
			<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.</p>
		</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--small text-center )">Bottom</div>
	</div>
	<div class="grid__item ( w-1/3 )">
		<div class="( box box--default box--small )">
			<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
		</div>
	</div>
</div>
Toggle code

Order

Reverse columns order with .grid--rev when there’s more than one per row.

First column
Second column
<div class="grid grid--rev">
	<div class="grid__item ( sm-w-1/2 )">
		<div class="( box box--default box--tiny text-center )">First column</div>
	</div>
	<div class="grid__item ( sm-w-1/2 xs-mrgt )">
		<div class="( box box--default box--tiny text-center )">Second column</div>
	</div>
</div>
Toggle code

Lists

Unstyled

Simply remove list default bullets or numbers.

  • Class aptent taciti sociosqu ad litora
  • Torquent per conubia nostra, per inceptos himenaeos
  • Sed molestie augue sit amet leo consequat posuere
<ul class="list">
	<li>Class aptent taciti sociosqu ad litora</li>
	<li>Torquent per conubia nostra, per inceptos himenaeos</li>
	<li>Sed molestie augue sit amet leo consequat posuere</li>
</ul>
Toggle code

Inline

Put list items inline with or without gutters. You can reduce or increase the space by using the modifiers tiny, small, large or huge. Remove gutters with tight, add separators with divided.

Since the list items are displayed as inline-block, you will probablby get an extra white space between them. Kanbasu was first removing those by setting the font-size to zero but this will prevent your code from being DRY in many cases. Therefor you should handle that on your side the way your prefer. This article covers the topic pretty well.

  • Lorem
  • Ipsum
  • Dolor
  • Lorem
  • Ipsum
  • Dolor
  • Lorem
  • Ipsum
  • Dolor
<ul class="list-inline ( mrgb+ )">
	<li>Lorem</li>
	<li>Ipsum</li>
	<li>Dolor</li>
</ul>

<ul class="list-inline list-inline--tight ( mrgb+ )">
	<li>Lorem</li>
	<li>Ipsum</li>
	<li>Dolor</li>
</ul>

<ul class="list-inline list-inline--divided">
	<li>Lorem</li>
	<li>Ipsum</li>
	<li>Dolor</li>
</ul>
Toggle code

Stacked

Stack list items with gutters. You can reduce or increase the space by using the modifiers tiny, small, large or huge. Add separators with divided.

  • Class aptent taciti sociosqu ad litora
  • Torquent per conubia nostra, per inceptos himenaeos
  • Sed molestie augue sit amet leo consequat posuere
  • Lorem
  • Ipsum
  • Dolor
  • Class aptent taciti sociosqu ad litora
  • Torquent per conubia nostra, per inceptos himenaeos
  • Sed molestie augue sit amet leo consequat posuere
<ul class="list-stacked ( mrgb+ )">
	<li>Class aptent taciti sociosqu ad litora</li>
	<li>Torquent per conubia nostra, per inceptos himenaeos</li>
	<li>Sed molestie augue sit amet leo consequat posuere</li>
</ul>

<ul class="list-stacked list-stacked--tight ( mrgb+ )">
	<li>Lorem</li>
	<li>Ipsum</li>
	<li>Dolor</li>
</ul>

<ul class="list-stacked list-stacked--divided">
	<li>Class aptent taciti sociosqu ad litora</li>
	<li>Torquent per conubia nostra, per inceptos himenaeos</li>
	<li>Sed molestie augue sit amet leo consequat posuere</li>
</ul>
Toggle code

Media

The famous media object created by Nicole Sullivan. Simply put content next to an image or anything else.

Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi.

Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim.

<div class="media ( mrgb )">
	<div class="media__left">
		<img src="https://placehold.it/200x200" class="media__image">
	</div>
	<div class="media__body">
		<p>Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio
			ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi.</p>
	</div>
</div>

<div class="media">
	<div class="media__right">
		<img src="https://placehold.it/200x200" class="media__image">
	</div>
	<div class="media__body">
		<p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum
			mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim.</p>
	</div>
</div>
Toggle code

Media Responsive

Extend the default media component but vertically align image and content under a specific breakpoint.

Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.

<div class="media media--responsive">
	<div class="media__left">
		<img src="https://placehold.it/200x200" class="media__image">
	</div>
	<div class="media__body">
		<p>Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio
			ac lectus vestibulum faucibus eget in metus.</p>
	</div>
</div>
Toggle code

Mosaic

Use the power of tables to display content. The most interesting part of this component is to vertically align its content.

You can share space between cells evenly with the modifier mosaic--fixed. Make a cell fit its content with mosaic__cell--fit.

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.

<div class="mosaic">
	<div class="mosaic__cell">
		<img src="https://placehold.it/200x150">
	</div>
	<div class="mosaic__cell">
		<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et
			justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.</p>
	</div>
	<div class="mosaic__cell mosaic__cell--fit">
		<button>Press me</button>
	</div>
</div>

<div class="mosaic mosaic--fixed">
	<div class="mosaic__cell text-center">
		<img src="https://placehold.it/200x150">
	</div>
	<div class="mosaic__cell">
		<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et
			justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.</p>
	</div>
	<div class="mosaic__cell text-center">
		<button>Press me</button>
	</div>
</div>
Toggle code

Mosaic Responsive

Since 1.1.0

Stack mosaic items under a specific breakpoint. Use the spacings helper to adjust padding/margin between items.

Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.

<div class="mosaic mosaic--responsive">
	<div class="mosaic__cell">
		<img src="https://placehold.it/200x150">
	</div>
	<div class="mosaic__cell">
		<p>Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et
			justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet.</p>
	</div>
	<div class="mosaic__cell mosaic__cell--fit">
		<button>Press me</button>
	</div>
</div>
Toggle code