Pattern Library

Components

Accordion

Example 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example 4 (with sub-accordions)

Question

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Question

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Byline

Steps

Stacked

Step 1

This is the first step.

Step 2

This is the second step.

Additional information about this step.

Step 3

This is the third step.

Additional information about this step.

Stacked steps allow additional information under the step title.

The background color of the step number can be changed.

In the code, note the visually hidden text that says "Step" in the step number. This provides additional context to the numbers for those who use screen readers.

Tiled

Step 1

This is the first step.

Step 2

This is the second step.

Step 3

This is the third step.

Step 4

This is the fourth step.

Step 5

This is the fifth step.

Must have wrapper <div> with class step-tiles.

Text should be brief to prevent tall boxes.

The width of the step can be changed by adding cell width classes like medium-4 to the <div> with class step.

The background color of the step number can be changed.

In the code, note the visually hidden text that says "Step" in the step number. This provides additional context to the numbers for those who use screen readers.

Tool Tips

Tool tip below the icon Bottom Tooltip Content

Tool tip on the right side of the icon Right Tooltip Content

Hover over the question marks to see the tool tips. The width of the tool tip can be changed with classes tooltip--wide (200px), tooltip--wider (400px), and tooltip--widest (600px).

Pop-up Link

Popup Window

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Stat Blocks

1.4 M

people in San Diego

372

square miles

4,255

population per square mile in San Diego