Source: styleguide/styleguide.less, line 319

7.1 #permalink Metric Card

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A card for showing a metric along with an optional link. Used in PE extensively. Comes in a variety of colors.

Examples
Default styling
Metric
1234
units
Details
.ggPrimary1
Orange
Metric
1234
units
Details
.ggPrimary2
Blue
Metric
1234
units
Details
.ggPrimary3
Green
Metric
1234
units
Details
.ggPrimary5
Grey
Metric
1234
units
Details
.ggSecondary1
Blue
Metric
1234
units
Details
Markup
<div class="col_defaultBg box_padded1">
<div class="metricCard metricCard_[modifier class] grid-12 grid-md-6 grid-lg-3 layout_center">
  <div class="metricCard-title triangle-parent box_padded1">
     Metric
     <div class="triangle triangle_bottom triangle_[modifier class]"></div>
  </div>
  <div class="metricCard-body col_white box_verticalPadded4 layout_center">
     <div class="metricCard-metric">1234</div>
     <div class="metricCard-label">units</div>
  </div>
  <a class="metricCard-subLink link_subtle box_verticalPadded1 layout_rel col_white" href="#">
     <span class="metricCard-subLinkText">
        Details
     </span>
  </a>
</div>
</div>
Source: modules/07_large_elements/metricCard.less, line 4

7.2 #permalink Options Card

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A card with a title, space for information, and some buttons below it, used so far for wayfinding / disambiguation. It rises a bit out of its container on purpose

Examples
Default styling
ggPrimary1
primary1
ggPrimary2
primary2
ggPrimary3
primary3
Markup
<div class="col_defaultBg box_padded2">
<div class="optionsCard optionsCard_[modifier class] grid-12 grid-md-4 box_horizontalPadded1 box_bottomPadded6 box_md_bottomPadded0 layout_center">
   <h2 class="optionsCard-title text_title text_fontSizeLarger box_verticalPadded1 col_whiteText"><a class="col_inherit" href="www.google.com">Title</a></h2>
   <div class="triangle-parent">
      <div class="triangle triangle_small triangle_bottom triangle_[modifier class]"></div>
   </div>
   <div class="optionsCard-body col_white box_horizontalPadded4 box_verticalPadded3">
      <p class="box_bottomPadded2 js-equalHeight">
         Put some text here
      </p>
      <a class="btn btn_simple btn_transparent btn_[modifier class] box_bottomMargin2" href="www.google.com">Learn More</a>
   </div>
   <a class="optionsCard-option box_verticalPadded1 layout_rel" href="www.google.com">
      <span class="optionsCard-optionText text_fontSizeSmall col_defaultText">
         Link 1
      </span>
   </a>
   <a class="optionsCard-option box_verticalPadded1 layout_rel" href="www.google.com">
      <span class="optionsCard-optionText text_fontSizeSmall col_defaultText">
         Link 2
      </span>
   </a>
   <a class="optionsCard-option box_verticalPadded1 layout_rel" href="www.google.com">
      <span class="optionsCard-optionText text_fontSizeSmall col_defaultText">
         Link 3
      </span>
   </a>
</div>
</div>
Source: modules/07_large_elements/optionsCard.less, line 4

