Core Component: Container
The Container component provided by the Core components is utilized to house child components and create logical sections within pages. Containers span edge to edge and allow for background colors and background imagery, as well as additional accents.
Default Container
This is the default container. It should be constrained to the page container and the content centered up on the screen.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
Default Container with Background Color
This is the default container. It should be constrained to the page container and the content centered up on the screen.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
Container with White Text and Background Image
This is the default container. It should be constrained to the page container and the content centered up on the screen.
The background image or color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
Full Width Container with Background Color
This is a full-width container, allowing the inner content to span edge to edge.. It should be constrained to the page container and the content centered up on the screen.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
Constrained Container
This is a constrained container, allowing the inner content to be squished and centered.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
Default Container with 2 Columns of Content
This is the default container. It should be constrained to the page container and the content centered up on the screen.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
This is the default container. It should be constrained to the page container and the content centered up on the screen.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
Full Width Container with 2 Columns of Content + Background Color
This is a full-width container, allowing the inner content to span edge to edge.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
This is a full-width container, allowing the inner content to span edge to edge.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
Full Width Container with 2 Columns of Content + Background Color
This is a full-width container, allowing the inner content to span edge to edge.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
This is a full-width container, allowing the inner content to span edge to edge.
The background color should span "edge to edge" on the page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
Constrained Container with 2 columns of content
This is a constrained container, allowing the inner content to be squished.
The background color should span "edge to edge" on the page if set.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.
This is a constrained container, allowing the inner content to be squished.
The background color should span "edge to edge" on the page if set.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam libero justo laoreet sit amet cursus sit amet. Ut etiam sit amet nisl purus in mollis nunc. Suscipit adipiscing bibendum est ultricies integer quis auctor. Vitae elementum curabitur vitae nunc sed velit. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Non consectetur a erat nam at lectus. In tellus integer feugiat scelerisque varius morbi enim. Semper auctor neque vitae tempus quam pellentesque. Interdum varius sit amet mattis vulputate enim nulla aliquet. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Pellentesque habitant morbi tristique senectus et netus et.