---
title: Dimmer
---
<h3 class="docs-subsection-title">Default</h3>
<div class="docs-example">
  <div av-dimmer class="card card-block">
    <div class="dimmer-content dimmer-content-dark text-center">
      <p> Dimmer Message </p>
    </div>
    <h4 class="card-title">Example title</h4>
    <p class="card-text">Example text</p>
  </div>
</div>
<code class="language-markup" ng-non-bindable>
  <div av-dimmer class="card card-block">
    <div class="dimmer-content dimmer-content-dark text-center">
      <p> Dimmer Message </p>
    </div>
    <h4 class="card-title">Example title</h4>
    <p class="card-text">Example text</p>
  </div>
</code>

<h3 class="docs-subsection-title">Using Configuration</h3>
<div class="docs-example">
  <div av-dimmer av-dimmer-config="{ showAnimation: 'transition.slideLeftBigIn', hideAnimation: 'transition.slideRightBigOut', animationConfig: { duration: 1000 }}" class="card card-block">
    <div class="dimmer-content dimmer-content-dark text-center">
      <p> Dimmer Message </p>
    </div>
    <h4 class="card-title">Example title</h4>
    <p class="card-text">Example text</p>
  </div>
</div>
<code class="language-markup" ng-non-bindable>
  <div av-dimmer class="card card-block">
    <div class="dimmer-content dimmer-content-dark text-center">
      <p> Dimmer Message </p>
    </div>
    <h4 class="card-title">Example title</h4>
    <p class="card-text">Example text</p>
  </div>
</code>
