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

Variables

  • 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

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-on-all-backgrounds
    solid 1px #e5e5e5
  • On Light Gray
    $mds-border-container-on-all-backgrounds
    solid 1px #e5e5e5
  • On Dark Gray
    $mds-border-container-on-all-backgrounds
    solid 1px #e5e5e5
  • On Black
    $mds-border-container-on-all-backgrounds
    solid 1px #e5e5e5

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.

Do use header borders in their intended nesting order.
Do use header borders in their intended nesting order.
Don‘t reorder header borders to create a paradoxical hierarchy.
Don‘t reorder header borders to create a paradoxical hierarchy.

Primary

Variables

  • 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

Variables

  • 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

Variables

  • 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
©2018 Morningstar, Inc. All rights reserved. Terms of Use