nataliafitzgerald
commented
7 years ago @ielerol This looks good.
Parts of the modal
For the section where we talk about the parts of the modal can we call out the parts more - maybe with headings? (Also, let's change "headline" to "heading" to be consistent with the rest of the DM.)
Heading Modal windows should have a clear heading at the top of the window. This heading should clearly state what is happening or what action a modal is prompting the user for. For instance, if a modal appears due to inactivity, the heading should clearly state the action that is about to take place due to that inactivity.
Supporting text Any copy underneath the heading should include clear instructions about what the user needs to do.
Form fields If form fields are included in a modal, they should follow standard form field design guidelines.
Spec styling
None of this is official styling just my preference and what I used on the forms page.
- Include the heading level name (from the typography page) when possible and consolidate specs when it makes sense.
For example:- Heading: H3 (Avenir Next Regular, 22 px), Black (#101820)
- Supporting text: Body (Avenir Next Regular, 16px), Black (#101820)
- Put commas between different stylistic specifications
For example:
- Top border: 3px, CFPB Green (#20aa3f)
- Put the hex codes in parenthesis after the color name (shown above)
ielerol
We've changed how the colors data file works, so pulling from that file to this page doesn't work anymore. I've updated the colors to be hard-coded based on the current color palette file. I also did some cleanup of the markdown file that shouldn't affect how it looks.
Preview the page here. All the visible changes should be in the style section.