Backgrounds - Axelit

Background

Background Colors

bg-primarybg-secondarybg-successbg-dangerbg-warningbg-infobg-lightbg-dark


              <div className="d-flex gap-2 flex-wrap">
                <span className="py-2 px-3 bg-primary text-white rounded f-w-500">bg-primary</span>
  <span className="py-2 px-3 bg-secondary text-white rounded f-w-500">bg-secondary</span>
  <span className="py-2 px-3 bg-success text-white rounded f-w-500">bg-success</span>
  <span className="py-2 px-3 bg-danger text-white rounded f-w-500">bg-danger</span>
  <span className="py-2 px-3 bg-warning text-white rounded f-w-500">bg-warning</span>
  <span className="py-2 px-3 bg-info text-white rounded f-w-500">bg-info</span>
  <span className="py-2 px-3 bg-light text-dark rounded f-w-500">bg-light</span>
  <span className="py-2 px-3 bg-dark text-white rounded f-w-500">bg-dark</span>
              </div>

Background Color Shades

bg-primary-900bg-primary-800bg-primary-700bg-primary-600bg-primary-500bg-primary-400bg-primary-300


<div className="d-flex gap-2 flex-wrap">
  <span className="py-2 px-3 bg-primary-900 rounded f-w-500">bg-primary-900</span>
  <span className="py-2 px-3 bg-primary-800 rounded f-w-500">bg-primary-800</span>
  <span className="py-2 px-3 bg-primary-700 rounded f-w-500">bg-primary-700</span>
  <span className="py-2 px-3 bg-primary-600 rounded f-w-500">bg-primary-600</span>
  <span className="py-2 px-3 bg-primary-500 rounded f-w-500">bg-primary-500</span>
  <span className="py-2 px-3 bg-primary-400 rounded f-w-500">bg-primary-400</span>
  <span className="py-2 px-3 bg-primary-300 rounded f-w-500">bg-primary-300</span>
</div>

Outline Background

bg-outline-primarybg-outline-secondarybg-outline-successbg-outline-dangerbg-outline-warningbg-outline-infobg-outline-lightbg-outline-dark


<div className="d-flex gap-2 flex-wrap">
  <span className="py-2 px-3 bg-outline-primary rounded f-w-500">bg-outline-primary</span>
  <span className="py-2 px-3 bg-outline-secondary rounded f-w-500">bg-outline-secondary</span>
  <span className="py-2 px-3 bg-outline-success rounded f-w-500">bg-outline-success</span>
  <span className="py-2 px-3 bg-outline-danger rounded f-w-500">bg-outline-danger</span>
  <span className="py-2 px-3 bg-outline-warning rounded f-w-500">bg-outline-warning</span>
  <span className="py-2 px-3 bg-outline-info rounded f-w-500">bg-outline-info</span>
  <span className="py-2 px-3 bg-outline-light rounded f-w-500">bg-outline-light</span>
  <span className="py-2 px-3 bg-outline-dark rounded f-w-500">bg-outline-dark</span>
</div>

Soft Background

bg-light-primarybg-light-secondarybg-light-successbg-light-dangerbg-light-warningbg-light-infobg-light-lightbg-light-dark


<div className="d-flex gap-2 flex-wrap">
  <span className="py-2 px-3 bg-light-primary rounded f-w-500">bg-light-primary</span>
  <span className="py-2 px-3 bg-light-secondary rounded f-w-500">bg-light-secondary</span>
  <span className="py-2 px-3 bg-light-success rounded f-w-500">bg-light-success</span>
  <span className="py-2 px-3 bg-light-danger rounded f-w-500">bg-light-danger</span>
  <span className="py-2 px-3 bg-light-warning rounded f-w-500">bg-light-warning</span>
  <span className="py-2 px-3 bg-light-info rounded f-w-500">bg-light-info</span>
  <span className="py-2 px-3 bg-light-light rounded f-w-500">bg-light-light</span>
  <span className="py-2 px-3 bg-light-dark rounded f-w-500">bg-light-dark</span>
</div>