A properly structured layout enforces an optimal, consistent experience across applications.
Layout
.main-container:
.main-container
is a vertical flexbox which wraps the following components:
- App-Level Alert
- Header
- Subnav
- Content Container
Note: Although Clarity does not have a footer component, a custom footer can be added in the main-container.
.content-container:
.content-container
is a horizontal flexbox which wraps the following components:
- Content Area
- Sidenav
Content Area
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio nisi. Vestibulum dignissim eget massa sit amet feugiat. Quisque auctor mattis quam eu suscipit. Morbi ipsum risus, feugiat vitae sem at, tincidunt elementum magna. Phasellus tristique posuere dui, ut tempus felis sagittis quis. Integer iaculis ultrices elit, sed venenatis eros. Vivamus interdum semper velit eget gravida. Sed finibus eget lacus sed semper. Suspendisse fringilla, tellus in molestie cursus, sapien purus volutpat lacus, eget venenatis erat est vitae libero. Aliquam et orci hendrerit, consequat purus non, imperdiet ipsum.
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
...
</header>
<nav class="subnav">
...
</nav>
<div class="content-container">
<div class="content-area">
...
</div>
<nav class="sidenav">
...
</nav>
</div>
</div>
Basic Structure
Two constants of an app built in Clarity are the header and content area. These are the blocks upon which you build your app model.

Header
The header is for branding and app-level elements such as navigation, search, and account settings.Content Area
The content area is where users focus their attention most of the time, gathering information and performing tasks–it is the canvas for your application. As the largest portion of your app, the content area is always visible.Layout
Your layout should reflect the information or workflow of the selected navigation. When laying out the content, keep the following in mind:
- The flow of content–how to create a hierarchy and layout that draws attention to the areas of importance
- The importance of designing to the grid
- How to aid users in completing their tasks
- How to handle large amounts of data
- Responsive design (if that is part of your product’s goals)
Common Layout Patterns
Content can consist of any of the Clarity components, or no components and just information. Following are common layout patterns and recommended usage. For information on navigation components, header, subnav, and sidenav, see Navigation.
Cards

Benefits of using cards include:
- Ability to see data in a collection
- Facilitates scanning of information
- Works well across platforms
Tables and Datagrids

A table is a static view. A datagrid provides users flexibility in viewing the data, including filtering and sorting.
Complex tables and datagrids work best on larger screens.
Forms

A benefit of a form is that users can see what information they must provide. Conversely, too many fields can discourage the user.
Inline forms are better than modals in cases where you don't want to block users from performing other actions.
Tabs

Tabs are not appropriate if users need to compare data across views.
White Space and Typography

Button Placement
In the content area, buttons are left-aligned, with the primary button in the leftmost position. This placement supports the F-pattern layout.

Do. Left-alignment puts buttons closest to the content.

Don't. On the right, buttons might appear separate from content.
Using Vertical Rhythm for Layout
Vertical rhythm is the repetition of spatial relationships in a design. A consistent rhythm gives elements a uniform and balanced placement in a design. The more consistent the design, the easier it is for users to read and understand.
The Clarity Baseline is 24px
All elements in Clarity are built in terms of 24px:
- The height of all components and text elements is in multiples of 24px.
- The vertical white space between elements is also in multiples of 24px.
Repeat 24px in Your Layout
Calculate the vertical margins and padding between elements using the Clarity baseline. A multiple of 24px can be a whole or half-ratio. Common numbers include: 6px, 12px, 18px, 24px, 30px, 36px, 42px, 48px, 54px, 60px, 66px, 72px.
Changing vertical rhythm with rem
Clarity uses rem units for its whitespace and sizing. If the 24px vertical baseline
is too large or too small for your needs, you can edit this globally across a Clarity application
by changing the font-size
style of the html
element, as in the example below.
html {
/* the following line of CSS would change Clarity to a 20px vertical rhythm with a 5px grid */
font-size: 20px;
}
Note that the declaration on the html
selector needs to happen
after the Clarity CSS has been loaded. Also note that the "grid" for Clarity layouts and
components is equal to one-fourth of the baseline. So instead of a 6px grid, the example above will
put your application on a 5px grid.