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

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

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

Variables

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-default
    solid 1px #e5e5e5
  • On Light
    $mds-border-container-default
    solid 1px #e5e5e5
  • On Dark
    $mds-border-container-default
    solid 1px #e5e5e5
  • On Black
    $mds-border-container-default
    solid 1px #e5e5e5
©2017 Morningstar, Inc. All rights reserved. Terms of Use