Borders

Borders define space, establish hierarchy and structure content.

Separators

Separators are visual elements that break apart or contain space, i.e., rules between objects or outlines on objects.

Example

List Group

Constants

  • On White
    $mds-border-separator-on-white
    solid 1px #e5e5e5
  • On Light Gray
    $mds-border-separator-on-light-gray
    solid 1px #cccccc
  • On Dark Gray
    $mds-border-separator-on-dark-gray
    solid 1px #333333
  • On Black
    $mds-border-separator-on-black
    solid 1px #333333

Controls

Controls are a subset of UI components that facilitate interaction within the application, i.e., Secondary Buttons, Button Groups and the Search Field. Control borders are used to outline these components and are not intended for use as separators.

Example

Search Field

Constants

  • On White
    $mds-border-control-on-all-backgrounds
    solid 1px #808080
  • On Light Gray
    $mds-border-control-on-all-backgrounds
    solid 1px #808080
  • On Dark Gray
    $mds-border-control-on-all-backgrounds
    solid 1px #808080
  • On Black
    $mds-border-control-on-all-backgrounds
    solid 1px #808080

Containers

Container borders create contrast between a layered component – such as a Popover or Dialog – and the background canvas on which it is layered.

Example

Dialog

Constants

Layered components – Dialog, Modal, Notifications, and Popover – only use containers with white backgrounds. Therefore, layered components only have one border variable that works across all backgrounds.

  • On White
    $mds-border-container-on-all-backgrounds
    solid 1px #cccccc
  • On Light Gray
    $mds-border-container-on-all-backgrounds
    solid 1px #cccccc
  • On Dark Gray
    $mds-border-container-on-all-backgrounds
    solid 1px #cccccc
  • On Black
    $mds-border-container-on-all-backgrounds
    solid 1px #cccccc

Headers

Header borders establish a clear hierarchy of content on a page by offering three variations: Primary, Secondary, and Tertiary. Use these variations to create a legible visual architecture which clearly communicates the organization of information.

Example of borders arranged in descending order of hierarchy: primary, seondary, then tertiary.
Do use header borders in their intended nesting order.
Example of borders arranged incorrectly: tertiary, primary, then secondary.
Don‘t reorder header borders to create a paradoxical hierarchy.

Primary

Constants

  • On White
    $mds-border-header-primary-on-white
    solid 2px #333333
  • On Light Gray
    $mds-border-header-primary-on-light-gray
    solid 2px #1e1e1e
  • On Dark Gray
    $mds-border-header-primary-on-dark-gray
    solid 2px #e5e5e5
  • On Black
    $mds-border-header-primary-on-black
    solid 2px #e5e5e5

Secondary

Constants

  • On White
    $mds-border-header-secondary-on-white
    solid 1px #808080
  • On Light Gray
    $mds-border-header-secondary-on-light-gray
    solid 1px #808080
  • On Dark Gray
    $mds-border-header-secondary-on-dark-gray
    solid 1px #808080
  • On Black
    $mds-border-header-secondary-on-black
    solid 1px #808080

Tertiary

Constants

  • On White
    $mds-border-header-tertiary-on-white
    solid 1px #e5e5e5
  • On Light Gray
    $mds-border-header-tertiary-on-light-gray
    solid 1px #cccccc
  • On Dark Gray
    $mds-border-header-tertiary-on-dark-gray
    solid 1px #333333
  • On Black
    $mds-border-header-tertiary-on-black
    solid 1px #333333
©2019 Morningstar, Inc. All rights reserved. Terms of Use