The area component defines an area where other components can be used outside the main column or sidebar.
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).
The area component intelligently removes the top and bottom margins of its contents to ensure consistent spacing.
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 (
.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.
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.
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
<form>- Such as the Compass form component
The following examples are for eductional purposes only. Areas should not be used within the main column of content in production.
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.
The following is an example of the full-width area. It removes all margins from its contents.