extends template block title title GroundworkCSS Layouts: Image Gallery block content .container.modal.gallery .pad-left.pad-right h1.AverageSans.zero Example Layouts: Image Gallery p An adaptive image gallery layout article.row .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.green.tooltip(href="http://placehold.it/900x500/2ecc71/ffffff/&text=Image+1", title="View Larger Image") img.round(src="http://placehold.it/300x300/2ecc71/ffffff/&text=Image+1", alt="Image 1") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.blue.tooltip(href="http://placehold.it/900x500/3498db/ffffff/&text=Image+2", title="View Larger Image") img(src="http://placehold.it/300x300/3498db/ffffff/&text=Image+2", alt="Image 2") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.purple.tooltip(href="http://placehold.it/900x500/9b59b6/ffffff/&text=Image+3", title="View Larger Image") img(src="http://placehold.it/300x300/9b59b6/ffffff/&text=Image+3", alt="Image 3") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.yellow.tooltip(href="http://placehold.it/900x500/f1c40f/ffffff/&text=Image+4", title="View Larger Image") img(src="http://placehold.it/300x300/f1c40f/ffffff/&text=Image+4", alt="Image 4") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.orange.tooltip(href="http://placehold.it/900x500/e67e22/ffffff/&text=Image+5", title="View Larger Image") img(src="http://placehold.it/300x300/e67e22/ffffff/&text=Image+5", alt="Image 5") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.red.tooltip(href="http://placehold.it/900x500/e74c3c/ffffff/&text=Image+6", title="View Larger Image") img(src="http://placehold.it/300x300/e74c3c/ffffff/&text=Image+6", alt="Image 6") article.row .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.pink.tooltip(href="http://placehold.it/900x500/f02475/ffffff/&text=Image+7", title="View Larger Image") img(src="http://placehold.it/300x300/f02475/ffffff/&text=Image+7", alt="Image 7") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.turquoise.tooltip(href="http://placehold.it/900x500/1abc9c/ffffff/&text=Image+8", title="View Larger Image") img(src="http://placehold.it/300x300/1abc9c/ffffff/&text=Image+8", alt="Image 8") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.asphalt.tooltip(href="http://placehold.it/900x500/34495e/ffffff/&text=Image+9", title="View Larger Image") img(src="http://placehold.it/300x300/34495e/ffffff/&text=Image+9", alt="Image 9") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.green.tooltip(href="http://placehold.it/900x500/2ecc71/ffffff/&text=Image+10", title="View Larger Image") img(src="http://placehold.it/300x300/2ecc71/ffffff/&text=Image+10", alt="Image 10") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.blue.tooltip(href="http://placehold.it/900x500/3498db/ffffff/&text=Image+11", title="View Larger Image") img(src="http://placehold.it/300x300/3498db/ffffff/&text=Image+11", alt="Image 11") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.purple.tooltip(href="http://placehold.it/900x500/9b59b6/ffffff/&text=Image+12", title="View Larger Image") img(src="http://placehold.it/300x300/9b59b6/ffffff/&text=Image+12", alt="Image 12") article.row .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.yellow.tooltip(href="http://placehold.it/900x500/f1c40f/ffffff/&text=Image+13", title="View Larger Image") img(src="http://placehold.it/300x300/f1c40f/ffffff/&text=Image+13", alt="Image 13") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.orange.tooltip(href="http://placehold.it/900x500/e67e22/ffffff/&text=Image+14", title="View Larger Image") img(src="http://placehold.it/300x300/e67e22/ffffff/&text=Image+14", alt="Image 14") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.red.tooltip(href="http://placehold.it/900x500/e74c3c/ffffff/&text=Image+15", title="View Larger Image") img(src="http://placehold.it/300x300/e74c3c/ffffff/&text=Image+15", alt="Image 15") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.pink.tooltip(href="http://placehold.it/900x500/f02475/ffffff/&text=Image+16", title="View Larger Image") img(src="http://placehold.it/300x300/f02475/ffffff/&text=Image+16", alt="Image 16") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.turquoise.tooltip(href="http://placehold.it/900x500/1abc9c/ffffff/&text=Image+17", title="View Larger Image") img(src="http://placehold.it/300x300/1abc9c/ffffff/&text=Image+17", alt="Image 17") .one.sixth.three-up-small-tablet.two-up-mobile.padded a.block.asphalt.tooltip(href="http://placehold.it/900x500/34495e/ffffff/&text=Image+18", title="View Larger Image") img(src="http://placehold.it/300x300/34495e/ffffff/&text=Image+18", alt="Image 18")