diff --git a/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.html b/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.html
index 6b2ab1765f0..9050311be95 100644
--- a/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.html
+++ b/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.html
@@ -7,7 +7,7 @@ <h2>Default Dropdown</h2>
 <component-example [name]="'ex1'">
   <fd-dropdown-default-example></fd-dropdown-default-example>
 </component-example>
-<!--<code-example [code]="textDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="textDropdownHtml"></code-example>
 
 <separator></separator>
 
@@ -15,7 +15,7 @@ <h2>Disabled State</h2>
 <component-example [name]="'ex2'">
   <fd-dropdown-state-example></fd-dropdown-state-example>
 </component-example>
-<!--<code-example [code]="disabledDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="disabledDropdownHtml"></code-example>
 
 <separator></separator>
 
@@ -24,7 +24,7 @@ <h2>Dropdown with Icon</h2>
 <component-example [name]="'ex3'">
   <fd-dropdown-icons-example></fd-dropdown-icons-example>
 </component-example>
-<!--<code-example [code]="iconDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="iconDropdownHtml"></code-example>
 
 <separator></separator>
 
@@ -39,7 +39,7 @@ <h2>Contextual Menu</h2>
 <component-example [name]="'ex5'">
   <fd-dropdown-contextual-menu-example></fd-dropdown-contextual-menu-example>
 </component-example>
-<!--<code-example [code]="contextualMenuDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="contextualMenuDropdownHtml"></code-example>
 
 <separator></separator>
 
@@ -48,8 +48,7 @@ <h2>Infinite Scroll Dropdown</h2>
 <component-example [name]="'ex6'">
     <fd-dropdown-infinite-scroll-example></fd-dropdown-infinite-scroll-example>
 </component-example>
-<!--<code-example [code]="infiniteScrollHtml" [language]="'HTML'"></code-example>-->
-<!--<code-example [code]="infiniteScrollTs" [language]="'typescript'"></code-example>-->
+<code-example [exampleFiles]="infiniteScrollHtml"></code-example>
 
 <separator></separator>
 
@@ -57,7 +56,7 @@ <h2>Toolbar Dropdown</h2>
 <component-example [name]="'ex6'">
     <fd-dropdown-toolbar-example></fd-dropdown-toolbar-example>
 </component-example>
-<!--<code-example [code]="toolbarDropdownHtml" [language]="'HTML'"></code-example>-->
+<code-example [exampleFiles]="toolbarDropdownHtml"></code-example>
 
 <style>
   ::ng-deep fd-popover {
diff --git a/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.ts b/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.ts
index ec95f9c8d29..aaf4ebddb54 100644
--- a/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.ts
+++ b/docs/app/documentation/component-docs/dropdown/dropdown-docs.component.ts
@@ -7,25 +7,59 @@ import * as dropdownStateMenuHtml from '!raw-loader!./examples/dropdown-state-ex
 import * as dropdownInfiniteScrollHtml from '!raw-loader!./examples/dropdown-infinite-scroll-example.component.html';
 import * as dropdownInfiniteScrollTs from '!raw-loader!./examples/dropdown-infinite-scroll-example.component.ts';
 import * as dropdownToolbarHtml from '!raw-loader!./examples/dropdown-toolbar-example.component.html';
+import { ExampleFile } from '../../core-helpers/code-example/example-file';
 
 @Component({
     selector: 'app-dropdown',
     templateUrl: './dropdown-docs.component.html'
 })
 export class DropdownDocsComponent {
-    textDropdownHtml = dropdownDefaultMenuHtml;
 
-    disabledDropdownHtml = dropdownStateMenuHtml;
+    textDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownDefaultMenuHtml,
+        }
+    ];
 
-    iconDropdownHtml = dropdownIconsMenuHtml;
+    disabledDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownStateMenuHtml,
+        }
+    ];
 
-    contextualMenuDropdownHtml = dropdownContextualMenuHtml;
+    iconDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownIconsMenuHtml,
+        }
+    ];
 
-    infiniteScrollHtml = dropdownInfiniteScrollHtml;
+    contextualMenuDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownContextualMenuHtml,
+        }
+    ];
 
-    infiniteScrollTs = dropdownInfiniteScrollTs;
+    infiniteScrollHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownInfiniteScrollHtml,
+        },
+        {
+            language: 'typescript',
+            code: dropdownInfiniteScrollTs,
+        }
+    ];
 
-    toolbarDropdownHtml = dropdownToolbarHtml;
+    toolbarDropdownHtml: ExampleFile[] = [
+        {
+            language: 'html',
+            code: dropdownToolbarHtml,
+        }
+    ];
 
-    constructor() {}
+    constructor() { }
 }
diff --git a/docs/app/documentation/component-docs/dropdown/examples/dropdown-default-example.component.html b/docs/app/documentation/component-docs/dropdown/examples/dropdown-default-example.component.html
index dca1d5386ad..c51343af759 100644
--- a/docs/app/documentation/component-docs/dropdown/examples/dropdown-default-example.component.html
+++ b/docs/app/documentation/component-docs/dropdown/examples/dropdown-default-example.component.html
@@ -1,5 +1,5 @@
 <fd-popover style="margin-right: 12px;">
-    <fd-dropdown-control>Compact Dropdown</fd-dropdown-control>
+    <fd-dropdown-control>Cozy Dropdown</fd-dropdown-control>
     <fd-popover-body *ngIf="menu1 && menu1.length || menu2 && menu2.length">
         <fd-menu>
             <ul fd-menu-list>