Last updated: September 10, 2015 at 23:00 pm

This site's visual distinction between blocks or elements of content within each page.

Visual example of the element:

What problem does this element or pattern solve?
There are many occasions when you will need to visually separate two or more content blocks, but putting each into an individual container creates too much distinction. In these instances, you can use horizontal or vertical lines to create any necessary visual dividers between related sections of content.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Line formatting: Are your dividers solid, dashed, dotted? Do you have end-caps?
  • What are acceptable colors?
  • If you permit angles other than horizontal and vertical, specify those here.
  • What are the approved divider widths in pixels?
  • What is the minimum spacing around each divider or line?
  • Do you have specific guidelines governing when to use a divider vs. a container? Or is this at the designer’s discretion?
  • Can dividers also be used within containers?

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
rules, hrule, vrule, separators, dividing lines, spacing
Related elements within this Style Framework:



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply