Foundation
Background color
Change the background color of an element
Background color
CSS property: background-color
Base colors
.vads-u-background-color--base
$color-base
.vads-u-background-color--white
$color-white
.vads-u-background-color--black
$color-black
.vads-u-background-color--orange
$color-orange
.vads-u-background-color--link-default
$color-link-default
.vads-u-background-color--warning-message
$color-warning-message
.vads-u-background-color--gibill-accent
$color-gibill-accent
.vads-u-background-color--primary
$color-primary
.vads-u-background-color--primary-dark
$color-primary-dark
.vads-u-background-color--primary-darker
$color-primary-darker
.vads-u-background-color--primary-alt
$color-primary-alt
.vads-u-background-color--primary-alt-dark
$color-primary-alt-dark
.vads-u-background-color--primary-alt-darkest
$color-primary-alt-darkest
.vads-u-background-color--primary-alt-light
$color-primary-alt-light
.vads-u-background-color--primary-alt-lightest
$color-primary-alt-lightest
.vads-u-background-color--secondary
$color-secondary
.vads-u-background-color--secondary-dark
$color-secondary-dark
.vads-u-background-color--secondary-darkest
$color-secondary-darkest
.vads-u-background-color--secondary-light
$color-secondary-light
.vads-u-background-color--secondary-lightest
$color-secondary-lightest
Grayscale
.vads-u-background-color--gray
$color-gray
.vads-u-background-color--gray-dark
$color-gray-dark
.vads-u-background-color--gray-medium
$color-gray-medium
.vads-u-background-color--gray-light
$color-gray-light
.vads-u-background-color--gray-light-alt
$color-gray-light-alt
.vads-u-background-color--gray-lighter
$color-gray-lighter
.vads-u-background-color--gray-lightest
$color-gray-lightest
.vads-u-background-color--gray-warm-dark
$color-gray-warm-dark
.vads-u-background-color--gray-warm-light
$color-gray-warm-light
.vads-u-background-color--gray-cool-light
$color-gray-cool-light
Tertiary colors
.vads-u-background-color--gold
$color-gold
.vads-u-background-color--gold-darker
$color-gold-darker
.vads-u-background-color--gold-light
$color-gold-light
.vads-u-background-color--gold-lighter
$color-gold-lighter
.vads-u-background-color--gold-lightest
$color-gold-lightest
.vads-u-background-color--green
$color-green
.vads-u-background-color--green-darker
$color-green-darker
.vads-u-background-color--green-light
$color-green-light
.vads-u-background-color--green-lighter
$color-green-lighter
.vads-u-background-color--green-lightest
$color-green-lightest
.vads-u-background-color--cool-blue
$color-cool-blue
.vads-u-background-color--cool-blue-light
$color-cool-blue-light
.vads-u-background-color--cool-blue-lighter
$color-cool-blue-lighter
.vads-u-background-color--cool-blue-lightest
$color-cool-blue-lightest
Hub colors
.vads-u-background-color--hub-health-care
$color-hub-health-care
.vads-u-background-color--hub-education
$color-hub-education
.vads-u-background-color--hub-disability
$color-hub-disability
.vads-u-background-color--hub-careers
$color-hub-careers
.vads-u-background-color--hub-pension
$color-hub-pension
.vads-u-background-color--hub-records
$color-hub-records
.vads-u-background-color--hub-housing
$color-hub-housing
.vads-u-background-color--hub-life-insurance
$color-hub-life-insurance
.vads-u-background-color--hub-burials
$color-hub-burials
.vads-u-background-color--hub-family-member
$color-hub-family-member
.vads-u-background-color--hub-service-member
$color-hub-service-member