SIA Web Design Library

Notification dot

Use the Notification dot to draw attention to a small element (e.g. a menu item) and only when the user can make sense from such a minimal signal.

<!-- Default -->
<p>
    <span class='c-tag' style='position: relative'>Demo neutral

        <span class='c-notification-dot c-notification-dot--neutral'><span>Notification</span></span>

    </span>
</p>


<!-- Success -->
<p>
    <span class='c-tag' style='position: relative'>Demo success

        <span class='c-notification-dot c-notification-dot--success'><span>Notification</span></span>

    </span>
</p>


<!-- Notice -->
<p>
    <span class='c-tag' style='position: relative'>Demo notice

        <span class='c-notification-dot c-notification-dot--notice'><span>Notification</span></span>

    </span>
</p>


<!-- Error -->
<p>
    <span class='c-tag' style='position: relative'>Demo error

        <span class='c-notification-dot c-notification-dot--error'><span>Notification</span></span>

    </span>
</p>


<!-- Muted -->
<p>
    <span class='c-tag' style='position: relative'>Demo muted

        <span class='c-notification-dot c-notification-dot--muted'><span>Notification</span></span>

    </span>
</p>


{% if demo %}
<p>
    <span class='c-tag' style='position: relative'>Demo {{ type }}
    {% endif %}

{% if type %}
    {% set display = { 'modifiers': [ type ] } %}
{% endif %}
<span class='{{ get_component_class( 'notification-dot', display ) }}'><span>{{ content }}</span></span>

    {% if demo %}
    </span>
</p>
{% endif %}
 
/* Default */
{
  "type": "neutral",
  "content": "Notification",
  "demo": true
}


/* Success */
{
  "type": "success",
  "content": "Notification",
  "demo": true
}


/* Notice */
{
  "type": "notice",
  "content": "Notification",
  "demo": true
}


/* Error */
{
  "type": "error",
  "content": "Notification",
  "demo": true
}


/* Muted */
{
  "type": "muted",
  "content": "Notification",
  "demo": true
}