Solarain Sections & Containers

This is a default Section & has 0 padding top and bottom

Sections

A section is used for each main section in your main page hierarchy. It is the direct parent element to a container.

Sections adds vertical padding only. It controls the spacing above and below the container element. You can add a size modifier to adjust the amount of padding.

This is a Xtra Small Section & has 1rem Padding

This is a Small Section & has 1.5rem padding top and bottom

This is a Medium Section & has 72px padding top and bottom

This is a Large Section & has 96px padding top and bottom

This is a X Large Section & has 120px padding top and bottom

This is a full screen section with a width and height set to the viewport

Containers

Containers are the direct child element to a section.

Container Sizes

This is a fluid container and it has a max width of 100% with normal container padding

This is a default container and it has a max width of 1280px (80rem) = XL in Tailwind

This is a Large Desktop container and it has a max width of 1536px (96rem)

This is a Large container and it has a max width of 1024px (64rem)

This is a Medium container and it has a max width of 768px (48rem)

This is a Small container and it has a max width of 640px (40rem)

This is a x-Small container and it has a max width of 480px (30rem)