Section

Section component is a basic building block of the page, that represents a generic standalone section. Sections can use different backgrounds to enhance the structure of the page content.

Usage

Section

The Section component is a fundamental building block to group related content into semantically meaningful areas, enhancing both the structure and readability of your pages.


                                                
                                                <section>Content</section>

Styling

Use utility classes to style the section component.


                                                
                                                <section class="py-900 py-tablet-1000 bg-primary">Content</section>

Sizes

We suggest these sizes for the section component.


                                                
                                                <section class="py-900 py-tablet-1000">XSmall Size</section>
                                                <section class="py-1000 py-tablet-1100">Small Size</section>
                                                <section class="py-1100 py-tablet-1300">Medium Size</section>
                                                <section class="py-1200 py-tablet-1400">Large Size</section>
                                                <section class="py-1400 py-tablet-1600">XLarge Size</section>

Text Alignment

Use utility classes to align the text inside the Section component.


                                                
                                                <section class="text-center">Centered Text</section>
                                                <section class="text-right">Right Aligned Text</section>

Responsive values can be defined using the tablet and desktop infixes.


                                                
                                                <section class="text-center text-tablet-right text-desktop-left">Responsive Text Alignment</section>