Components

Social Share

We're currently using the ShareThis plugin for social sharing, and overriding some default styles on hover.

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 (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.

Notes

Wrap each group of accordion items in a container with .js-toggle-accordion. This class controls the on click event to open the accordion; this code is location in main.js.

Post Meta

Steps (1-10)

1

Occupancy: Is your project complete?

2

Site Information: Are there site constraints on your project?

Additional information about this step.

3

Discretionary Review: Does your project require special approvals?

4

Plan Review: Does your project comply with building and land development codes and municipal codes?

Additional information about this step.

Step outlines are a unique element, so they have a set of unique class names. Wrap the groups of steps in a .steps__wrap, then give each individual step .step__single. The title and description also have individual classes. Lastly, try to find an icon that relates as best as possible to what's being described.

Weather

73°

San Diego
Weather

The weather widget utilizes a modifier of .card.

Tools Tips

What's this? Bottom Tooltip Content

Left Tooltip Content What's this?

Maps

With multiple locations and location types

Nearby Events
Jul 4
Big Bay Boom

Fourth of July fireworks

Learn More

Jul 8
Comic Con

San Diego Comic Con 2015

Learn More

Jul 10
Concert in the Park

Free summer concerts in the park

Learn More

Nearby Attractions
Gaslamp Museum

Programs and tours offered through the William Heath Davis House

Learn More

Star of India

The world's oldest active sailing ship

Learn More

San Diego Zoo

The World Famous San Diego Zoo

Learn More

Single location, full width

Here, we're using the Google Maps Javascript API. Options are set up in main.js. Create a wrapper of #single-map for a single location, and #multi-map for multiple locations.

Drupal may have a Google Maps widget or tool that sets this script up differently. If so, be sure to include the identifying marker images and locations when initializing.

Stats Block

1.356 mm

people in San Diego

372

square miles

Stats cards use a modifier of .card.