Use H1 tags for the top level title of a page. There should usually only be one of these on a web page.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
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:
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.
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.
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.
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-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.
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.