Layout
Underlying structures on which all content is presented
Grid
Spark uses a 4, 6, and 12-column, responsive grid for mobile, tablet, and desktop viewports (respectively) with fixed-size
16px gutters.
Spacing
| Label | Value |
|---|---|
| Horizontal gutter (between columns) |
16px |
| Max-width (for content) |
1170px |
Maximum column widths
Max-widths for groups of columns, used in layout and page-section sizing. Totals include column widths plus inside gutters.
| Number of Columns | Max-width in Pixels |
|---|---|
| 1 | 83px |
| 2 | 182px |
| 3 | 281px |
| 4 | 380px |
| 5 | 478px |
| 6 | 578px |
| 7 | 676px |
| 8 | 774px |
| 10 | 975px |
Grid example
This is a responsive example of the grid setup. For mobile, tablet, and desktop breakpoints, the recommended column-count is 4, 6, and 12, respectively.
Accessibility
Grids should adhere to proper keyboard and screen-reader accessibility usage guidelines as documented by W3C
Gutters and spacing
The basic grid uses fixed,
16px gutters between columns. Other content arranged in a grid or in columns should also use a
16px gutter between items, horizontally.
Refer to the Spacing page for more contextual examples of spacing and gutter specs.
Content column templates may diverge slightly, with larger gutters between columns.
Breakpoints
| Label | Max-width |
|---|---|
| Mobile (base) | 320px |
| Modern |
375px |
| Phablet |
504px |
| Tablet |
768px |
| Desktop |
980px |
| Desktop-plus |
1170px |
Header templates
Top-of-page content templates. Used above content column templates.
Primary hero: Top-level hero section with heading text overlay. Used in conjunction with content column templates. These pages would not require the breadcrumb navigation.
Examples: homepage
Secondary hero: Page information represented in text with navigational links, proper heading markup and styles, and an interchangeable Hero area.
Examples: Research, M, MM, MMY, Videos
Content column templates
Content column layouts.
Single-column: Displays 12-column section. View example
Examples: homepage, DPP, MLP, MMY, SIY, landing pages
Right-rail fixed width: 300-pixel wide fixed width right sidebar with fluid content area. View example
Examples: TBD
Right-rail content: Displays 8-column section left, 3-column section right. 9th column is intentionally content-free for optimal contrast between the two sections. Right rail displays supplemental content. View example
Examples: VDP, editorial pages
Right-rail tight: Displays a 9-column content area and a 3-column section on the right. View example
Examples: Editorial Awards
3-column: Displays a 6-column content area in the middle, a 3-column section on the left, and a 3-column section on the right. View example
Examples: Editorial article view
Left-rail filters: Displays 3-column section left, 9-column section right. Left rail displays guided navigation filters. View example
Examples: SRP
Card column guidelines
Cards should be displayed with the following criteria in mind:
- Respect the inherent minimum width of the card itself: These rules will be set with the Card component itself.
- Aesthetically fit as many per row as desired: Achieve the best experience by placing cards as they look best.
- Contextually fit the rest of the page’s contents: Match existing content and number of displayed cards to achieve a uniform display.
Example 1 - Responsive, 280px min-width cards up until 3-column desktop display
Menus & navigation
Global navigation is defined as any user interface elements that contain navigational links and are present on every user-accessible page of the website. Examples include the global header and the global footer.
Sub-navigation is defined as menus or links that are displayed in a uniform fashion across a specific area of the website. An example includes the navigation bar in News & Videos, which contains a menu of links to pages in the News & Videos section of Cars.com, as well as a search box.