Content Wrapper

The most basic container for contents for consistency.

"content-wrapper-extralarge"

The max width is set to 1200px. This container is useful when you have to have a large image and text side by side, and when the page only uses the content type, such as in Landing Page.

Example

This is a good example of the extralarge usage. The image has details that need to be large enough.
Sol 3

"content-wrapper-large"

The max width is set to 1000px. This container is useful when you have to put image and text side by side for larger screeens.

"content-wrapper-reading"

This wrapper is used for long reading. The max width is set to 800 px in order to make it easier to read.

The gap provides enough spacing between paragraphs.

2nd element

By wrapping the "content-wrapper-reading" inside other wrappers such as "content-wrapper-large", it is easier to organize multiple readable sections with enough spacing.

3rd element

More examples