Ripple Design System


With up to 12 columns, you can build grids with responsive layouts across different breakpoints.

Grids are a crucial component of any design system. They provide a framework for arranging content in an appealing and structured manner.

We've designed the grid for a high degree of flexibility and responsiveness.


Ripple has 5 breakpoints. These ensure content is at an optimal layout for readability and accessibility.

BreakpointWidthActive content area
XS<575px288 – 543px
S576 – 767px544 – 735px
M768 – 991px736 – 927px
L992 – 1199px864 – 1071px
XL1200px +1040px


The grid is made up of three elements: columns, gutters, and margins.

Visual of basic grid / column / gutter / margin anatomy

BreakpointMarginsGutterColumn type / width
XS • <575px16px16pxFluid
S • 576 – 767px16px16pxFluid
M • 768 – 991px32px24pxFluid
L • 992 – 1199px64px24pxFluid
XL • 1200px +80px28pxFixed / 61px


Use the grid system to structure your content.

Most pages follow a ‘two-thirds and one-third’ layout. But, the grid system allows for more combinations if needed.

Your main content should always be in a two-thirds column. This is even if you’re not using a corresponding one-third column for secondary content.

Column layouts

Column SpanLayoutBreakpoint
12FullXS • S • M • L • XL
6HalfXS • S • M • L • XL
7Two thirdsM • L • XL
4One thirdM • L • XL
3One quarterL • XL

Propose a change to this page on GitHub.