Skip to main content

Columns

Columns

The Columns component is an all-in-one content editor that provides maximum flexibility when building dynamic page layouts. Featuring ten 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.

Component Features & Options

Check out the features that make Columns such a versatile component.

Common ways to use this component include:

A blurry image of a bright yellow, diamond-shaped object against a dark background.Feature Grid: Highlight core programs, services, or key benefits side by side.

A blurry image of a bright yellow, diamond-shaped object.Rich Media Content: Combine text descriptions with supporting images, gifs, or embedded videos.

A blurry, close-up image of a solid yellow shape on a dark background.Action Sections: Group introductory text with prominent buttons, links, or quote blocks.

A blurry, close-up image of a vibrant yellow diamond shape against a dark background.Structured Data: Display organized lists, tables, or live social feeds in targeted content zones.

Combine styled typography, inline images, embedded videos, interactive buttons, custom tables, and live social feeds within a single cohesive layout to build engaging, narrative-driven content blocks.

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!

Already part of the ParentSquare community? Simply sign in to browse our complete collection of user guides, quick-start tips, and practical walk-throughs.

 

Visit Columns Component Guide

  • Common ways to use this component include:

    A blurry image of a bright yellow, diamond-shaped object against a dark background.Feature Grid: Highlight core programs, services, or key benefits side by side.

    A blurry image of a bright yellow, diamond-shaped object.Rich Media Content: Combine text descriptions with supporting images, gifs, or embedded videos.

    A blurry, close-up image of a solid yellow shape on a dark background.Action Sections: Group introductory text with prominent buttons, links, or quote blocks.

    A blurry, close-up image of a vibrant yellow diamond shape against a dark background.Structured Data: Display organized lists, tables, or live social feeds in targeted content zones.

  • Combine styled typography, inline images, embedded videos, interactive buttons, custom tables, and live social feeds within a single cohesive layout to build engaging, narrative-driven content blocks.

  • 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!

  • Already part of the ParentSquare community? Simply sign in to browse our complete collection of user guides, quick-start tips, and practical walk-throughs.

     

    Visit Columns Component Guide

Column Layout Options
Choose from flexible grid arrangements spanning one to four columns to structure your page content with precision. Effortlessly adjust individual column widths to balance text, imagery, and interactive elements for a seamless browsing experience on any device.

1-Column

Single full-width column

1-Column Narrow

Single column with wider side margins

2-Columns

Two columns in equal sizes

Vari­able 2-Column, Left

A narrow column on left next to a wider column

Vari­able 2-Column, Right

Wider column on the left next to a narrow column

3-Columns

Three equal columns

Vari­able 3-Column, Left

Large column followed by two smaller, equal columns

Vari­able 3-Column, Right

Two smaller, equal columns followed by one larger column

Narrow, Wide, Narrow

3-columns with a larger column in the middle

4-Columns

Four equal columns

Column Box Styles
Frame your column content with up to 12 versatile box styles, featuring stroke outlines, elevated drop shadows, and full-color background cards. Mix and match these containers to group related information, establish clear visual hierarchy, and build accessible, high-contrast sections across your site.

A software menu showing various box style options such as None, Thin Outline, Solid White, and Soft Shadow.

A white rectangular box with a light blue 2px outline and rounded corners, displaying the text 'Outline Box, 2px' and 'Box with 2 pixel outline'.

A white rectangular box with rounded corners and a blue 4px outline, containing the text 'Outline Box, 4px' and 'Box with 4 pixel outline'.

A white rectangular swatch with the heading 'Solid White' and description 'Solid white box with or without corner radius'.

A white rectangular box featuring the text 'Soft Shadow' and 'Solid white box with a soft drop shadow'.

A white box displays the text 'Hard Shadow' followed by 'Solid white box with a hard right and hard bottom drop shadow'.

A white rectangular card displaying the text 'Hard Shadow, Bottom' and a smaller subtext.

