Morningstar Design System

Background Containers

Variations Design Guidelines Accessibility

Background Containers
new

  • HTML/CSS Available
  • Web Component Unavailable
  • Last Updated

    2.0.0

Background containers set the background color of an element and trigger the related color changes within contained components.

Variations Design Guidelines Accessibility

Variations

White

Use to set the background color of an element to be $mds-background-color-white.

Background Container (White)
Button on White Tag on White 
<div class="mds-container--white">
    <mds-input placeholder="Input on White" id="input-id"></mds-input>
    <mds-button variation="secondary"> Button on White </mds-button>
    <mds-tag>Tag on White</mds-tag>
</div>

Light Gray

Use to set the background color of an element to be $mds-background-color-light-gray and trigger the On Light versions of contained components.

Background Container (Light Gray)
Button on Light Grey Tag on Light Grey 
<div class="mds-container--light-gray">
    <mds-input placeholder="Input on Light Grey" id="input-id"></mds-input>
    <mds-button variation="secondary"> Button on Light Grey </mds-button>
    <mds-tag>Tag on Light Grey</mds-tag>
</div>

Dark Gray

Use to set the background color of an element to be $mds-background-color-dark-gray and trigger the On Dark versions of contained components.

Background Container (Dark Gray)
Button on Dark Grey Tag on Dark Grey 
<div class="mds-container--dark-gray">
    <mds-input placeholder="Input on Dark Grey" id="input-id"></mds-input>
    <mds-button variation="secondary"> Button on Dark Grey </mds-button>
    <mds-tag>Tag on Dark Grey</mds-tag>
</div>

Black

Use to set the background color of an element to be $mds-background-color-black and trigger the On Black versions of contained components.

Background Container (Black)
Button on Black Tag on Black 
<div class="mds-container--black">
    <mds-input placeholder="Input on Black" id="input-id"></mds-input>
    <mds-button variation="secondary"> Button on Black </mds-button>
    <mds-tag>Tag on Black</mds-tag>
</div>

Use When

  • Applying a background color to an element which should trigger the related color changes within contained components.

Don’t Use When

  • Applying a background color should not trigger the color responsive styles of contained components. Instead, use the background color constants within your implementation.

Best Practices

  • When changing the background color of an element, always check the color contrast of the contained elements against the new background color.