Structure
How to use sections, containers, columns and rows to create layouts.
Sections
Sections are used to group related content, like Blogs, Testimonials, Features etc. They prevent content from touching the screen edges and space content apart.
The Base System provides multiple default section sizes. If a section requires additional styling, you can create custom sections or add a combo class.
Containers
Containers are used to horizontally center and limit the max width of the content. This ensures all the content on a page is consistently aligned.
Just like sections, the Base System includes several container sizes, all linked to variables for easy customization and flexibility.
Columns & Rows
Columns and Rows are helpful utility classes which use flex-gap to add spacing between elements. We recommend using these classes where you can't apply gap spacing to the parent class and don't want to create an additional class.
We generally use flex-gap over margin as it allow you to:
Space one or more elements simultaneously
Group elements
Apply consistent spacing without margin conflicts
Easily reorder and reuse elements
You can modify alignment using combo classes such as: Column Center , Row Wrap etc
Last updated