Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Atomic Design by Brad Frost

Badge

Renders a badge.
options:

  • -uppercase: badge text in uppercase
<span class="prismea-horizontal-spacing-5--slot prismea-badge -rounded">Badge</span><span class="prismea-horizontal-spacing-5--slot prismea-badge -rounded -uppercase">Badge</span><span class="prismea-horizontal-spacing-5--slot prismea-badge -rounded -faded -uppercase">faded</span><span class="prismea-horizontal-spacing-5--slot prismea-badge -rounded -positive -uppercase">positive</span><span class="prismea-horizontal-spacing-5--slot prismea-badge -rounded -neutral -uppercase">neutral</span><span class="prismea-horizontal-spacing-5--slot prismea-badge -rounded -alert-light -uppercase">alert-light</span>
span.prismea-horizontal-spacing-5--slot.prismea-badge.-rounded Badge
span.prismea-horizontal-spacing-5--slot.prismea-badge.-rounded.-uppercase Badge
span.prismea-horizontal-spacing-5--slot.prismea-badge.-rounded.-faded.-uppercase faded
span.prismea-horizontal-spacing-5--slot.prismea-badge.-rounded.-positive.-uppercase positive
span.prismea-horizontal-spacing-5--slot.prismea-badge.-rounded.-neutral.-uppercase neutral
span.prismea-horizontal-spacing-5--slot.prismea-badge.-rounded.-alert-light.-uppercase alert-light