An official website of the United States government
Here’s how you know
Official websites use .gov A
.gov website belongs to an official government
organization in the United States.
Secure .gov websites use HTTPS A
lock (
) or https:// means you’ve safely connected to
the .gov website. Share sensitive information only on official,
secure websites.
Special Publication:
Public Website Visual Style Guide
August 2015
Media and Images
Use the approved dimensions and file sizes below to apply media and images to the website. As a general rule, all images should be a minimum of 3600 pixels wide at 72 dpi.
HTML Tags, Styled
Expand or close the following content.Audio <audio>
Output
Code
<audiocontrols><sourcesrc="media/audio/sample_audio_mp3.mp3"type="audio/mpeg"><sourcesrc="media/audio/sample_audio_ogg.ogg"type="audio/ogg">
Your browser does not support the audio element.
</audio>
Expand or close the following content.Video <video>
MCC uses a third-party video hosting service which embeds its player code using either JavaScript or an iFrame.
Output
Code
<videocontrolsposter="../media/video/sample_mpeg4_poster.png"height="225"width="300"><sourcesrc="media/video/sample_mpeg4.mp4"type="video/mp4"><sourcesrc="media/video/sample_ogg.ogg"type="video/ogg">
Your browser does not support the video tag.
</video>
Media & Image Code Patterns
Expand or close the following content.Charts, Graphs & Other Non-Photographic Figures
Output
Chart or Graphic Title
Code
<figure><figcaption><pclass="caption">Chart or Graphic Title</p></figcaption><imgalt=""src="https://assets.mcc.gov/content/uploads/2017/05/image-102715-un-sdgs.jpg"width="100%"/></figure>
Expand or close the following content.Photos — With Caption & Credit
Add to <figure> to have the image display aligned right and 50 percent of the width of its container.
.thumbnail
Gotham
Add to <figure> to have the image display aligned left and sized for a thumbnail headshot (about 20 percent of the width of its container).
Expand or close the following content.Slideshows
All slideshows on mcc.gov include a thumbnail navigation at the top. Thumbnails are sized to 146 x 90 pixels. Slideshow images should be sized to 960 x 594 pixels (the golden mean's ratio) but will display as 940 x 582 pixels.
MCC uses the Flexslider slideshow framework to display its slideshows.
Output
MCC
Ra’eda, one of 30 women trained as plumbers as part of MCC’s Jordan Compact, fixes a client’s faucet in the city of Zarqa. Ra’eda and her colleagues are challenging attitudes about women’s roles and professions in Jordan—one of the most water-poor countries on Earth that also has one of the lowest women’s labor force participation rates in the world.
MCC
As part of its Jordan Compact, MCC funded a critical expansion of the As-Samra Wastewater Treatment Plant that is producing much-needed treated water for farm irrigation in the Jordan Valley and freeing up fresh water for household use.
MCC
A boy rolls a barrel toward a water source in Lusaka, Zambia. As part of MCC’s investment in the country, the Zambian Government is working to reform the water sector and improve drainage in the capital city of Lusaka to better meet citizens’ water and sanitation needs. The vital water sector improvements aim to decrease the risk of water-related disease, time spent collecting water, the cost of water, and business and household losses due to flooding.
Code
<divid="flex-slideshow-std"><!-- thumbnail images for slideshow navigation --><divid="carousel"class="flexslider"><ulclass="slides"><!-- copy/paste this snippet of code for each slide in the slideshow --><liclass="slide"><imgsrc="https://assets.mcc.gov/content/uploads/2017/05/photo-slide-032217-jor-jordan-woman-plumber-working.jpg"alt=""/></li><!-- end code snippet to copy/paste --><liclass="slide"><imgsrc="https://assets.mcc.gov/content/uploads/2017/05/photo-slide-032217-jor-as-samra-wastewater-plant.jpg"alt=""/></li><liclass="slide"><imgsrc="https://assets.mcc.gov/content/uploads/2017/02/photo-111616-zmb-water-access.jpg"alt=""/></li></ul></div><!-- end thumbnail images for slideshow navigation --><!-- actual slideshow images --><divid="slider"class="flexslider"><ulclass="slides"><!-- copy/paste this snippet of code for each slide in the slideshow --><liclass="slide"><figure><imgsrc="https://assets.mcc.gov/content/uploads/2017/05/photo-slide-032217-jor-jordan-woman-plumber-working.jpg"alt=""/><figcaption><pclass="credit">MCC</p><div><pclass="caption">Ra’eda, one of 30 women trained as plumbers as part of MCC’s Jordan Compact, fixes a client’s faucet in the city of Zarqa. Ra’eda and her colleagues are challenging attitudes about women’s roles and professions in Jordan—one of the most water-poor countries on Earth that also has one of the lowest women’s labor force participation rates in the world.</p></div></figcaption></figure></li><!-- end code snippet to copy/paste --><liclass="slide"><figure><imgsrc="https://assets.mcc.gov/content/uploads/2017/05/photo-slide-032217-jor-as-samra-wastewater-plant.jpg"alt=""/><figcaption><pclass="credit">MCC</p><div><pclass="caption">As part of its Jordan Compact, MCC funded a critical expansion of the As-Samra Wastewater Treatment Plant that is producing much-needed treated water for farm irrigation in the Jordan Valley and freeing up fresh water for household use.</p></div></figcaption></figure></li><liclass="slide"><figure><imgsrc="https://assets.mcc.gov/content/uploads/2017/02/photo-111616-zmb-water-access.jpg"alt=""/><figcaption><pclass="credit">MCC</p><div><pclass="caption">A boy rolls a barrel toward a water source in Lusaka, Zambia. As part of MCC’s investment in the country, the Zambian Government is working to reform the water sector and improve drainage in the capital city of Lusaka to better meet citizens’ water and sanitation needs. The vital water sector improvements aim to decrease the risk of water-related disease, time spent collecting water, the cost of water, and business and household losses due to flooding.</p></div></figcaption></figure></li></ul></div></div><scripttype="text/javascript">
jQuery(document).ready(function($) {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 146,
itemMargin: 2,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemMargin: 0,
smoothHeight: true,
sync: "#carousel",
start: function(slider) {
var slide_count = slider.count - 1;
$(slider)
.find('img.lazy:eq(0)')
.each(function() {
var src = $(this).attr('data-src');
$(this).attr('src', src).removeAttr('data-src');
});
},
before: function(slider) {
var slides = slider.slides,
index = slider.animatingTo,
$slide = $(slides[index]),
$img = $slide.find('img[data-src]'),
current = index,
nxt_slide = current + 1,
prev_slide = current - 1;
