Edge to edge wrapper
The Edge-to-Edge Wrapper serves as a container element designed to facilitate the organization of content into distinct sections. This wrapper enhances page structure in alignment with established visual perception principles, resulting in a more user-friendly and coherent layout.
When used in conjunction with other page elements, the Edge-to-Edge Wrapper plays a pivotal role in establishing a robust visual hierarchy. For instance, it enables users to easily discern the relationships between different content pieces, whether they are identical, similar, or interconnected, and whether one is subordinate to another.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Containers
Demo
Heading text - lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Question 1
Aliquam tincidunt velit sit amet ante hendrerit tempus.
Question 2
Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.
Question 3
Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.
Do
Use edge to edge wrapper to group related content Items
Make sure that elements used inside the wrapper have white background to avoid blending with the wrapper
Don't
Don't use the wrapper to create a full page back ground color
Don't add elements with the same back ground color as the wrapper
Don't add unrelated content in one wrapper