diff --git a/src/app/styleguide/animations/animations.sample.html b/src/app/styleguide/animations/animations.sample.html
index ca133aed17a..409cdb2031b 100644
--- a/src/app/styleguide/animations/animations.sample.html
+++ b/src/app/styleguide/animations/animations.sample.html
@@ -3,7 +3,10 @@
         <h4 class="sample-title">Animations categories</h4>
         <div>
             <igx-list (onItemClicked)="categoryItemClicked($event)">
-                <igx-list-item igxRipple *ngFor="let category of animationsCategories">
+                <igx-list-item
+                    igxRipple
+                    *ngFor="let category of animationsCategories"
+                >
                     <p>{{ category }}</p>
                 </igx-list-item>
             </igx-list>
@@ -19,15 +22,14 @@ <h4 class="sample-title">Animations</h4>
             </igx-list>
         </div>
     </article>
-    <igx-dialog #dialog>
-        <h4>This is a sample dialog showing the selected animation</h4>
-        <br>
-        <hr>
-        <br>
-        <hr>
-        <br>
-        <hr>
-        <br>
-        <h4>Click outside the dialog to close it</h4>
+    <igx-dialog
+        #dialog
+        title="This dialog uses custom animations"
+        message="Click the button or outside to close"
+        class="custom-dialog"
+        rightButtonLabel="Close"
+        (onRightButtonSelect)="dialog.close()"
+    >
     </igx-dialog>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/app/styleguide/animations/animations.sample.scss b/src/app/styleguide/animations/animations.sample.scss
index a02df58cdc1..5f33e3929b4 100644
--- a/src/app/styleguide/animations/animations.sample.scss
+++ b/src/app/styleguide/animations/animations.sample.scss
@@ -4,4 +4,5 @@
 
 .sample-title {
     margin-left: 8px;
-}
\ No newline at end of file
+}
+