A UI component showing a solid white box with a blue top accent line, labeled 'Accent Line, Top'.

A white box featuring the text 'Accent Line, Bottom' and a smaller description, with a blue accent line at the bottom.

A white box featuring a blue accent line on the left side, labeled 'Accent Line, Left'.

A white box featuring a blue accent line on the right edge, accompanied by the text 'Accent Line, Right'.

A white text box displays the words 'Accent Corner, Large' and 'Solid white box with a colored accent', with a blue accent visible at the bottom right corner.

A white rounded rectangle card featuring the text 'Accent Corner, Small' in bold and 'Solid white box with a colored accent' underneath, with a blue shape in the top left corner.

Examples

Narrow Single Column with Background

Add a background image behind your text to add more school branding. Customize typography, text colors, and button styles to highlight key district initiatives and guide visitor focus. Adding prominent action buttons makes it effortless for parents and community members to enroll, explore programs, or access vital resources.

 

Call to Action 1Call to Action 2

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.

A standard image placeholder icon featuring a sun and mountains inside a square against a yellow background.

Nulla aliquet porttitor lacus luctus accumsan. Metus vulputate eu scelerisque felis imperdiet. Scelerisque eu ultrices vitae auctor eu augue. 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
  • Lacus laoreet non curabitur gravida
  • Aenean sed adipiscing diam
  • Onec adipiscing tristique risus nec

3-Column Outline Boxes with GIF Background

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.

Box 3

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.

Linkable Images with Text

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.

An aerial view of the Parkway South High School building, featuring brick and glass architecture.

A standard image placeholder icon featuring a sun and mountains against a solid blue background.

Linked Image

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. 

A standard image placeholder icon featuring a sun and mountains against a solid blue background.

Linked Image

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. 

A professional woman stands confidently in front of a row of parked school buses.

Image with Quote

 

Emma Jones, Superintendant of Schools

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.

Read Beginning of Year Letter

Box Style 1

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.  

 

Box Style 2

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.  

 

Box Style 3

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.  

 

Box Style 4

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.  

 

School Profile

Build an engaging school profile by pairing overview copy and academic programs in one column with campus photos, quick facts, and leadership contacts in the second. This balanced two-column layout keeps vital campus details organized and effortless for prospective families to scan. See Yellowstone as an example.

An aerial view of the Parkway North High School building, featuring brick architecture and a circular driveway with yellow school buses.

Mission Statement:
Our mission is to nurture a safe, inclusive, and engaging environment where every child is valued, empowered, and inspired to learn. We are dedicated to fostering curiosity, building foundational skills, and encouraging a love for lifelong learning.

Grades: Kindergarten – 5th
Enrollment: 830 students
Principal: Principal Name
Assistant Principal: Assistant Principal Name
School Hours: 8:00 AM – 3:45 PM

Principal’s Message

Principal [Principal’s Name] brings over 12 years of educational leadership and a passion for student success, driving excellence and innovation throughout our school.

Dear Students, Parents, Staff, and Community Members,

Welcome to [School Name], where we are committed to fostering an inclusive and engaging educational environment for all students. As principal, it is my honor to lead a district that prioritizes academic excellence, innovation, and the overall well-being of every student.

At [School Name], our dedicated team of educators and staff work collaboratively to inspire lifelong learners and responsible citizens. We understand that every student is unique, and our goal is to provide personalized pathways that support each learner’s academic and personal growth.

As we embark on another school year, we are excited about the opportunities ahead. Our focus on [key initiatives, such as STEAM programs, mental health support, or community engagement] reflects our commitment to preparing students for success in a rapidly changing world.

I encourage you to stay connected with our district through this website, social media, and our regular communications. Your involvement is essential to the success of our schools, and we look forward to working together to create an exceptional educational experience for all students. Thank you for your continued support of [School Name]. Together, we will achieve great things!

Warm regards,
[Principal’s Name]
Phone: 888.996.4156  |  Email