Product Name

Borders

Borders help 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

Variables

  • On White
    $mds-border-separator-default
    solid 1px #e5e5e5
  • On Light
    $mds-border-separator-on-light
    solid 1px #cccccc
  • On Dark
    $mds-border-separator-on-dark
    solid 1px #333333
  • On Black
    $mds-border-separator-on-dark
    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

Variables

  • On White
    $mds-border-control-default
    solid 1px #808080
  • On Light
    $mds-border-control-default
    solid 1px #808080
  • On Dark
    $mds-border-control-default
    solid 1px #808080
  • On Black
    $mds-border-control-default
    solid 1px #808080
©2017 Morningstar, Inc. All rights reserved. Terms of Use