Skip to main content

Popular Links

  1. Component Library
  2. Columns

Columns

green arrow pointing right Check out a sample Careers page made entirely with the Columns component!

Dark Banner Image

One column, 300 px tall banner image, black background color with .8 opacity, white text sizes 72 and 28

Special Programs

We offer a variety of programs to meet the needs of every child.

Two Columns

Background color #618025, white text, uncontained background, contained content

This is a Longer Heading with More Words

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.  

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

Eget nullam non nisi est sit amet facilisis magna etiam. 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.

Intro with Image, Right Sidebar

The image added into the Component Intro, when left or right aligned, will drop down below the intro text (as long as the intro isn’t too long), causing the columns below it to be narrower.

Intro with Image, Right Sidebar

A group of children are playing with toys on the floor.The image added into the Component Intro, when left or right aligned, will drop down below the intro text (as long as the intro isn’t too long), causing the columns below to be narrower.

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.  

This is the end of the Component Intro.

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.  

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. 

Three Columns

Optional heading, component details in size 22 text, uncontained background, uncontained content, 10px corner radius on images

Linked Images Zoom On Hover

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.  

Person using computer

Lorem Ipsum

Teacher

Dolor Sit Amet

Recruiting brochure

Consectetur Adipiscing

Left Sidebar

#FAFEE3 background color, block quote, uncontained background, contained content

female student holding a spiral notebook with a subtle smile

Meet Our Student of the Month

"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."

Emma Jones, Middle School Student

Student of the Month Archives

Right Sidebar

With heading and component details, contained content, 20 px corner radius on image

Heading

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. 

three students working on robotics projects in a classroom

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. 

Textural Background Image, Uncontained

One column, #9CBB87 background set at .3 opacity, size 48 and 28 text, large buttons, contained content and uncontained background

Lorem ipsum dolor sit amet.


Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

 

Call to Action 1  Call to Action 2

Contained Background Color

Three columns, background color set to #3A7A95, contained background and contained content

Item One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Item Two

Est ullamcorper eget nulla facilisi. Viverra ipsum nunc aliquet bibendum enim. Nulla aliquet porttitor lacus luctus accumsan.

Item Three

Metus vulputate eu scelerisque felis imperdiet. Scelerisque eu ultrices vitae auctor eu augue. Cursus vitae congue mauris rhoncus.

Gif as Background Image, Uncontained

One column, #ffffff background set at .8 opacity, size 20 and 16 text, contained content and uncontained background

GIF as Background Image

Do be careful about the file size of the GIF. Unlike videos, browsers cannot buffer GIFs so large files (over 10mb) could cause page performance issues.

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.