Dimmer
A dimmer hides distractions to focus attention on particular content.

Themed

This section is intended as a reference for specific use cases of components, or compositions of them, that are not covered in the component's default examples.

Types

Dimmer

A simple dimmer displays no content.

Content Dimmer

A dimmer can display content.

Page Dimmer

A dimmer can be formatted to be fixed to the page.

States

Active

An active dimmer will dim its parent container.

Variations

Blurring

A dimmable element can blur its contents.

Simple Dimmer

A dimmer can be controlled without Javascript.

Inverted

A dimmer can be formatted to have its colors inverted.

Vertical Alignment2.3.0

A dimmer can have its content top or bottom aligned.

Usage

Dimmer Events

A dimmer can trigger a visibility change on an event.

Loaders inside Dimmers

Any loader inside a dimmer will automatically use an appropriate color to match.

This is the bottom