Examples

Layout widths

wrapper
w-xs / 320px
w-xs
w-xs
w-xs
w-xs
w-sm / 640px
w-xs
w-xs
w-xs
w-md / 960px
w-xs
w-xs
w-lg / 1280px
w-xs
w-xl / 1600px

Centered layout wrappers

wrapper
wrapper-xl
wrapper-lg
wrapper-md
wrapper-sm
wrapper-xs

Labels (see decoration)

Buttons

Link pseudo-button Link ghost pseudo-button

Full width button inside a small wrapper

Grid layouts

A malleable grid without equalization set. on the cell widths. In this example, for sm up, columns will adopt whatever width they require for their content. CSS grid requires column placement classes to know where you want your columns, so that it can figure out how many columns you need.

grid gap-1

sm:col-1 A narrow column
sm:col-2 This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content. This will be a wide column because it has a lot of content.
sm:col-3 Another narrow column
grid sm:equal-2-cols gap-2
#
#
grid sm:equal-2-cols md:equal-3-cols gap-2
#
#
#
#
sm:col-span-2
grid sm:equal-4-cols gap-2
#
#
sm:col-span-2
sm:col-span-3
#

Example components

☆ Information panel
⚠ Warning alert panel.
Card category

Card title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

Get this thing

Example components using grid

Media object

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

Form inputs etc. as grid items

Media object

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

A “two-up” feature block

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum.

Discover more

Research article page layout using grid

grid md:equal-3-cols lg:equal-4-cols gap-3
md:col-2 md:col-span-2

Title of This Article

md:col-2 md:col-span-2 lg:col-4 lg:row-span-2 p-1 relative
sticky top

On this page TOC

  • Introduction
  • Discussion
  • Conclusion
md:col-2 md:col-span-2

Introduction

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Discussion

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Conclusion

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

md:col-1 md:row-1 md:rows-1-3 lg:rows-1-2

Navigation menu

  • Page One
  • Page Two
  • Page Three

Content-grid layouts

Title of this content-grid demo

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Here’s a styled <p class="popout">:

☆ Information panel

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Here’s a styled <div class="expand">:

This is a lot of example text that may or may not distort the aspect ratio (16×9) of this expand component.

See what it does on a small viewport width (e.g. phone).

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni rem animi quaerat accusantium illum architecto, nemo, ex harum voluptatum adipisci eum blanditiis dolorum. Natus debitis quisquam, expedita accusantium quos cumque?

Here’s a styled <p class="full-bleed">:

full-bleed — expands to the full width of the avilable space. If there are no sidebars, it will reach the sides of the viewport.