UNCG Web Assets | Blocks | Overlap Block

Overlap Block

A unique way to display a heading that overlaps the previous before and the next block after.

Lorem ipsum dolor sit amet

Example:

This is the previous block

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

This is an Offset Block

This is the next block

Offset Block Settings:

Set Background Color
- You have the option to change the background color of the block to complement your content
Rounded Corners
- Corners are not rounded by default but you have the option to add a 5px border radius
Full Width
- Do you want this block to extend the full width of your page
Max Width of Block
- You can set a predetermined width for your container based on responsive breakpoints
Min. Width for Offset Styling
- Offset styling will not be applied to sizes below this threshold; this is to avoid overlapping/styling issues at smaller viewports; it is recommended you check your page at varying widths and adjust this setting accordingly
Add Offset Padding to the Previous Block
- The previous block before this will have padding added to the bottom to offset this block in order to help prevent content from overlapping
Add Offset Padding to the Next Block
- The next block after this will have padding added to the top in order to offset this block to help prevent content from overlapping