Columns
Columns
The Columns component is an all-in-one content builder that delivers flexibility for dynamic page layouts. Featuring nine distinct layout configurations across up to four columns, it allows you to side-by-side integrate text, rich media, action buttons, lists, tables, and social feeds—transforming complex district information into clean, scannable, and visually striking page sections.
Component Features & Options
Check out the features that make Columns such a versatile component.
Common ways to use this component include:
Feature Grids: Present core academic pathways, student support services, or key district benefits side by side for fast scanning.
Rich Media Graphic Sections: Pair descriptive narrative text directly with supporting photography, infographics, embedded videos, or animated media.
Action & Callout Hubs: Group high-priority introductory copy with interactive call-to-action buttons, quick links, or spotlight quote blocks.
Structured Data Displays: Organize complex resources into clean lists, comparative tables, or live social media feeds within targeted content zones.
Department & Program Highlights: Showcase specialized curricula, athletic schedules, or administrative services in distinct, parallel content blocks.
Select from nine distinct layout structures—supporting up to four columns—with customizable, variable-width options that allow you to establish clear visual hierarchy and balance copy across any device.
Enhance section visibility by applying custom background colors, full-resolution background photography, or dynamic animated GIFs to frame your content and draw immediate visual focus to key district initiatives. Also, span your multi-column layout and background edge-to-edge across the screen for high-impact visual banners, or set contained margins to create a crisp, defined white border around your styled background containers. Add rounded corners to make a small stylistic touch!
Apply outline borders or solid background cards to individual columns to group related links and resources, giving each content zone a distinct visual identity that guides visitor navigation.
Already part of the ParentSquare community? Simply sign in to browse our complete collection of user guides, quick-start tips, and practical walk-throughs.
-
Common ways to use this component include:
Feature Grids: Present core academic pathways, student support services, or key district benefits side by side for fast scanning. Rich Media Graphic Sections: Pair descriptive narrative text directly with supporting photography, infographics, embedded videos, or animated media. Action & Callout Hubs: Group high-priority introductory copy with interactive call-to-action buttons, quick links, or spotlight quote blocks. Structured Data Displays: Organize complex resources into clean lists, comparative tables, or live social media feeds within targeted content zones. Department & Program Highlights: Showcase specialized curricula, athletic schedules, or administrative services in distinct, parallel content blocks. -
Select from nine distinct layout structures—supporting up to four columns—with customizable, variable-width options that allow you to establish clear visual hierarchy and balance copy across any device.
-
Enhance section visibility by applying custom background colors, full-resolution background photography, or dynamic animated GIFs to frame your content and draw immediate visual focus to key district initiatives. Also, span your multi-column layout and background edge-to-edge across the screen for high-impact visual banners, or set contained margins to create a crisp, defined white border around your styled background containers. Add rounded corners to make a small stylistic touch!
-
Apply outline borders or solid background cards to individual columns to group related links and resources, giving each content zone a distinct visual identity that guides visitor navigation.
-
Already part of the ParentSquare community? Simply sign in to browse our complete collection of user guides, quick-start tips, and practical walk-throughs.
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