Structure

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