7.3 #permalink Thermometer

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A "thermometer" displaying the partial progress of an accumulating value (such as a project's funding level toward its goal).

The macro takes two arguments: the amount raised and the amount remaining

Example
 
Markup
  <div class="thermometer box_topMargin3">
    <div class="thermometer-percentRaised" style="width: 60%;">&nbsp;</div>
  </div>
Source: modules/07_large_elements/thermometer.less, line 4
Examples
Default styling
large
large tiles
Markup
<div class="grid-12 grid-lg-6 grid-spacer tile-[modifier class] js-tileMain">
   <script type="text/javascript" src="/styleguide/public/tile.js"></script>
   <script type='text/javascript'>
      var outputRoot = document.getElementsByClassName("tile-[modifier class]")[0];
      var tile = gg.templates.tile({
            size        :  "[modifier class]",
            projectUrl  :  "/20304/",
            projectTitle:  "Main Text",
            imgSrc      :  "/pfil/20304/pict_featured.jpg",
            preText     :  "Small text above main text",
            srcset      :  "/pfil/20304/pict_featured.jpg 480w, pfil/20304/pict_featured_large.jpg 920w, /pfil/20304/pict_featured_jumbo.jpg 1840w",
            srcsizes    :  "(min-width: 64em) 50vw, 100vw",
      });
      outputRoot.innerHTML = tile;
   </script>
</div>
Source: modules/07_large_elements/tile.less, line 4

7.5 #permalink Tabs box

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A box with tabs. Make sure the order of the tabsBoxes matches the order of the tabsBox-tabs and the heavy lifting of showing the right content will be handled by the attached javascript.

Example
first tab content
Markup
<script type="text/javascript">deferred.push(function(){loadJS("/v2/js/modules/tabsBox.js");});</script>
<div class="grid-parent">
  <div class="grid-6 box_rightPaddedHalf layout_centerVertical grid-parent tabsBox-tab tabsBox-tab_selected layout_rel">
    <a href="javascript:void(0);" class="grid-12"><span class="link_linkify"></span>First tab</a>
  </div>
  <div class="grid-6 box_leftPaddedHalf layout_centerVertical grid-parent tabsBox-tab layout_rel">
    <a href="javascript:void(0);" class="grid-12"><span class="link_linkify"></span>Second tab with a long name</a>
  </div>
</div>
<div class="border_default">
  <div class="tabsBox-content">first tab content</div>
  <div class="tabsBox-content" style="display:none;">second tab content</div>
</div>
Source: modules/07_large_elements/tabsBox.less, line 4
Example
show modal
Markup
   <a href="javascript:void(0)" class="js-open">show modal</a>
   <div class="modal" style="display:none;">
      <div class="modal-inner">
         <div class="sprite sprite_close_gray layout_abs layout_abs_topRightInside js-close"></div>
         <div class="js-modalBody">modal info goes here</div>
      </div>
   </div>
   <script type="text/javascript">
      //see also modal.bsfy
      deferred.push(function(){
         $('.js-close').click(function(){$('.modal').hide()});
         $('.js-open').click(function(){$('.modal').show()});
      });
   </script>
Source: modules/07_large_elements/modal.less, line 7

7.7 #permalink SidePhoto

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

A compound element with a photo on one side and text next to it at large sizes, which flows below it on mobile. sidePhoto_tall is a taller element on larger screens, and sidePhoto_lg is the same, but the breakpoint is at lg instead of md.

Example

Side Photo

blurb with some text and stuff. let's add some more words.

button
Markup
   <div class="grid-12 layout_inlineBlock layout_rel layout_alignRight layout_centerVertical col_defaultBg layout_heightAuto">
      <a href="www.google.com" class="img-bg grid-12 grid-md-6 layout_abs_left img-bg-cover sidePhoto" style="background-image:url(/img/banners/sidePhoto_1.jpg);"></a>
      <div class="grid-12 grid-md-6 box_horizontalPadded4 box_verticalPadded5 layout_center">
         <h3 class="box_bottomMargin2 col_ggPrimary1Text"><a class="col_inherit" href="www.google.com">Side Photo</a></h3>
         <p class="box_bottomPadded2">blurb with some text and stuff. let's add some more words.</p>
         <a class="btn btn_simple btn_transparent text_fontSizeSmaller btn_ggPrimary1" href="www.google.com">button</a>
      </div>
   </div>
Source: modules/07_large_elements/sidePhoto.less, line 2

7.8 #permalink GG Slideshow

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Lightweight slideshow handling the auto-hiding arrows at the right and left, and associated javascript to preload the photos and handle the arrow navigation.

Example
Markup
<div class="ggSlideshow col_whiteText layout_center">
  <a href="javascript:void(0)" class="ggSlideshow-left grid-2 col_ggPrimary5Dark col_inherit layout_center text_fontSizeJumbo layout_centerVertical grid-parent"><div class="layout_centerBoth">&lsaquo;</div></a>
  <a href="https://www.globalgiving.org/pfil/14256/pict_original.jpg" class="js-slideshowLink">
    <img
      alt="Picture 1"
      src="https://www.globalgiving.org/pfil/14256/pict_original.jpg"
      class="js-slideshow"
      data-slideshow="0"
      style="max-width:100%"
    />
  </a>
  <a href="javascript:void(0)" class="ggSlideshow-right link_subtle grid-2 col_ggPrimary5Dark col_inherit layout_center text_fontSizeJumbo layout_centerVertical grid-parent"><div class="layout_centerBoth">&rsaquo;</div></a>
</div>
<script type="text/javascript">
  gg.slideshow = [
    "https://www.globalgiving.org/pfil/14256/pict_original.jpg",
    "https://www.globalgiving.org/pfil/14256/ph_14256_78491.jpg",
    "https://www.globalgiving.org/pfil/14256/ph_14256_51856.jpg",
    "https://www.globalgiving.org/pfil/14256/ph_14256_51857.jpg",
    "https://www.globalgiving.org/pfil/14256/ph_14256_51858.jpg"
  ];
  deferred.push(["loadJS","/v2/js/modules/ggSlideshow.js"]);
</script>
Source: modules/07_large_elements/ggSlideshow.less, line 2