Notifications
Link
A notification block that contains a single link.
<div class="notification-block">
<div class="notification-block-link">
<a href="#">Notification Block Link</a>
</div>
</div>
Collapsed
A notification block containing a title that expands for more detail.
Notification Block Title
<div class="notification-block">
<div class="notification-block-hd">Notification Block Title</div>
</div>
Expanded
The expanded form of a notification block.
Notification Block Title
Notification
Notification
<div class="notification-block">
<div class="notification-block-hd">Notification Block Title</div>
<div class="notification-block-bd" style="display: block">
<div class="notification">Notification</div>
<div class="notification">Notification</div>
</div>
</div>
Site Announcement
Links to the announcement page.
<div class="notification-block notification-block-tou">
<div class="notification-block-link">
<a href="#">Hey, it’s a site announcement</a>
</div>
</div>
Mentions
Links to the mentions page.
<div class="notification-block notification-block-mention">
<div class="notification-block-link">
<a href="#">You have 69 mentions</a>
</div>
</div>
Aggregate
When clicked, replaces itself with more notificiation blocks.
Show 69 notifications
<div class="notification-block notification-block-aggregate">
<div class="notification-block-hd">
Show 69 notifications
<span class="caret"></span>
</div>
</div>
Followers
Expands to show new followers.
You have 2 new followers
<div class="notification-block notification-block-follow">
<div class="notification-block-hd">You have 2 new followers</div>
<div class="notification-block-bd" style="display: block">
<div class="notification">
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/2/profile.jpg"
width="48"
height="48"
/>
</a>
<div class="follow">
<h4>
<a href="#">Andre Torrez</a>
<a href="#"
><img
alt="pro"
src="https://mltshp-cdn.com/static/images/icon_plus.svg"
width="12"
height="12"
border="0"
valign="center"
/></a>
</h4>
<form>
<a
href=""
class="submit-form btn btn-secondary btn-pastel btn-small"
>+ Follow</a
>
</form>
</div>
</div>
<a
href=""
title="Clear notification"
class="notification-close btn btn-warning btn-pastel btn-icon btn-tiny"
>✕</a
>
</div>
<div class="notification">
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/63/profile.jpg"
width="48"
height="48"
/>
</a>
<div class="follow">
<h4>
<a href="#">Art Wells</a>
<a href="#"
><img
alt="pro"
src="https://mltshp-cdn.com/static/images/icon_plus.svg"
width="12"
height="12"
border="0"
valign="center"
/></a>
</h4>
<form>
<a
href=""
class="submit-form btn btn-secondary btn-pastel btn-small"
>+ Follow</a
>
</form>
</div>
</div>
<a
href=""
title="Clear notification"
class="notification-close btn btn-warning btn-pastel btn-icon btn-tiny"
>✕</a
>
</div>
<div class="clear-all">
<a class="btn btn-warning btn-pastel btn-small" href="#">clear all</a>
</div>
</div>
</div>
Saves
Expands to show new saves.
2 new saves
<div class="notification-block notification-block-save">
<div class="notification-block-hd">2 new saves</div>
<div class="notification-block-bd" style="display: block">
<div class="notification">
<div class="thumb">
<a href="#"><img src="https://mltshp-cdn.com/r/1Q7DY?width=100" /></a>
</div>
<div class="context">
<a href="#">Ferrari</a>
has been saved by <a href="#">spaceninja</a>, <a href="#">vosechu</a>
</div>
</div>
<div class="notification">
<div class="thumb">
<a href="#"><img src="https://mltshp-cdn.com/r/1QE6J?width=100" /></a>
</div>
<div class="context">
<a href="#">Moar Ferraris</a>
has been saved by <a href="#">catbird</a>
</div>
</div>
<div class="clear-all">
<a class="btn btn-warning btn-pastel btn-small" href="#">clear all</a>
</div>
</div>
</div>
Likes
Expands to show new likes.
2 new likes
<div class="notification-block notification-block-like">
<div class="notification-block-hd">2 new likes</div>
<div class="notification-block-bd" style="display: block">
<div class="notification">
<div class="thumb">
<a href="#"><img src="https://mltshp-cdn.com/r/1Q7DY?width=100" /></a>
</div>
<div class="context">
<a href="#">Ferrari</a>
has been liked by <a href="#">spaceninja</a>, <a href="#">vosechu</a>
</div>
</div>
<div class="notification">
<div class="thumb">
<a href="#"><img src="https://mltshp-cdn.com/r/1QE6J?width=100" /></a>
</div>
<div class="context">
<a href="#">Moar Ferraris</a>
has been liked by <a href="#">catbird</a>
</div>
</div>
<div class="clear-all">
<a class="btn btn-warning btn-pastel btn-small" href="#">clear all</a>
</div>
</div>
</div>
Comments
Expands to show new comments.
<div class="notification-block notification-block-comment">
<div class="notification-block-hd">2 new comments</div>
<div class="notification-block-bd" style="display: block">
<div class="notification">
<div class="thumb">
<a href="#"><img src="https://mltshp-cdn.com/r/1Q7DY?width=100" /></a>
</div>
<div class="context">
<a href="#">Bob Dobbs</a>
commented on
<a href="#">Ferrari</a><br />
source: the redditz: https://mobile.twitter.com/xxx
</div>
</div>
<div class="notification">
<div class="thumb">
<a href="#"><img src="https://mltshp-cdn.com/r/1QE6J?width=100" /></a>
</div>
<div class="context">
<a href="#">Captain America</a>
commented on
<a href="#">Moar Ferraris</a><br />
source: the redditz: https://mobile.twitter.com/zzz
</div>
</div>
<div class="clear-all">
<a class="btn btn-warning btn-pastel btn-small" href="#">clear all</a>
</div>
</div>
</div>
Approved Invitations
Expands to show your approved invitations to new shakes.
2 new shake memberships
<div class="notification-block notification-block-invitation-approved">
<div class="notification-block-hd">2 new shake memberships</div>
<div class="notification-block-bd" style="display: block">
<div class="notification">
You are now a member of
<a href="#">Dance Party</a>.
</div>
<div class="notification">
You are now a member of
<a href="#">Fantastic Internet Art</a>.
</div>
<div class="clear-all">
<a class="btn btn-warning btn-pastel btn-small" href="#">clear all</a>
</div>
</div>
</div>
Invitations
Expands to show your invitations to join new shakes.
You’re invited!
<div class="notification-block notification-block-shakeinvitation">
<div class="notification-block-hd invitation-single">You’re invited!</div>
<div class="notification-block-bd" style="display: block">
<div class="notification">
<div class="shake-thumb">
<a href="#"
><img
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/67/shake_danceparty_small.jpg"
/></a>
</div>
<h4 class="title">
<a href="#">Dance Party</a>
</h4>
<div class="shake-context">
<a href="#">Anil Dash</a>
has invited you to join this shake. Wanna join?
</div>
<div class="buttons">
<form>
<button
class="shake-accept-invitation btn btn-secondary btn-pastel btn-small"
type="submit"
value="accept"
>
Woo Hoo! Sign me up!
</button>
</form>
<form>
<button
class="shake-ignore-invitation btn btn-warning btn-pastel btn-small"
type="submit"
value="ignore"
>
Nah.
</button>
</form>
</div>
</div>
<div class="notification">
<div class="shake-thumb">
<a href="#"
><img
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/3416/shake_80085_small.jpg"
/></a>
</div>
<h4 class="title">
<a href="#">Fantastic Internet Art</a>
</h4>
<div class="shake-context">
<a href="#">Art Wells</a>
has invited you to join this shake. Wanna join?
</div>
<div class="buttons">
<form>
<button
class="shake-accept-invitation btn btn-secondary btn-pastel btn-small"
type="submit"
value="accept"
>
Woo Hoo! Sign me up!
</button>
</form>
<form>
<button
class="shake-ignore-invitation btn btn-warning btn-pastel btn-small"
type="submit"
value="ignore"
>
Nah.
</button>
</form>
</div>
</div>
</div>
</div>
Invitation Requests
Expands to show requests to join your shakes.
2 requests to join a shake
Chuck Lauer Vose
has requested to join Dance Party.
Art Wells
has requested to join Fantastic Internet Art.
<div class="notification-block notification-block-invitation-request">
<div class="notification-block-hd on-shake-page">
2 requests to join a shake
</div>
<div class="notification-block-bd" style="display: block">
<div class="notification">
<a href="#">Chuck Lauer Vose</a>
has requested to join Dance Party.
<div class="notification-actions">
<form>
<input
type="submit"
class="btn btn-secondary btn-pastel btn-small"
value="Approve"
/>
</form>
<form>
<input
type="submit"
class="btn btn-warning btn-pastel btn-small"
value="Decline"
/>
</form>
</div>
</div>
<div class="notification">
<a href="#">Art Wells</a>
has requested to join Fantastic Internet Art.
<div class="notification-actions">
<form>
<input
type="submit"
class="btn btn-secondary btn-pastel btn-small"
value="Approve"
/>
</form>
<form>
<input
type="submit"
class="btn btn-warning btn-pastel btn-small"
value="Decline"
/>
</form>
</div>
</div>
</div>
</div>
source: the redditz: https://mobile.twitter.com/xxx
source: the redditz: https://mobile.twitter.com/zzz