Updating this website

Before you edit a page, familiarize yourself with the process.

When you're ready to start editing, continue to Decap CMS.

 

Editing pages

Before making a change to a pattern or its documentation, visit Hubcap to read our Design System governance policy. It contains guidance and acceptance criteria for making minor and major changes to the Design System.

We use a content management system called Decap CMS. It’s powered by GitHub and will let you edit any page of this website.

Go to the page you want to edit and click its "Edit this page" pencil icon.

Screenshot showing how to edit a Design System page

Log into the CMS by clicking the "Login with Github" button. You'll need a github.com account and you'll need to be added to CFPB's GitHub organization. If you're new to GitHub and need to be added to this organization, post a message in the Design System mattermost channel and someone will assist you.

Screenshot showing how to log into Decap CMS

Edit content in the left hand pane of the CMS. Preview your changes in the right hand pane. Check out our sample component page for tips on how to structure a typical page.

Screenshot showing how to edit a page in Decap CMS

Click the blue 'Save' button in the top left to save your changes as a draft. Don't worry, the live site won't be affected. Decap CMS will build a temporary version of the website with your changes so that you can preview them. After you click the 'Save' button you can close the tab and come back to it later if you want, your temporary changes will persist.

Screenshot showing how to save changes in Decap CMS

After you save some changes, Decap CMS will build a preview of the entire website with your new content. This takes a few minutes. When the preview is ready you’ll see a "View Preview" link at the top of the editing page. Feel free to share this link with your peers if you’d like feedback on your new page.

Screenshot showing how to preview Decap CMS changes

When you are ready to publish your changes, set the page's status to "Ready". Then click the “Publish” drop down menu and choose "Publish now."

Hooray! After you publish, our servers will re-deploy the live website and you'll see your changes in a few minutes at https://cfpb.github.io/design-system.

Screenshot showing how to publish Decap CMS changes
 

Ready to edit the page?

Continue to Decap CMS

 

Creating new pages

Before adding a pattern to the Design System, visit Hubcap to read our Design System governance policy. It contains guidance and acceptance criteria for creating new patterns.

  1. To create a new page from scratch, click the “Create new page” button below.
  2. After logging into the CMS, you’ll be taken to a blank page in the CMS. Follow the “Editing pages” steps above to edit and preview your new page.
  3. If you’re unsure what sort of content you should add to a new Design System page, check out our sample component page. Click its “edit” button to view the sample content laid out in the CMS.
  4. If you’d like your new page to appear in the side navigation, see below.

Create new page

Editing the side navigation menu

  1. To add new pages to the side navigation, or to rearrange the order of existing pages in the navigation, click the “Edit the side navigation” button below.
  2. After logging into the CMS, navigation sections and their pages can be added, edited and removed. You’ll see a preview of the side navigation in the right-hand preview pane.

Edit the side navigation

Uploading images

When editing a page, click the + icon to add an image. Select an image from the current library or upload a new image from your computer. Note: Due to a bug in Decap CMS, the image might not immediately appear in the preview pane.

Screenshot of image upload in
CMS

Latest Updates

Page last edited:
Edit page