Untitled

dabblet.css

body {
	width: 400px;
	margin: 40px;
	font-family: helvetica;
}

a { color: #FFF; }

.noti-slat {
	background: #000;
	color: #FFF;
	padding: 10px;
	position: relative;
	overflow: hidden;
	margin-bottom: 10px;
}

.noti-slat-avatar {
	width: 54px;
	height: 54px;
	background: red;
	float: left;
}

.noti-slat-message {
	margin: 0;
	margin-left: 64px;
	margin-right: 40px;
	padding-top: 8px
}

.noti-slat-icon {
	width: 16px;
	height: 16px;
	background: blue;
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -8px;
}

dabblet.html

<div class="noti-slat">
	<div class="noti-slat-avatar"></div>
	<p class="noti-slat-message">Username <a href="#">invited</a> you to collaborate on a story</p>
	<div class="noti-slat-icon"></div>
</div>

<div class="noti-slat">
	<div class="noti-slat-avatar"></div>
	<p class="noti-slat-message">Storybird returned your story <a href="#">I know it now</a> for identifying information</p>
	<div class="noti-slat-icon"></div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}