Headings

Use H1 tags for the top level title of a page. There should usually only be one of these on a web page.

This is a sample heading H1 - XXL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H1 - Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Use H2 tags for section headings within a document.

This is a sample heading H2 - XXL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a sample heading H2 - Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Spacing Classes

Click on a widget, select the advanced tab, and then add the following classes to add space between elements. These examples cover margin-top, but you can apply these to other directions (top, right, bottom, left) as well as with padding. 

Format: property–direction–size

Options:

property
margin
padding
direction
top
right
bottom
left
size
xxl
xl
l
m-3
m-2
m
s
Some element
margin-top-xxl
margin-top-xl
margin-top-l
margin-top-m-3
margin-top-m-2
margin-top-m
margin-top-s
height Classes

These classes will help you layout sections and columns and inner-sections. They use a minimum height relative to the viewport. If content is taller than that, it’ll stretch. Important: A column with a background image doesn’t actually have content. On mobile views it will compress down to virtually nothing (its padding) unless you give it a minumum height.

min-height-full: set an object to be the full height of the website minus the stock header nav height. It does not take into account the covid banner, WordPress admin bar, or additional horizontal menus like the employees menu.
min-height-tall: set a container to be tall, resulting in an almost vertical scroll block, with a hint of content below. Sometimes full screen content that hides further content can make pages look empty. 🙁
min-height-short: set a container to be short to ensure that background images of columns don't get vertically compressed down to nothing.

In this example, we set the section to full width content and no column game with the class min-height-tall, the left column to vertically and horizontally align content, and the right column to min-height-short.

Add Your Heading Text Here

Headings have margin above them. You may need to add 'padding-bottom-l' or something similar to the floated inner section's column to even out the top and bottom spacing for correct optical vertical centering.

min-height-short: This column is set to min-height-short, forcing it to be at least a certain height. If the content on the left column is higher (or the section’s min height is higher) it’ll be forced to grow. This is useful for creating a section with min-height-tall, which stacks and has a picture column with min-height-short.

Width Classes

These classes will help you layout columns and blocks/widgets to set grid sizes. They use maximum widths, so they’ll grow to a max, and shrink as required.

width-1-2: set a maximum width to 1/2 of the content column. Useful for floating content in one side of a two column layout section. In this example, the parent section has full width content with no column gap. The column this box is in is set to horizontally align it's content, making the green box float.
width-1-2: set a maximum width to 1/2 of the content column. Useful for floating a narrow column of content in a section.

width-1-3-stretch: Use this on a top level section’s column to split a layout row into a thirds column configuration. Floated content in this colum should likely have the class ‘width-1-3’. Setting the column’s horizontal align to ‘end’ will slick the floated frame to the column gutter, giving you a consistent left content column margin.

width-2-3-stretch: Use this on a top level section’s column to split a layout row into a thirds column configuration. Floated content in this colum should likely have the class ‘width-1-3’. Setting the column’s horizontal align to ‘end’ will slick the floated frame to the column gutter, giving you a consistent left content column margin.

width-1-3: set a maximum width to 1/3 of the content column.
width-2-3: set a maximum width to 2/3 of the content column.
width-full: stretch to the full content width of the site. Useful for placing a floating row in a section.

 7 Boyden Lane, PO Box 87, Deerfield, MA 01342

NOTICE OF NONDISCRIMINATORY POLICY AS TO STUDENTS: Deerfield Academy admits students of any race, color, national and ethnic origin to all the rights, privileges, programs, and activities generally accorded or made available to students at the school. It does not discriminate on the basis of race, color, national and ethnic origin in administration of its educational policies, admissions policies, scholarship and loan programs, and athletic and other school-administered programs.

© Copyright 2022 The Trustees of Deerfield Academy Privacy Policy. Designed and developed by Underscorefunk Design in partnership with Deerfield Academy.