styleguide/styleguide.less
, line 344
7.1 #permalink Metric Card
A card for showing a metric along with an optional link. Used in PE extensively. Comes in a variety of colors.
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>
modules/07_large_elements/metricCard.less
, line 4
7.2 #permalink Options Card
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
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>
modules/07_large_elements/optionsCard.less
, line 4
7.3 #permalink Thermometer
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
Markup
<div class="thermometer box_topMargin3">
<div class="thermometer-percentRaised" style="width: 60%;"> </div>
</div>
modules/07_large_elements/thermometer.less
, line 4
7.4 #permalink Tile
A tile like the one used in the featured projects section
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>
modules/07_large_elements/tile.less
, line 4
7.5 #permalink Tabs box
A box with tabs. Make sure the order of the tabsBox
es matches the order of the tabsBox-tab
s and the heavy lifting of showing the right content will be handled by the attached javascript.
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>
modules/07_large_elements/tabsBox.less
, line 4
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').on('click',function(){$('.modal').hide()});
$('.js-open').on('click',function(){$('.modal').show()});
});
</script>
modules/07_large_elements/modal.less
, line 7
7.7 #permalink SidePhoto
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
.
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>
modules/07_large_elements/sidePhoto.less
, line 1
7.8 #permalink GG Slideshow
Lightweight slideshow handling the auto-hiding arrows at the right and left, and associated javascript to preload the photos and handle the arrow navigation.
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">‹</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">›</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>
modules/07_large_elements/ggSlideshow.less
, line 2