Connect Dementia Research

Pattern Library

Message

Success: Everything went well!

Error: Something is wrong!.

HTML

    
<div class="message message--success">Success: Everything went well!</div>


    
<div class="message message--error">Error: Something is wrong!.</div>

SCSS

    .message {
	@include message-font();
	padding-top: 16px;
	text-align: left;

	&:before {
		position: relative;
		top: 2px;
		padding-right: 0.5rem;
	}
}

.message--success {
	color: $turquoise;

	&:before {
		content: url('/images/icon-success.svg');
	}
}

.message--error {
	color: $ruby;

	&:before {
		content: url('/images/icon-error.svg');
	}
}