Content Layouts

Content layouts make it easy for you to organize your content and for your site visitors to consume the content.  The UW Theme offers three different layout options, allowing you to display one, two, or three columns for your pages.

Column Layouts appear as a row block on your page. You can update your row block/content layout in the following ways:

  • Add a background color (available colors align campus branding) or a background image
  • Add a headline (appears as a centered h2 heading at the top of the block)
  • Add a row ID (used for anchor tags/jump links)
  • Add a row class (for setting additional styles and functionality)

By default, content layouts will alternate background colors down the page from white to light gray. However, these colors can be modified at any time.

Please note that page elements in the theme may only be available in certain content layouts.

One Column Layout

I am a one column layout. Content in a one column layout appears full width on the page.

Two Column Layout - 50/50 Width

I am the first column in a two column layout with a 50/50 width.

On mobile, column 1 of a two column width will appear first.

I am the second column in a two column layout a 50/50 width.

On mobile, column 2 of a two column width will appear second.

Two Column Layout - 40/60 Width

I am the first column in a two column layout with a 40/60 width.

I am the second column in a two column layout a 40/60 width.

Even though I’m wider, I’ll still appear second on a mobile device.

Two Column Layout - 60/40 Width

I am the first column in a two column layout with a 60/40 width.

I’ll appear first on a mobile device.

I am the second column in a two column layout a 60/40 width.

Three Column Layout - 33/33/33 Width

I am the first column in a three column layout with a 33/33/33 width.

On mobile, column 1 of a three column width will appear first.

I am the second column in a three column layout with a 33/33/33 width.

On mobile, column 2 of a three column width will appear second.

I am the third column in a three column layout with a 33/33/33 width.

On mobile, column 3 of a three column width will appear third.