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')`;