FTI Technology Style Guide

Colors

Headings (also this happens to be an H2 inside a large-h2 div)

This is a page title (H1)

An H2 subheading that usually goes under the page title.

Yet another type of subheading that we use a lot to break up major sections of pages. (H3)

An H4, we'll use these a lot as the heading to a list. (H4)

Not quite as important header here (H5)
Not 100% sure we have even used one of these on the site... maybe? (H6)

Content styles

This is a standard paragraph. You can add bold text as well as italicized text for emphasis. I always like to have a few lines of text for a test paragraph so I'm going to tell a quick story; Once upon a time there was a guy who loved to draw. He would draw pictures of things outside, made-up places, people he knew, and pretty much anything he could imagine. One day he sat down at a computer for the first time and thought to himself, "Wow, I'll bet I could draw with the computer." Then he became a huge nerd. A few years later the same guy was working on his computer and saw a piece of paper on the edge of his desk. Inspiration struck and our hero said to himself, "I'll bet I could write code on that." What a huge nerd.

This paragraph has the "smaller" class making the font slightly, well, smaller. Well named.

This would be a great place for an H3

Which reminds me of a useful list for style guides:

  • Make sure to add a list.
  • Always add at least 2 items to that list.
  • When in doubt add a nonsense third line.

Sometimes you want a list of links like this:

Sometimes you want a fancy icon next to your text. Don't be alarmed, exclamation points can good!

Scan sensitive data icon

You may be wondering why we have the exclamation point icon to the left of this section. Well, to answer that question you need to imagine yourself in the shoes of a designer. It's been a long day and you have fulfilled request after never-ending request and you're ready to go to the grocery store hungry. You get an email at 4:47. The email says, "Hey designer, we need an icon pronto. We want it to convey a feeling of security. Also, we need it first thing in the morning." Now you're an excellent designer but you have plans for the evening and want to get this done before you walk out the door. Boom! Out comes the trusty exclamation point. Between exclamation points and gears you can design anything.

Let's show a resource

A "Table"

Course

Date

Time

Topics

Reviewer I
Mon., 4/11
2:00 PM – 4:00 PM EST
  • Getting Started
  • Navigating Ringtail
  • Selecting and Displaying Documents
  • Personalizing the Ringtail Workspace
  • Working with Assignments
  • Coding Documents and Applying Annotations
  • Using Concept Clustering To Guide Review
Reviewer II – Part 1
Tue., 4/12
2:00 PM – 4:00 PM EST
  • Coding Multiple Documents
  • Search Techniques, Results and History
  • Reviewing Documents Using E-Mail Threading
  • Working with Transcripts
Reviewer II – Part 2
Thu., 4/14
2:00 PM – 4:00 PM EST
  • Working with Mines
  • Working with Cubes
  • Working with Produced Documents
  • Printing Documents and Using Report Templates

Footnotes Styling

1  Computerworld article: “Data Growth Remains IT’s Biggest Challenge, Gartner Says” by Lucas Mearian, November 2010
2  IT Key Metrics Data 2014: Key Infrastructure Measures: Storage Analysis: Current Year, by Jamie Guevara, Linda Hall and Eric Stegman, Gartner, December 13, 2013.
3  RAND Study: Where the Money Goes, 2012
4  CSC Study “Data Revolution” 2011
5  High Scalability Blog post “How Big is a Petabyte, Exabyte, Zettabyte, or a Yottabyte?” September 2012
6  IDC Study: The Digital Universe of Opportunities: Rich Data and the Increasing Value of the Internet of Things, April 2014
7  IBM and Ponemon Institute Research study: 2014 Cost of Data Breach Study: United States, May 2014