Utilities

Variables

Component variables are used to theme a component. They likely will be left as is, but if needed can be overwritten by duplicating the variable in a @key: value format with a different value. This customized variable would be placed in the same file where this component’s less file is imported. Color variables referenced in comments are from custom-props.scss.

Buttons

Color

// .btn
@btn-text:                  var(--white);
@btn-bg:                    var(--pacific);
@btn-bg-hover:              var(--pacific-dark);
@btn-bg-active:             var(--navy);
@btn-divider:               var(--pacific-60);

// .btn__secondary
@btn__secondary-text:       var(--white);
@btn__secondary-bg:         var(--gray);
@btn__secondary-bg-hover:   var(--gray-dark);
@btn__secondary-bg-active:  var(--black);
@btn__secondary-divider:    var(--gray-40);

// .btn__warning
@btn__warning-text:         var(--white);
@btn__warning-bg:           var(--red-mid-dark);
@btn__warning-bg-hover:     var(--red-dark);
@btn__warning-bg-active:    var(--gray-dark);
@btn__warning-divider:      var(--red-60);

// .btn__disabled
@btn__disabled-text:        var(--gray);
@btn__disabled-bg:          var(--gray-20);
@btn__disabled-outline:     var(--gray-20);
@btn__disabled-divider:     var(--gray-60);

Sizing

// .btn
@btn-font-size:             @base-font-size-px;
@btn-border-radius-size:    4px;
@btn-v-padding:             8px;
@btn-h-padding:             14px;

Forms

Color

// .a-text-input borders
@input-border:                            var(--gray-60);
@input-border__hover:                     var(--pacific);
@input-border__focused:                   var(--pacific);
@input-border__active:                    var(--pacific);
@input-border__error:                     var(--red);
@input-border__error__hover:              var(--red-dark);
@input-border__warning:                   var(--gold);
@input-border__warning__hover:            var(--gold-dark);
@input-border__success:                   var(--green);
@input-border__success__hover:            var(--green-dark);
@input-border__selected:                  var(--pacific);

// .a-text-input backgrounds
@input-bg:                                var(--white);
@input-bg__selected:                      var(--pacific);
@input-bg__disabled:                      var(--gray-10);
@input-bg__disabled-selected:             var(--gray-40);

// .a-text-input text
@input-text:                              var(--black);
@input-text__disabled:                    var(--gray);
@input-text__placeholder:                 var(--gray);

// .a-text-input icons
@input-icon__error:                       var(--red);

// .a-select
@select-border:                           @input-border;
@select-icon-bg:                          var(--gray-10);
@select-text__disabled:                   @input-text__disabled;

// .m-form-field
@form-field-input-border:                 @input-border;
@form-field-input-border__focused:        @input-border;
@form-field-input-border__disabled:       var(--gray-60);

// .m-form-field--lg-target
@form-field-input-lg-target-bg:           var(--gray-10);
@form-field-input-lg-target-bg__selected: var(--pacific-20);
@form-field-input-lg-target-bg__disabled: var(--gray-20);
@form-field-input-lg-target-border:       var(--pacific);

// .a-label__helper
@label-helper:                            var(--gray);

Sizing

// .a-select
@select-height: 30px;

Grid

@grid_wrapper-width: 1230px;

The grid’s maximum width in px. This value can be overridden in the u-grid-wrapper() mixin.

@grid_gutter-width: 30px;

The fixed width between columns.

@grid_total-columns: 12;

The total number of columns used in calculating column widths. This value can be overridden in the u-grid-column() mixin.

@grid_debug: false;

Gives column blocks a background color if set to true.

Breakpoints

@bp-xs-max:  600px;
@bp-sm-min:  @bp-xs-max + 1px;
@bp-sm-max:  900px;
@bp-med-min: @bp-sm-max + 1px;
@bp-med-max: 1020px;
@bp-lg-min:  @bp-med-max + 1px;
@bp-lg-max:  1230px;
@bp-xl-min:  @bp-lg-max + 1px;

Icons

