Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Step 1
Step 2
Additional information about this step.
Step 3
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.
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 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).
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.
We're utilizing Magnific Popup. This example is using the basic, default setting (as seen in sand.js). A list of options is available for customizing behavior from the documentation.
The pop-up <div> must have a unique id.
Any anchor element (<a>) can be a pop-up link. Simply add class popup-modal to the anchor element and set the href to the id of the pop-up <div> as "#id".
The default width of the pop-up <div> is 500px. The width can be increased by adding class mw-[pixel width]. Pixel widths are 600, 650, 700, 750, 800, 850, and 900.
1.4 M
people in San Diego
372
square miles
4,255
population per square mile in San Diego
Social Share
We're currently using the ShareThis plugin for social sharing, and overriding some default styles on hover.