canvas-module-dashboard.css

/* Note: laregly the same as Canvas's Dashboard styling */
.ou-ModuleCard{
	box-sizing: border-box;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	width: 262px;
	display: inline-block;
	vertical-align: top;
	margin: 0 36px 36px 0;
}
.ou-ModuleCard__header_hero {
	box-sizing: border-box;
	height: 108px;
	border: 1px solid rgba(0,0,0,0.1);
}
.ou-ModuleCard__header_content {
	box-sizing: border-box;
	padding: 12px 18px 0;
	background: #fff;
}
.ou-ModuleCard__header-title {
	transition: all 0.2s ease-out;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	padding: 0;
	margin: 0;
	line-height: 1.3;
	font-size: 14px;
	font-weight: bold;
}
.ou-ModuleCard__header-subtitle {
	line-height: 1.3;
	padding: 0 0 10px 0;
	margin-top: 4px;
	color: rgb(108, 117, 124);
}
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

canvas-module-dashboard.js

/* 
 * Module 'Dashboard'
 */
$(document).ready(function() {
	
	/* First test if we are on the Modules page */
	if($('div.context_module').length){
		
		//Canvas colours for cards
		var moduleColours = ['#EF4437','#E71F63','#8F3E97','#65499D','#4554A4','#2083C5','#35A4DC','#09BCD3','#009688','#43A047','#8BC34A','#FDC010','#F8971C','#F0592B','#F06291'];
		var delimiter = '.' //The character used to separate your module name and module description
		
		var first = true;
		$('#module-nav').remove(); //remove any existing module_nav
		$('div.context_module').each( function(index) {
			//get details of each module
			var moduleFullName = $(this).find('span.name:first').text();
			var moduleNameParts = moduleFullName.split(delimiter); 
			var moduleName = moduleNameParts[0];
			var moduleDescription = " "; //default to a non-breaking space
			if(moduleNameParts.length>1) {
				moduleDescription = moduleNameParts[1];  //only update moduleDescription if there's something after the separator
			}
			var moduleId = $(this).children('a:first').attr('id');  //get moduleId to link to
			
			if(moduleName!=='' && moduleName.trim() && moduleName!==' ') {
				if(first){
					//add module-nav which will contain the dashboard cards only once
					first = false;
					$('#content').prepend('<div id="module-nav" class="ou-ModuleCard__box"><a id="module-nav-anchor"></a></div>');
				}
				//add dashboard cards to module-nav
				$('#module-nav').append(''+				
					'<div class="ou-ModuleCard">'+
					'	<a href="#' + moduleId + '">' +
					'		<div class="ou-ModuleCard__header_hero" style="background-color:'+moduleColours[index]+';" aria-hidden="true"></div>' +
					'		<div class="ou-ModuleCard__header_content">' +
					'			<h2 class="ou-ModuleCard__header-title ellipsis" title="' + moduleFullName + '">' +
					'				<span style="color:'+moduleColours[index]+';">' + moduleName + '</span>' + 
					'			</h2>' +
					'		<div class="ou-ModuleCard__header-subtitle ellipsis" title="moduleDescription" data-reactid=".1.$43.0.2.0.1">' + moduleDescription +'</div>' + 
					'	</a>' +
					'</div>');
					
				$(this).find('.ou-top-button').remove();  //remove any existing 'top' button
				$(this).find('.ig-header').append('<a href="#module-nav-anchor" class="btn ou-top-button"><i class="icon-arrow-up"></i>Top</a>'); //add the 'top' button
			}
		});
	}
});