design-system
CFPB Design System 
The Consumer Financial Protection Bureau's user interface framework and documentation.
| atomic-component | buttons | core | expandables | forms | grid |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
| icons | layout | notifications | pagination | tables | typography |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
Installation
Install components using yarn or npm:
yarn add @cfpb/cfpb-buttons
# or
npm install @cfpb/cfpb-buttons
Or you can install all components at once:
yarn add @cfpb/cfpb-design-system
# or
npm install @cfpb/cfpb-design-system
Usage
Import individual Less stylesheets or the entire design system into your project:
@import '@cfpb/cfpb-buttons/src/cfpb-buttons.less';
@import '@cfpb/cfpb-typography/src/cfpb-typography.less';
// or
@import '@cfpb/cfpb-design-system/src/cfpb-design-system.less';
// the rest of your stylesheet...
Components with JavaScript can also be imported:
import { Expandable } from '@cfpb/cfpb-expandables';
Expandable.init(document.querySelector('#container'));
NOTE: Be sure to run the Less files through Autoprefixer, or your compiled CSS might not work perfectly in older browsers.
Documentation
The Design System's website is available at https://cfpb.github.io/design-system/.
It lives in this repository's docs/ directory
and is powered by Netlify CMS
and Jekyll.
To edit any page of the website,
click the edit button at the bottom right of the page.
You'll need to be added as a contributor to this repository in order to
authenticate with Netlify CMS.
Running the documentation website locally
The project has a dependency on Ruby because it uses Jekyll. If you do not have Ruby installed, you will need to install it. We recommend using RVM. If you don't have admin access to your machine, try these steps:
curl -sSL https://get.rvm.io | bash -s stable --ruby
brew install openssl
brew link openssl --force
rvm install ruby-3.2.3 -C --with-openssl-dir=$(brew --prefix openssl@3)
rvm --default use 3.2.3
gem install eventmachine -- --with-openssl-dir=$(brew --prefix openssl@3)
bundle install
And then to run the documentation website locally:
git clone https://github.com/cfpb/design-system.git
cd design-system
yarn install
yarn after-install
yarn start
Visit http://localhost:4000/design-system/ to view the site. Editing a page locally will change your local files, using an experimental Netlify CMS feature.
To run accessibility tests against your local files:
yarn a11y
Contributing
Please view our contribution guidelines.
Open source licensing info
