Components

Status Badges

Status Badges are labels which hold small amounts of information about the state of an account or transaction.

There are 3 different types of status badges.

  • success
  • warning
  • declined

Success

Created with Sketch. SUCCESS
Created with Sketch. SUCCESS 84px 2px 2px 
.badge-container {
border-radius: 13px;
width: 84px;
}

.badge-label{
font-family: Lato-Regular;
font-size: 12px;
text-align: center;
line-height: 16px;

}

.badge-success  {
background-color: rgba(0,128,0,0.15);
color: #008000;
}

Warning

Created with Sketch. WARNING 
.badge-container {
border-radius: 13px;
width: 84px;
}

.badge-label{
font-family: Lato-Regular;
font-size: 12px;
text-align: center;
line-height: 16px;

}


.badge-warning  {
background-color: rgba(244,157,16,0.15);
color: #F49D10;
}

Declined

Created with Sketch. DECLINED 
.badge-container {
border-radius: 13px;
width: 84px;
}

.badge-label{
font-family: Lato-Regular;
font-size: 12px;
text-align: center;
line-height: 16px;

}

.badge-declined  {
background-color: rgba(220,20,60,0.15);
color: #DC143C;
}

Overview of CSS Classes

Selector
Summary
Parent Selector

coming

coming