A separator is used to add a horizontal line between content on a page.
Example
Danforth Campus
The 169-acre Danforth Campus is at the heart of Washington University and is the academic home to the majority of the university’s undergraduate, graduate and professional students. The Danforth Campus features predominantly Collegiate Gothic architecture in its academic buildings, and is bordered by Forest Park and the cities of St. Louis, Clayton and University City.
Medical Campus
The Washington University Medical Center spreads over 17 city blocks and 164 acres. The center is home to the Washington University School of Medicine in St. Louis and its affiliated hospitals, clinics, patient care centers and research facilities. The Medical Campus is located in St. Louis’ vibrant Central West End, home to some of the region’s best shopping and restaurants.
Design Considerations
The separator is a light gray (#c8c8c8) which helps create a subtle division when used between content. Read more information on border styling foundations.
Best Practices
- Use a separator to visually break up content on a page.
- Two styles of separators are available to use, including a centered short line (default style) and a full width line.
HTML
<hr>CSS
hr {
background-color: #c8c8c8;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}