Badge And Tag

Class Value
ss-tag Rectangular black tag/label
ss-badge Circular black badge

Badge

<p>
  <span class="ss-badge">9</span> New Notifications
</p>

Tag

In the SysaCSS world there is no real difference between a tag, a label, or a sign.

The ss-tag class creates a rectangular tag (label or sign). The default color is black.

Letter Tag

<span class="ss-tag ss-xlarge">M</span>
<span class="ss-tag ss-xlarge">A</span>
<span class="ss-tag ss-xlarge">Y</span>
<span class="ss-tag ss-jumbo ss-bg-light-green">P</span>
<span class="ss-tag ss-jumbo ss-bg-pink">R</span>
<span class="ss-tag ss-jumbo ss-bg-aqua">O</span>
<span class="ss-tag ss-jumbo">M</span>
<span class="ss-tag ss-jumbo ss-bg-light-red">O</span>

Road Sign

<span class="ss-tag ss-pt-2 ss-pb-2 ss-pl-4 ss-pr-4 ss-xxlarge ss-uppercase ss-bg-orange ss-center">
  <strong>
    No vehicles carrying explosives or flammable goods
  </strong>
</span>