Responsive Styling

Minerva components are built using styled system, and use the same approach for adding responsive styles using these default breakpoints:

const breakpoints = ['640px', '768px', '1024px', '1280px'];
// breakpoint aliases
breakpoints.base = '0px';
breakpoints.sm = breakpoints[0];
breakpoints.md = breakpoints[1];
breakpoints.lg = breakpoints[2];
breakpoints.xl = breakpoints[3]
Preview
This should resize with browser
Source

Minerva also aliases those defaults to sm, md, lg, and xl

Preview
This should resize with browser
Source

Styling a grid with the styled-system

Preview

Small

8gb/4CPUs

160 GB SSD disk

$10/mo

Medium

8gb/4CPUs

160 GB SSD disk

$20/mo

Large

8gb/4CPUs

160 GB SSD disk

$30/mo

Source