Sections are blocks that contain other blocks. They can be styled, have background images and allow for creating complex flexbox layouts. 👏 They also can be nested!

Hero Sections

You can stretch a section block to the full width of a page and add a nice background image to create beautiful heros.

Push Me

Flexbox

Sections can also be used to create more complex layouts based on flexbox. They can contain any kind of block and even other sections. 

First column, one row.

Second column, first row ...

... and a second row.

 

Third column, first row ...

... a second ...

... and a third row.

You are in full control over flex properties such as the minimum block width, the gap size and the alignment of items.

This section has ...

... no vertical ...

... and ...

... horizontal gaps.

Cards

Cards are basically not more than styled sections. They are a bunch of blocks combined in one section that maybe has a border, a shadow, padding and even rounded corners.

Super card
with a slideshow

Cards can contain any kind of content. You can also stretch images or slideshow over the entire card width.

Button

Card with a
background image

Styling Other Blocks

Aside from being a card, sections can also be used to control the appearance of just one single block such as a gallery. The gallery block below has rounded corners, a white border and drops a shadow — all those styles are actually applied to the wrapping section.

  Related Pages