Section Blocks

Vertical Padding

Each purpose built block (hero, portfolio, team section etc.) in our templates are given the class section-block. This class sets a default top and bottom padding (11rem or 110px) of a section; hence, creating the vertical spacing between sections in a layout. Individual sections override these defaults where necessary.

Example
								
									
...
Replicable Content

At times, when creating a section with repeated block-level elements that have a bottom margin, we can use the class replicable-content to reduce the bottom margin of a section by (3rem or 30px); hence, maintaining even vertical spacing.

Example
								
									

Content

Content

Content

Overriding Defaults

Overriding the default top and bottom padding on the fly is also possibly using the custom top and bottom padding classes that range from 0 padding up to 15rem or 150px.

Example
								
									
...
Padding Class Bottom Description
Top .pt-x 0-150 Example: pt-40 is equal to padding-top: 40px;
Bottom .pb-x 0-150 Example: pb-40 is equal to padding-bottom: 40px;