Sizing

The standard icon height in ems matches the 19px rendered canvas of text set in Avenir Next sized at 16px (19/16 = 1.1875).

@cf-icon-height: 1.1875em;

Layout

Color

// .block
@block--bg:                 var(--gray-5);
@block--border:             var(--gray-40);
@block--border-top:         var(--gray-40);
@block--border-right:       var(--gray-40);
@block--border-bottom:      var(--gray-40);
@block--border-left:        var(--gray-40);

// .content__main
@content__main-border:       var(--gray-40);

// .content__line
@content__line:              var(--gray-40);

// .u-grid-column__top-divider
@u-grid-column__top-divider:  var(--gray-40);

// .u-grid-column__left-divider
@u-grid-column__left-divider: var(--gray-40);

Heroes and featured content modules

Color

// Hero variables
@hero-bg:                   var(--gray-5);
@hero-knockout-bg:          var(--gray);
@hero-knockout-text:        var(--white);

// Featured Content Module variables
@fcm-bg:                    @block--bg;

Sizing

// Hero variables
@hero-desktop-height: 285px;

Notifications

Color

@notification-bg:             var(--gray-5);
@notification-bg-success:     var(--green-10);
@notification-bg-warning:     var(--gold-10);
@notification-bg-error:       var(--red-10);

@notification-border:         var(--gray-40);
@notification-border-success: var(--green);
@notification-border-warning: var(--gold);
@notification-border-error:   var(--red);

@notification-icon:           var(--gray);
@notification-icon-success:   var(--green);
@notification-icon-warning:   var(--gold);
@notification-icon-error:     var(--red);

Sizing

@notification-padding__px: 15px;

Pagination

Color

@pagination-text: var(--gray);
@pagination-bg:   var(--gray-10);

Sizing

@pagination-btn-min-width-px: 130px;

Tables

Color

@table-cell-bg:              var(--white);
@table-cell-bg_alt:          var(--gray-5);
@table-row-link-bg-hover:    var(--pacific-80);
@table-row-link-hover-color: var(--white);
@table-head-text:            @text;
@table-head-bg:              var(--gray-5);
@table-scrolling-border:     var(--gray-40);
@table-border:               var(--gray);

Typography

Color

// Running text elements

// .a-date
@date:                      var(--gray);

// .m-pull-quote
@pull-quote_body:           var(--black);
@pull-quote_citation:       var(--gray);

// Headers

// .m-slug-header
@slug-header_border__thin:  var(--gray-10);
@slug-header_border__thick: var(--green);

// .m-meta-header
@meta-header_border:        var(--gray-40);

// Body
@text:                      var(--black);

// Links
// a
@link-text:              var(--pacific);
@link-underline:         var(--pacific);
@link-text-visited:      var(--teal);
@link-underline-visited: var(--teal);
@link-text-hover:        var(--pacific-dark);
@link-underline-hover:   var(--pacific-dark);
@link-text-active:       var(--navy);
@link-underline-active:  var(--navy);

// code
@code-text:              @text;
@code-bg:                var(--gray-5);

Sizing

@base-font-size-px:   16px;
@base-line-height-px: 22px;
@base-line-height:    @base-line-height / @base-font-size;

@size-xl:             48px; // Super-size

@size-i:              34px; // h1-size
@size-ii:             26px; // h2-size
@size-iii:            22px; // h3-size
@size-iv:             18px; // h4-size
@size-v:              14px; // h5-site
@size-vi:             12px; // h6-size
@size-code:           13px; // Custom size only for Mono code blocks

Font stack

Override this variable in order to specify a font stack other than the CFPB’s default brand font and fallback. --font-stack: 'Avenir Next', Arial, sans-serif;

Font source

There is a Sass mixin for specifying the path to the woff and woff2 font files for the CFPB default brand font, Avenir Next. Pass in the path to the files. The path can be either a relative or absolute path.

@include licensed-font('/path/to/fonts/woff/files')`;

Latest Updates

Page last edited:
Show all details
Edit page