diff --git a/demo/src/app/api-docs/sample-box/sample-box.component.html b/demo/src/app/api-docs/sample-box/sample-box.component.html
index 552015e4a8..d92003af1c 100644
--- a/demo/src/app/api-docs/sample-box/sample-box.component.html
+++ b/demo/src/app/api-docs/sample-box/sample-box.component.html
@@ -11,6 +11,9 @@
       <tab heading="tests" *ngIf="spec">
         <pre class="prettyprint linenums lang-js">{{spec}}</pre>
       </tab>
+      <tab heading="style" *ngIf="style">
+        <pre class="prettyprint linenums lang-css">{{style}}</pre>
+      </tab>
     </tabset>
   </div>
 </div>
diff --git a/demo/src/app/api-docs/sample-box/sample-box.component.ts b/demo/src/app/api-docs/sample-box/sample-box.component.ts
index 9bb1bf9299..f5d5f1b6a3 100644
--- a/demo/src/app/api-docs/sample-box/sample-box.component.ts
+++ b/demo/src/app/api-docs/sample-box/sample-box.component.ts
@@ -8,4 +8,5 @@ export class SampleBoxComponent {
   @Input() public ts: string;
   @Input() public html: string;
   @Input() public spec: string;
+  @Input() public style: string;
 }
diff --git a/demo/src/app/components/accordion/accordion-section.component.ts b/demo/src/app/components/accordion/accordion-section.component.ts
index 3f1a334c3f..4853359b14 100644
--- a/demo/src/app/components/accordion/accordion-section.component.ts
+++ b/demo/src/app/components/accordion/accordion-section.component.ts
@@ -64,7 +64,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/usage.md');
   </ng-sample-box>
                 
   <h2 routerLink="." fragment="styling" id="styling">Styling</h2>
-  <ng-sample-box [ts]="demos.styling.component" [html]="demos.styling.html">
+  <ng-sample-box [ts]="demos.styling.component" [html]="demos.styling.html" [style]="demos.styling.css">
     <demo-accordion-styling></demo-accordion-styling>
   </ng-sample-box>
                 
diff --git a/demo/src/app/components/accordion/demos/index.ts b/demo/src/app/components/accordion/demos/index.ts
index 07cdfe503b..fe776392d6 100644
--- a/demo/src/app/components/accordion/demos/index.ts
+++ b/demo/src/app/components/accordion/demos/index.ts
@@ -33,6 +33,7 @@ export const DEMOS = {
   },
   styling: {
     component: require('!!raw-loader?lang=typescript!./styling/styling'),
-    html: require('!!raw-loader?lang=markup!./styling/styling.html')
+    html: require('!!raw-loader?lang=markup!./styling/styling.html'),
+    css: require('!!raw-loader?lang=markup!./styling/styling.css')
   }
 };
diff --git a/demo/src/app/components/accordion/demos/styling/styling.css b/demo/src/app/components/accordion/demos/styling/styling.css
new file mode 100644
index 0000000000..51d28cdf83
--- /dev/null
+++ b/demo/src/app/components/accordion/demos/styling/styling.css
@@ -0,0 +1,9 @@
+.card.customClass,
+.card.customClass .card-header,
+.panel.customClass {
+  background-color: #5bc0de;
+  color: #fff;
+}
+.panel.customClass .panel-body {
+  background-color: #337aa7;
+}
diff --git a/demo/src/app/components/accordion/demos/styling/styling.ts b/demo/src/app/components/accordion/demos/styling/styling.ts
index accf101fea..d44357e0e6 100644
--- a/demo/src/app/components/accordion/demos/styling/styling.ts
+++ b/demo/src/app/components/accordion/demos/styling/styling.ts
@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'demo-accordion-styling',
-  templateUrl: './styling.html'
+  templateUrl: './styling.html',
+  styleUrls: ['./styling.css']
 })
 
 export class DemoAccordionStylingComponent {