Ritter Insurance Marketing

Section 4 #Errors
Errors

Throughout the Platform, we leverage a concept of positive, Negative, and Neutral for success, errors, and no change, or neutral states. These classes affect Pills and Text only.

If you come across a scenario/combination where these are not applied, or not applied as expected, contact the Platform UI team.

Source: sass/_errors.scss, line 5

Section 4.1 #Errors.Pills
Error Pills

Throughout the Platform, we leverage a concept of positive, Negative, and Neutral for success, errors, and no change, or neutral states.

Example:



Positive
Negative
Neutral

Markup: 

<div class="pill pill--circle-empty positive"></div>
<div class="pill pill--circle-empty negative"></div>
<div class="pill pill--circle-empty neutral"></div>
<div class="pill pill--circle-empty-dot positive"></div>
<div class="pill pill--circle-empty-dot negative"></div>
<div class="pill pill--circle-empty-dot neutral"></div>
<br><br>
<div class="pill positive">
  Positive
</div>
<div class="pill negative">
  Negative
</div>
<div class="pill neutral">
  Neutral
</div>
Source: sass/_errors.scss, line 23

Section 4.2 #Errors.Text
Errors text

Example:

Positive

Negative

Neutral

Markup: 

<p class="text-positive">Positive</p>
<p class="text-negative">Negative</p>
<p class="text-neutral">Neutral</p>
Source: sass/_errors.scss, line 14