Notifications

You can add a bubble that includes a two-digit number to links or buttons by using .fizz-notification and including the value as a data attribute called data-counter.

Orders Payments Lists Reports

HTML

<a href="" class="fizz-notification fizz-text-inverse fizz-text-strong" data-counter="10">Payments</a>
...
<button class="fizz-icon-button-small fizz-icon-button-inverted fizz-notification" data-counter="3">
  <svg class="fizz-icon-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18 0H2C.9 0 0 .9 0 2v18l4-4h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2Z"/></svg>
</button>

Bordered Notification

Use .fizz-notification-bordered to add a 2px white border around a notification. This is designed for notifications on white backgrounds to create some space between the overlapping elements.

Orders Payments Lists Reports

HTML

<a href="" class="fizz-notification-bordered fizz-text-strong" data-counter="10">Payments</a>
...
<button class="fizz-icon-button-small fizz-notification-bordered" data-counter="3">
  <svg class="fizz-icon-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M18 0H2C.9 0 0 .9 0 2v18l4-4h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2Z"/></svg>
</button>

Inline Notification

In some contexts, you may want the counter to appear to the right of the element, rather than in the top/right corner. You can use .fizz-notification-inline for this.

Invoices

HTML

<a href="#" class="fizz-notification-inline" data-counter="10">Invoices</a>

Notification Marker

Use .fizz-marker to position an 8x8px indicator outside the margin of a block of text. This works best with 32px of padding between the text and the edge of its containing element.

Jessica Applesauce at Eagle Rock Distributing confirmed your order.

2h ago

Lady Gaga at Breakthru Beverage Group rejected your order.

4 days ago

HTML

<div class="fizz-inset-vertical-12 fizz-inset-horizontal-32 fizz-border-bottom fizz-text-medium fizz-surface-blue" style='max-width: 360px'>
  <p class="fizz-marker fizz-stack-4"><strong>Jessica Applesauce</strong> at <strong>Eagle Rock Distributing</strong> confirmed your order.</p>
  <p class="fizz-text-small fizz-text-subdued">2h ago</p>
</div>
<div class="fizz-inset-vertical-12 fizz-inset-horizontal-32 fizz-border-bottom fizz-text-medium fizz-surface-blue" style='max-width: 360px'>
  <p class="fizz-marker fizz-stack-4"><strong>Lady Gaga</strong> at <strong>Breakthru Beverage Group</strong> rejected your order.</p>
  <p class="fizz-text-small fizz-text-subdued">4 days ago</p>
</div>