Caseflow: Styleguide component | Horizontal Rule, Borders, Dividing Lines

[gnakm]

Story
As a developer or designer, I want to know the specs for the dividers for all of our products.

AC

• [x] Make a subsection called "Horizontal Rule" under Layout section
• [x] Color: grey-lighter
• [x] 30px margin-bottom
• [ ] Verify that the copy is above UI component in style guide

Mockup

Copy

The horizontal line can be used in multiple ways across Caseflow apps. It can be used to separate different sections and UI components and provide space for balance and legibility. There should always be a 30px space between the bottom of the component or text to the top of the horizontal line.

[gnakm]

For design meeting:

Horizontal line: When is it used? What are the specs?

Things we've discussed:

• 40px above and below horizontal line? Case by case?
• Is it used to separate sections? What are the use cases?
• Does this affect margins of a canvas?

[gnakm]

@shellicious Could you help us put together a story for this, related to certification for style guide?

[msknee]

@gnakm yes!

[lakohl]

https://va-gov.invisionapp.com/d/main/#/projects/prototypes/11033393 for mocks

[gnakm]

@avrildavid Can you take a pass at this?

The horizontal line can be used in multiple ways across Caseflow apps. It can be used to separate different sections and UI components and provide space for balance and legibility. There should always be a 40px space between the bottom of the component or text to the top of the horizontal line.

[avrildavid]

Already looks good, @gnakm. One suggestion:

The horizontal line helps provide clarity and improve legibility for users by separating different sections or UI components on a page. Caseflow horizontal lines should always be light grey and have 40 px of space between the bottom of the section or component and the top of the horizontal line.

[Sjones352]

@gnakm should add this component in the layout section?

[gnakm]

@Sjones352 Added instruction in AC!

[Sjones352]

[gnakm]

@Sjones352 Could you change the content to say ...have 30 px of space between the bottom...

[astewarttistatech]

Current view:

pushing back because the copy is wrong based on gina's comment

[Sjones352]

[gnakm]

@Sjones352 So sleek and elegant. LGTM!

[astewarttistatech]

PASSED

Validated in: UAT
Browsers: FF and Chrome

Steps to Validate:

1. Access the living style guide
2. Navigate to the Horizontal Line section
3. Verify the copy based on AC

Screenshots: