Component overview
The separator is a visual element intended to help break up the information of a page to make it easier for users to digest.
- Separator components can be used on all page schemas: Separator components may be used on Section Fronts, Section Detail, Profile Detail and Degree Detail pages.
- Multiple Separator components can be placed on one page: Separators may be used several times on a page, but be cognizant of overuse.
- Consider the page schema for your Separator component: Separator components size differently based on the page schema. They appear smaller on Section Detail pages versus Section Fronts because of the navigation elements in the left rail.
- Don't overuse Separator components: While Separators work well to bring some space between sections, be sure you don't overuse them as they can be distracting.
- There are multiple Separator options: You may use full- and min-width separators with different background colors.
There are no known accessibility issues with Separator components.
SEP: UNIT NAME
- Example: SEP: FINAID
Example Separator components
Example #1
Separator, full-width, no background
Example #2
Separator, min-width, no background
Example #3
Separator, min-width, blue background
Example #4
Separator, full-width, blue background