This container is centered on desktop.

This container is fluid: it will have a 32px gap on either side, on any
viewport size.

This container is fullwidth until the $widescreen breakpoint.

This container is fullwidth until the $fullhd breakpoint.

John Smith @johnsmith 31m

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Barbara Middleton

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.

Like · Reply · 3 hrs

Sean Brown

Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.

Like · Reply · 2 hrs

Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.

Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.

Kayli Eunice

Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.

Like · Reply · 2 hrs

Hero title

Hero subtitle

Primary title

Primary subtitle

Info title

Info subtitle

Success title

Success subtitle

Warning title

Warning subtitle

Danger title

Danger subtitle

Light title

Light subtitle

Dark title

Dark subtitle

Gradients#
By adding the is-bold modifier, you can generate a subtle gradient

Primary bold title

Primary bold subtitle

Info bold title

Info bold subtitle

Success bold title

Success bold subtitle

Warning bold title

Warning bold subtitle

Danger bold title

Danger bold subtitle

Light bold title

Light bold subtitle

Dark bold title

Dark bold subtitle

Medium title

Medium subtitle

Large title

Large subtitle

Fullheight title

Fullheight subtitle

Title

Subtitle

Title

Subtitle

Title

Subtitle

Variables

#

Name	Type	Default value	Computed value
Name	Type	Default value	Computed value
`$hero-body-padding`	size	`3rem 1.5rem`
`$hero-body-padding-small`	size	`1.5rem`
`$hero-body-padding-medium`	size	`9rem 1.5rem`
`$hero-body-padding-large`	size	`18rem 1.5rem`

Vertical…

Top tile

…tiles

Bottom tile

Middle tile

With an image

Wide tile

Aligned with the right tile

Tall tile

With even more content

One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

Hello World

What is up?

Foo

Bar

Third column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Vertical tiles

Top box

Vertical tiles

Bottom box

Middle box

With an image

Wide column

Aligned with the right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall column

With even more content

Side column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Main column

With some content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

One

Subtitle

Two

Subtitle

Three

Subtitle

Four

Subtitle

Five

Subtitle

Six

Subtitle

Seven

Subtitle

Eight

Subtitle

Nine

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Ten

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Eleven

Subtitle

Twelve

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

Thirteen

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Fourteen

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.

Support DanceMN

Kitchen Sink

Hero title

Hero subtitle

Primary title

Primary subtitle

Primary bold title

Primary bold subtitle

Medium title

Medium subtitle

Large title

Large subtitle

Fullheight title

Fullheight subtitle

Title

Subtitle

Title

Subtitle

Variables #

Support DanceMN

Variables

#