Accelerating the Tennessee Valley automotive industry

Style Guide

This is an introductory section. Text here will appear slightly larger than the body copy below. This content would be good to use as the meta description text (see meta info section below).

A thumbnail image can be added here by inserting an image at the beginning of the paragraph, clicking the left align button in the toolbar, then scaling it down to the desired size. More info on images below.

This is the main body of the page. You can type just as you would in any word processor. Hitting enter will create a new paragraph—no need to press it twice. You can also press “Ctrl + Z” to undo, or use the toolbar button.

Page Properties

In order to help search engines find these pages, we need to provide a title and description. This meta information can be access by clicking “Edit → Edit Page Properties”. Every page must have a unique title and description.

We recommend keeping descriptions under 150-160 characters. Titles may be prefixed with “DRIVE! | ” if desired and should be as short and to the point as possible. 

Text Elements

The toolbar buttons can be used to create lists and tables, as well as add basic formatting like bold, italics, and superscript.

  • Item 1
  • Item 2
  • Item 3

To stop a list, press Enter twice or click the list button again.

  1. First item
  2. Next item
    • Sub item
    • Another sub item
  3. Last item

To create subitems, click the indent button while the cursor is on a list item. To switch the bullet type for a subitem, just click the list button of the type you want. The symbol can't be changed, only whether a square or numerals are used.

If you need to display a table of data, you can insert a table using the table button in the toolbar.

Car Prices
MakeModelYearMSRP
Volkswagon Golf 2015 $18,815
Volkswagon e-Golf 2015 $36,145
Volkswagon Beetle 2015 $19,515

Headings

To insert a heading, click the “¶” button in the toolbar and choose a heading level from the drop-down menu. For SEO and accessibility reasons, don‘t use “Heading 1” in this section. Instead, start with ”Heading 2” and continue increasing the level for subsequent sub-sections.

Some headers are styled in all caps, while others are not. This is automatic and should not be altered in order to maintain consistency. The margin before and after headings is also automatic. Changes to the default heading styles should be done in the CSS by a developer.

Here are all of the heading style:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

It's unlikely that a page will require “Heading 5” or “Heading 6,” but they exist just in case (HTML only supports up to 6 heading levels).

Since many assistive device users navigate webpages by headings, it's important to choose headings based on their content, not visual appearance. Only increase a heading level when your content is a subsection of the previous heading, otherwise use continue using the same heading level.

Images

Images can be inserted anywhere in this section. By default they will span the width of the column, or be centered if they are not wide enough.

Map of the Tennessee Valley region

Please make sure to add description text when inserting an image. If you forget, simply double-click the image to access its properties. This text will be used by screen readers to describe the image to visually impaired users.

Map of the Tennessee Valley regionImages can be aligned to the left or right by selecting the image and clicking the text align left/right buttons in the toolbar. On smaller screens, these images will be centered and the text will break to a new line.

Map of the Tennessee Valley regionImages can also be hyperlinked by selecting the image and clicking [+] → “Link…”, or using the shortcut Ctrl + K. This is the same for hyperlinking text—select the text to link then click the “Link…” link (that's a lot of links!). We recommend not opening links in a new window, even for PDFs. This is bad for accessibility and takes the choice of whether to open a link in a new window/tab away from the user. There's a good explanation in this CSS-Tricks article if you want more information.

Videos

Videos can be inserted using the embed code provided by the video's provider. We recommend using YouTube to host videos due to its larger audience, but Vimeo will also work.

YouTube

In YouTube, click Share → Embed and copy the code. To insert the video on the page, click [+] → “Code snippet…” and paste the code, which should look something like this:

<iframe width="560" height="315" src="//www.youtube.com/embed/d0UqfGCKX98" frameborder="0" allowfullscreen></iframe>

You‘ll see a big black box in the CMS when the video is inserted, but don't worry, it will display properly when the page is published.

Vimeo

To embed a Vimeo video, the process is the same except that the embed code can be found by hovering over the video player and clicking the “Share” button.

Note that the Vimeo embed code contains some extra text with the video's title and attribution. Feel free to delete that, it won't affect the video player.

Editing the Source Code

If you are comfortable coding in HTML, you can edit the source code directly by clicking the code button (last in the toolbar). Please avoid adding custom styles in order to maintain a consistent design system.

Map of the Tennessee Valley

The Tennessee Valley region is home to six major automotive manufacturers with a supply chain of over 900 mostly small- and medium-sized businesses, employing more than 100,000 people.

Read About Us