HTML Structure

Changelog Wrapper

The widget is contained within an element with the class .changelog-wrapper

<div class="changelog-wrapper">
...
</div>

Notification button

<a class="btn" href="#">
  Link
  <span class="badge">2</span>
</a>

Config options via class attribute

• Appearance: as a button .btn or a link .btn-link. Link appearance won't have border and background color.
• Size: .small, .medium or .large

Notification counter

Contained within the notification button, shows the number of new notifications

<span class="badge">2</span>

Config options via class attribute

• Shape: .round(default) or .square

Notification list

This list shows the notification area, it will contain a number of notification items

<div class="changelog-wrapper top pull-left">
	<ul class="changelog-list">
	...
	</ul>
</div>

Config options via class attribute:

• Position:
  • Is set on the wrapper .changelog-wrapper
  • Four main positions: .top, .bottom, .left, .right
  • Modifiers for main positions: .pull-left and .pull-right for vertical positions and .pull-top for horizontal positions

Notification item

An item contained within the notification list

<li>
    <span class="label">featured</span>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
</li>

Config options via class attribute:

• Shape: .round(default) or .square