Area

The area component defines an area where other components can be used outside the main column or sidebar.

Usage

You should not have to explicitly use area components, as they are included in the page layout to wrap header (above the header component), feature (below the main nav component), and footer (above the footer component) content in both the Core repository and university CMS (T4).

Styles

The area component intelligently removes the top and bottom margins of its contents to ensure consistent spacing.

Regular areas

Regular areas (.cwf-area) will remove the top margin of its first piece of content and the bottom margin of its last piece of content.

Full-width areas

Full-width areas (.cwf-area.cwf-area--full-width), or areas that are to span the entire width of the viewport, will remove top and bottom margins from all pieces of content to ensure there's no empty space between them.

Accessibility

Area components should use ARIA landmarks to identify regions of a page in order to ensure their contents remain contextual to assistive technologies; This is commonly an <aside> element, which is a complementary landmark.

T4 implementation

The area component is not tied to a specific content type. It is included in the Compass T4 page layout CSS, and is used by the page layout to contain any non-landmark elements in the "Site-Header", "Site-Nav", and "Site-Footer" global sections, as well as local header and footer areas.

Non-landmark elements, as classified by the Compass T4 page layout and defined by the W3C's ARIA Landmarks Example, are any elements that don't have an inherent role. HTML elements with an implied landmark role are:

• <header> - Such as the Compass header content type
• <nav> - Such as the Compass navigation content type
• <main> - Such as the main content on any Compass webpage
• <footer> - Such as the Compass footer content type
• <aside> - Such as the right sidebar on any Compass webpage
• <section>
• <article>
• <form> - Such as the Compass form component

Examples

The following examples are for eductional purposes only. Areas should not be used within the main column of content in production.

Regular area

The following is an example of a regular area. It removes the top margin from its first piece of content and the bottom margin from its last piece of content.

Full-width area

The following is an example of the full-width area. It removes all margins from its contents.