Success, Warning, Informative and Negative pointer components, for highlighting/attention grabbing UI components.
<div class="o-grid">
<div class="o-grid__item | u-flex">
<span class="c-pointer c-pointer--success | u-mr"></span>
<span class="u-fw-500 u-tc-positive">Success!</span>
</div>
<div class="o-grid__item | u-flex">
<span class="c-pointer c-pointer--warning | u-mr"></span>
<span class="u-fw-500 u-tc-warning">Warning</span>
</div>
<div class="o-grid__item | u-flex">
<span class="c-pointer c-pointer--info | u-mr"></span>
<span class="u-fw-500 u-tc-info">Informative</span>
</div>
<div class="o-grid__item | u-flex">
<span class="c-pointer c-pointer--negative | u-mr"></span>
<span class="u-fw-500 u-tc-negative">Negative</span>
</div>
</div>Change the size of the pointer for different scenarios.
Add an animation on the pointer to make it more notice-able.
Use a tooltip to show what the pointer is indicating too.
Use a popover to give immediate context to the pointer.