SIA Web Design Library

Notification dot: Default

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.

<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>
 
{% 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 %}
 
{
  "type": "neutral",
  "content": "Notification",
  "demo": true
}