Style Guide - Bridgespan Group

This style guide includes the base colors, typography, and styles for the bridgespan.org website.


Colors


Typography


Buttons

Primary Button

<a href="https://www.bridgespan.org" class="button">Primary Button</a>
Secondary Button

<a href="https://www.bridgespan.org" class="button button-secondary">Secondary Button</a>
Hollow Primary Button

<a href="https://www.bridgespan.org" class="button button-primary-hollow">Hollow Primary Button</a>
Hollow Secondary Button

<a href="https://www.bridgespan.org" class="button button-secondary-hollow">Hollow Secondary Button</a>
Solid Button

<a href="https://www.bridgespan.org" class="button button-solid">Solid Button</a>
Register now

<a href="https://www.bridgespan.org" class="button icon-button">
   <span class="button-wrapper">
     <span class="ico-calendar button-icon"></span>
     Register now
   </span>
</a>
See icon options
Outlined Button

<a href="https://www.bridgespan.org" class="button button-outlined">Outlined Button</a>

Icons

   <span class="ico-calendar" style="font-size: 30px"></span>
   <span class="ico-list" style="font-size: 30px"></span>
   <span class="ico-list-alt" style="font-size: 30px"></span>
   <span class="ico-grid" style="font-size: 30px"></span>
   <span class="ico-grid-alt" style="font-size: 30px"></span>
   <span class="ico-eye" style="font-size: 30px"></span>
   <span class="ico-chevrons-right" style="font-size: 30px"></span>
   <span class="ico-chevrons-right-alt" style="font-size: 30px"></span>
   <span class="ico-chevron-down" style="font-size: 30px"></span>
   <span class="ico-chevron-up" style="font-size: 30px"></span>
   <span class="ico-navigate_next" style="font-size: 30px"></span>
   <span class="ico-clear" style="font-size: 30px"></span>
   <span class="ico-download" style="font-size: 30px"></span>
   <span class="ico-download-alt" style="font-size: 30px"></span>
   <span class="ico-arrow-left" style="font-size: 30px"></span>
   <span class="ico-arrow-left-alt" style="font-size: 30px"></span>
   <span class="ico-menu" style="font-size: 30px"></span>
   <span class="ico-search" style="font-size: 30px"></span>
   <span class="ico-share" style="font-size: 30px"></span>
   <span class="ico-facebook" style="font-size: 30px"></span>
   <span class="ico-facebook-square" style="font-size: 30px"></span>
   <span class="ico-linkedin" style="font-size: 30px"></span>
   <span class="ico-linkedin-square" style="font-size: 30px"></span>
   <span class="ico-youtube" style="font-size: 30px"></span>
   <span class="ico-twitter" style="font-size: 30px"></span>
   <span class="ico-google" style="font-size: 30px"></span>
   <span class="ico-instagram" style="font-size: 30px"></span>

Quotes and Callouts

Blockquote

"Growing up undocumented in this country has built resiliency in ourselves. We are now using some of those same strategies as an organization, to make sure we can not only survive this crisis, but come out of it even stronger."
Viridiana Carrizales, Co-founder, CEO, and Board President, ImmSchools
<figure class="quote">
  <blockquote>"Growing up undocumented in this country has built resiliency in ourselves. We are now using some of those same strategies as an organization, to make sure we can not only survive this crisis, but come out of it even stronger."</blockquote>
  <figcaption>Viridiana Carrizales, Co-founder, CEO, and Board President, ImmSchools</figcaption> </figure>

Callouts

1/3 Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-left">Callout text</div>

1/3 Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-right">Callout text</div>

50/50 Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-half callout-left">Callout text</div>

50/50 Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-half callout-right">Callout text</div>

Full Width Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-full">Callout text</div>

1/3 Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-left callout-secondary">Callout text</div>

1/3 Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-right callout-secondary">Callout text</div>

50/50 Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-half callout-left callout-secondary">Callout text</div>

50/50 Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-half callout-right callout-secondary">Callout text</div>

Full Width Callout: Body Text With Colored Background [H3 with hyperlink option]

This is basic info section with just text that runs the full width of the column. We have the option to display a title or not (useful for combining sections under a single heading) as well as to make the title a link (like the title on this one--but the design doesn’t make it easy to tell visually--we should address that for ADA reasons. Or maybe we eliminate the ability to use them as links altogether?) We can also choose to remove the separating border rule if we want sections to more clearly merge with each other.

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.

<div class="callout callout-full callout-secondary">Callout text</div>

Utilities

Desktop/Tablet/Mobile Hide/View Code
(Can replace <span> with <div> in some cases, such as bulleted lists.)

This text will show at 768px screen width and up <span class="hide-mobile">This text will show at 768px screen width and up</span>
This text will show only below 768px screen width <span class="hide-tablet">This text will show only below 768px screen width</span>
This text will show below 1200px screen width <span class="hide-desktop">This text will show below 1200px screen width</span>

Page Builder Widgets

Accordion

Optional accordion title

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod 

maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod 

maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Baseball Cards

Client Logo Grid

Color Logo Grid - Solid

Optional description content.

  • Azim Premji
  • Give
  • JB & MK
  • JPB
  • Raikes
  • this is alt text

Color Logo Grid - Translucent

Optional description content.

  • Azim Premji
  • Give
  • JB & MK
  • JPB
  • Raikes
  • this is alt text

Grayscale Logo Grid - Solid

Optional description content.

  • Azim Premji
  • Give
  • JB & MK
  • JPB
  • Raikes
  • this is alt text

Grayscale Logo Grid - Translucent

Optional description content.

  • Azim Premji
  • Give
  • JB & MK
  • JPB
  • Raikes
  • this is alt text

Newsletter Subscription (work in progress)

Reusable Content Selector


Forms

At vero eos et accusamus

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Comments, questions, or concerns?
Just click the checkbox!

Video

Video
Video

Bio List

Simple Bio List

Card Bio List

Generic Hero

Short Image Hero



Tall Image Hero

Info Items

Unlinked Info Item

Unlinked Info Item

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo.

Linked Info Item

Linked Info Item

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo.
Custom link text

Linked Info Item - No Icon

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo.
Custom link text