Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

More typography

Paragraph text with emphasis, strong, link.

Text with class "smallest"

Text with class "smaller"

Text with class "larger"

Text with class "largest"

Text alignment utility classes:

"left"

"center"

"right"

Float utility classes: "floatLeft" and "floatRight"

Text with class "title"

Text with class "title-sub"

Text with class "title-sub-alt"

Unordered list:

• One
• Two
• Three

Ordered list:

1. One
2. Two
3. Three

With class "noBullet":

• One
• Two
• Three

With class "noIndent":

• One
• Two
• Three

With class "bulletSquare"

• One
• Two
• Three

Unordered list of links with class "linkList":

• One
• Two
• Three

Mark

Small

Computer code

Keyboard phrase

Sample text

Inline quotation

Formatted

Colors

Background colors

Pink Line

Red Line

Blue Line

Brown Line

Green Line

Orange Line

Purple Line

Purple Line Express

Yellow Line

Sign Grey

Text colors

Red Line

Blue Line

Brown Line

Green Line

Orange Line

Purple Line

Purple Line Express

Pink Line

Yellow Line

Tables

"Formee" form elements

Buttons

Button
Button class btn
Button class btn-alt

Grid system

12 columns. It seems we are using 960 Grid System, modified so that the columns widths are percentages rather than fixed pixel widths.

• Width classes: grid_1, grid_2, grid_3, etc.
• Source order: push_XX and pull_XX
• Starting at other than first column: prefix, suffix

Card box, card panel, card grid

Card box

Card panel

Card grid

Card aspect ratios:

• [data-aspect-ratio="3:1"]
• [data-aspect-ratio="7:3"]
• [data-aspect-ratio="2:1"]
• [data-aspect-ratio="16:9"]
• [data-aspect-ratio="3:2"]
• [data-aspect-ratio="4:3"]
• [data-aspect-ratio="1:1"]
• [data-aspect-ratio="3:4"]
• [data-aspect-ratio="2:3"]
• [data-aspect-ratio="9:16"]
• [data-aspect-ratio="1:2"]
• [data-aspect-ratio="1:3"]
• [data-aspect-ratio="19:11"]

Collapsible sections

Info block

Rail nav

Tabs

Note that tabs cannot be used to show and hide content on the same page--clicking on a tab navigates to a different page. For show/hide on the same page, use collapsible sections.

Breadcrumbs

Icons

SVG icons

IMG icons

 

Event list

Document list

Page templates

Page templates control the overall layout of the page. We have:

• 1 Column. Example: When You're Ready, We're Ready
• 2 Column With Left Rail. Example: Slideshow Details
• 2 Column With Left Rail (Full Width Hybrid). Unused.
• 2 Column With Right Rail. This one is used the majority of the time. Example: Bike & Ride
• 2 Column With Right Rail (Full Width Hybrid). Example: Accessibility

Proposed edits

Revised pattern: Info Block

Our current Info Block doesn't seem to have much to do with the rest of our design language. Example.

At the same time, authors have been created callout-type patterns for themselves inline, somewhat inconsistently. Examples:

• Tips & info - CTA (transitchicago.com)
• U-Pass - Fare information - CTA (transitchicago.com)
• Accessible transit - CTA (transitchicago.com)
• CTA School Administrator Information for Ventra Student Cards - CTA (transitchicago.com)
• Human Resources Benefits Services - CTA (transitchicago.com)
• Careers - Info & Job Postings - CTA (transitchicago.com)
• Accessibility Features - CTA (transitchicago.com)

I propose that we revise the Info Block pattern and use it to replace the one-off designs in a standardized way:

This will be particularly handy once we update CKeditor and get the "div container" button in the editing toolbar, so that authors can use this without knowing the markup.

<div class="info-block">
<p>I&#39;m an Info Block!</p>
</div>
===
.info-block {
    border: unset; /* this is just to overwrite the existing info-block border */
    margin: 1em 0;
    padding: 1em;
    background-color: #f3f3f4;
    border-left: 4px solid #0065BD;
    border-radius: 2px;
}

.info-block > *:first-child {
    margin-top: 0;
    }
    
.info-block > *:last-child {
    margin-bottom: 0;
}

Styling for blockquote

