Columns
Columns
How to Use the Component
The Columns component is an all-in-one content editor that provides maximum flexibility when building dynamic page layouts. Featuring nine distinct configuration options, it allows you to seamlessly integrate text, media, call-to-action buttons, lists, tables, and social feeds within a structured multi-column framework. By letting you mix and match different content types side by side, it transforms complex information into easily readable, visually striking sections.
Common ways to use this component include:
Feature Grid: Highlight core programs, services, or key benefits side by side.
Rich Media Content: Combine text descriptions with supporting images, gifs, or embedded videos.
Action Sections: Group introductory text with prominent buttons, links, or quote blocks.
Structured Data: Display organized lists, tables, or live social feeds in targeted content zones.
Examples
Background Image
Banner images are a great way to enhance the visual appeal of your subpages. Simply add an image to your component to create an attractive, engaging first impression when the page loads.
GIF as Background Image
When using animated GIFs, be mindful of the file size of the GIF. Unlike videos, browsers cannot buffer GIFs, so large files (over 10mb) could cause page performance issues. Also, GIFs that flash or blink quickly can be an accessibility violation. Aim for subtle movement. Less is more!
Call to Action Buttons
Two-Column Layout w/ Intro
Instead of stacking multiple single-column layouts, consider whether a multi-column layout would better support your content. Multi-column layouts help reduce the repetition of one-column sections while also shortening text line lengths, making content easier to read and scan. As a best practice, try to keep content balanced between columns so one column does not become significantly longer than the others.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Est ullamcorper eget nulla facilisi. Viverra ipsum nunc aliquet bibendum enim. Nulla aliquet porttitor lacus luctus accumsan. Metus vulputate eu scelerisque felis imperdiet. Scelerisque eu ultrices vitae auctor eu augue.
Metus vulputate eu scelerisque felis imperdiet. Scelerisque eu ultrices vitae auctor eu augue. Cursus vitae congue mauris rhoncus. Non pulvinar neque laoreet suspendisse interdum consectetur libero.
- Lacus laoreet non curabitur gravida
- Aenean sed adipiscing diam
- Onec adipiscing tristique risus nec
Outline Boxes
Box 1
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 deserunt mollit anim id est laborum.
Box 2
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 deserunt mollit anim id est laborum.
Three-Column Layout w/ Intro
When images are linked within a Columns component, they automatically display an attractive hover effect for added visual engagement. You can also use the Image Corner Radius option to give your images smooth, rounded corners.
Image with Quote
Student of the Month
Emma Jones, Middle School Student
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Est ullamcorper eget nulla facilisi. Viverra ipsum nunc aliquet bibendum enim. Nulla aliquet porttitor lacus luctus accumsan. Metus vulputate eu scelerisque felis imperdiet.
Scelerisque eu ultrices vitae auctor eu augue. Cursus vitae congue mauris rhoncus. Non pulvinar neque laoreet suspendisse interdum consectetur libero. Lacus laoreet non curabitur gravida. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Eget nullam non nisi est sit amet facilisis magna etiam."
Student of the Month Archives
Image & Right Sidebar
Sed faucibus turpis in eu mi bibendum neque egestas congue. Commodo elit at imperdiet dui accumsan sit amet. Orci nulla pellentesque dignissim enim sit amet.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Est ullamcorper eget nulla facilisi. Viverra ipsum nunc aliquet bibendum enim. Nulla aliquet porttitor lacus luctus accumsan. Metus vulputate eu scelerisque felis imperdiet. Scelerisque eu ultrices vitae auctor eu augue.
Cursus vitae congue
Non pulvinar neque laoreet suspendisse interdum consectetur libero. Lacus laoreet non curabitur gravida. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Eget nullam non nisi est sit amet facilisis magna etiam.
Montes nascetur ridiculus mus mauris vitae ultricies leo. Sed id semper risus in hendrerit gravida rutrum quisque non. Id velit ut tortor pretium. Lectus vestibulum mattis ullamcorper velit sed. Leo a diam sollicitudin tempor id eu. Sodales ut eu sem integer vitae justo eget.
Wide-Narrow-Narrow
Parent Resources