naUIBackground
Semantic and neutral background colour utilities.
Semantic backgrounds
Apply semantic colours as backgrounds. The -light variants use the subtle token for use with dark text in tinted panels and alerts.
na-bg-primary
na-bg-primary-light
na-bg-secondary
na-bg-secondary-light
na-bg-success
na-bg-success-light
na-bg-warning
na-bg-warning-light
na-bg-danger
na-bg-danger-light
na-bg-info
na-bg-info-light
<div class="na-bg-primary">...</div>
<div class="na-bg-primary-light">...</div>
<div class="na-bg-success">...</div>
<div class="na-bg-success-light">...</div>
<div class="na-bg-warning">...</div>
<div class="na-bg-danger">...</div>
<div class="na-bg-info">...</div>Neutral backgrounds
na-bg-white
na-bg-light
na-bg-gray-50
na-bg-gray-100
na-bg-dark
na-bg-gray-900
na-bg-transparent
<div class="na-bg-white">...</div>
<div class="na-bg-light">...</div>
<div class="na-bg-gray-50">...</div>
<div class="na-bg-gray-100">...</div>
<div class="na-bg-dark">...</div>
<div class="na-bg-gray-900">...</div>
<div class="na-bg-transparent">...</div>Combining with text colour
Use na-text-* classes from the Typography page alongside background classes to build tinted panels.
na-bg-primary-light + na-text-primary
na-bg-success-light + na-text-success
na-bg-danger-light + na-text-danger
na-bg-warning-light + na-text-warning
na-bg-info-light + na-text-info
<div class="na-bg-primary-light na-text-primary">...</div>
<div class="na-bg-success-light na-text-success">...</div>
<div class="na-bg-danger-light na-text-danger">...</div>Class reference
| Class | Token / Value |
|---|---|
na-bg-primary | --color-primary |
na-bg-primary-light | --color-primary-subtle |
na-bg-secondary | --color-secondary |
na-bg-secondary-light | --color-secondary-subtle |
na-bg-success | --color-success |
na-bg-success-light | --color-success-subtle |
na-bg-warning | --color-warning |
na-bg-warning-light | --color-warning-subtle |
na-bg-danger | --color-danger |
na-bg-danger-light | --color-danger-subtle |
na-bg-info | --color-info |
na-bg-info-light | --color-info-subtle |
na-bg-white | --color-white |
na-bg-light | --na-gray-50 |
na-bg-dark | --na-gray-900 |
na-bg-gray-50 | --na-gray-50 |
na-bg-gray-100 | --na-gray-100 |
na-bg-gray-900 | --na-gray-900 |
na-bg-transparent | transparent |