mixin alert(clazz, icon, title, subtitle, actions)
	div(class=('notif notif--' + clazz))
		div.notif__content
			i.material-icons.notif__icon #{icon}
			div
				h1.notif__title #{title}
				span.notif__subtitle #{subtitle}
		if (actions.length > 0)
			.notif__actions
				each action in actions
					a.notif__action(href=action.link data-tooltip=(action.tooltip ? action.tooltip : null))
						i.material-icons #{action.icon}

+alert('success', 'check', 'Upload complete', 'Woohoo!', [{link: '#', icon: 'link', tooltip: 'Get link'}])
+alert('error', 'error', 'Upload failed', 'Sorry about that.', [{link: '#', icon: 'refresh', tooltip: 'Retry'}, {link: '#', icon: 'info', tooltip: 'Error info'}])
View Compiled 
body {
	font-family: 'Signika Negative', Roboto, sans-serif;
	font-size: 14px;
	
	background: #434343;
}

.notif {
	width: 420px;
	height: 150px;
	margin: 40px auto;
	
	color: white;
	
	border-radius: 4px;
	box-shadow: 0 8px 12px rgba(0,0,0,0.3);
	overflow: hidden;
	
	&--success {
		background: #39cccc;
	}
	
	&--error {
		background: #d35757;
	}
	
	&__icon {
		padding: 20px;
		
		font-size: 56px;
	}
	
	&__content,
	&__actions {
		height: 100%;
		float: left;
	}
	
	&__content {
		width: 85%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	&__title {
		margin-bottom: 0.2em;
		
		font-size: 2em;
	}
	
	&__actions {
		width: 15%;
		display: flex;
		flex-direction: column;
		
		background: rgba(0, 0, 0, 0.4);
		
		> * {
			flex-grow: 1;
		}
	}
	
	&__action {
		position: relative;
		
		text-align: center;
		text-decoration: none;
		
		&:hover {
			background: rgba(0, 0, 0, 0.4);
			
			&:after {
				display: block;
			}
		}
		
		&:after {
			content: attr(data-tooltip);
			display: none;
			position: absolute;
			right: 110%;
			top: 50%;
			margin-top: -1em;
			padding: 0.5em 1em;
			
			text-align: center;
			white-space: nowrap;
			
			background: rgba(20,20,20,1);
			border-radius: 4px;
		}
		
		> * {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -12px;
			margin-left: -12px;
			
			font-size: 24px;
		}
	}
	
	a {
		color: inherit;
	}
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons
  2. https://fonts.googleapis.com/css?family=Signika+Negative:400,300

External JavaScript

This Pen doesn't use any external JavaScript resources.