The Chicagoland Chamber of Commerce is committed to helping Chicago safely reopen so we can bring employees back to the worksite and get our economy back on track. We must ensure our workers have safe, affordable, and reliable transportation options, and the Chamber is proud to partner with the CTA, see them make transit safe again, and support riders returning to transit.

We don't currently have any styling for blockquotes on the site. I have found a few places where it would be useful to have blockquotes styled:

• We value our veterans - Careers
• Red and Purple Modernization Program "What Others Are Saying"
• When You're Ready, We're Ready

blockquote {
    margin: 1em 0;
    position: relative;
    padding-left: 3em;
}

blockquote:before {
    content: '\201C';
    font-size: 6em;
    color: #0065BD;
    position: absolute;
    left: 0;
    font-family: Georgia;
    margin-top: -2rem;
}

Styling for figcaption

We don't currently have any styling for figcaption elements on the site. But authors have been inventing their own "caption" style for captions that are not terribly semantic:

• Tips & info - CTA (transitchicago.com)
• Charter a CTA train - CTA (transitchicago.com)

With the upcoming CKeditor upgrade, we'll have the ability to add captions to figures in the WYSIWYG using the proper figcaption markup. Let's keep the styling simple:

figcaption {
    font-style: italic;
}

New pattern: C2A Link

Authors have been inventing their own styling inline to make certain links more prominent. Examples:

• Accessible transit
• CTA 95th/Dan Ryan Station Improvements

Problems with this:

• Inline styles mean that we can't update them globally if necessary
• Lack of consistency across site
• The green links don't meet WCAG color constrast guidelines

Goals:

• Create a style that can be used in a uniform way across the site
• Make sure we are meeting WCAG guidelines
• Add it to CKeditor so authors can easily use it

I'm calling these "call to action links" and abbreviating that as "C2A" to avoid the abbreviation "CTA."

My first thought was, is there something we already have written that we could use? The closest thing I found was our "card panel" pattern. See for example the bottom of the Alerts page.

However, there are two reasons why I think we need another pattern for a prominent link in addition to card panels:

• Card panels are big. If used within the text of a page, they can dwarf the headings and make the hierarchy of the page less clear. 
• Sometimes call-to-action-type links are placed inside another component--e.g. the masking callout on the homepage. Having a card panel link inside a card box, info block, or other container-type component would look awkward.

So here is what I came up with:

How to bring your bike on the bus

You can see it in use on:

• Bike & Ride
• When You're Ready, We're Ready

With just a single 'c2alink' class for authors to apply, this is something we could build into CKeditor without even having to require the use of a template.

<a class="c2alink" href="#">My link</a>
===
.c2alink {
    font-weight: bold;
}

@supports(-webkit-mask: url(#mask)) or (mask: url(#mask)) {
    .c2alink:after {
        content: '\00a0\00a0\00a0\00a0'; /* non-breaking spaces prevent the arrow from breaking onto a line by itself */
        -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.6,7.6l10.6,0.3L5.7,4.7L7,2.9L16.2,9l-9.3,6l-1.2-1.9l5.6-3.2L0.7,10.2c0.6,3.9,4.3,7,8.3,7.1c4.4,0.1,8.4-4,8.4-8.3s-4-8.3-8.3-8.3C5.1,0.6,1.3,3.7,0.6,7.6z' fill='%23004ea1'/%3E%3C/svg%3E") no-repeat 50% 50%;
        mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.6,7.6l10.6,0.3L5.7,4.7L7,2.9L16.2,9l-9.3,6l-1.2-1.9l5.6-3.2L0.7,10.2c0.6,3.9,4.3,7,8.3,7.1c4.4,0.1,8.4-4,8.4-8.3s-4-8.3-8.3-8.3C5.1,0.6,1.3,3.7,0.6,7.6z' fill='%23004ea1'/%3E%3C/svg%3E") no-repeat 50% 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        margin: 0 0.3em;
        background: currentColor;
    }
  }

New utility: "inverted"

We have utility classes to add background colors from our color palette (see above). However, we don't have a good way to make sure the content displayed on that background has sufficient contrast. I propose an "inverted" utility class to turn text white when used on dark backgrounds.

.inverted,
.inverted h1,
.inverted h2,
.inverted h3,
.inverted h4,
.inverted h5,
.inverted h6,
.inverted a
 {
    color: #fff;
}

.inverted a:hover,
.inverted a:active,
.inverted a:focus {
    color: #e6e7e8;
}