diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index da3ef2904..be7861a65 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -12,11 +12,14 @@
 
             <div class="menu-category">Utilities</div>
             <div class="menu-items">
-                <router-link to="/icons">Icons</router-link>
-                <router-link to="/flexgrid">Grid System</router-link>
-                <router-link to="/formlayout">FormLayout</router-link>
+                <router-link to="/display">Display</router-link>
                 <router-link to="/elevation">Elevation</router-link>
+                <router-link to="/flexbox">FlexBox</router-link>
+                <router-link to="/formlayout">FormLayout</router-link>
+                <router-link to="/flexgrid">Grid System</router-link>
+                <router-link to="/icons">Icons</router-link>
                 <router-link to="/spacing">Spacing</router-link>
+                <router-link to="/text">Text</router-link>
             </div>
 
             <div class="menu-category">Form</div>
diff --git a/src/router.js b/src/router.js
index 206b16c5b..6a8ba4f0a 100755
--- a/src/router.js
+++ b/src/router.js
@@ -480,6 +480,21 @@ export default new Router({
 			path: '/spacing',
 			name: 'spacing',
 			component: () => import('./views/spacing/SpacingDemo.vue')
+        },
+        {
+			path: '/display',
+			name: 'display',
+			component: () => import('./views/display/DisplayDemo.vue')
+        },
+        {
+			path: '/flexbox',
+			name: 'flexbox',
+			component: () => import('./views/flexbox/FlexBoxDemo.vue')
+        },
+        {
+			path: '/text',
+			name: 'text',
+			component: () => import('./views/text/TextDemo.vue')
 		},
 		{
 			path: '/splitbutton',
diff --git a/src/views/display/DisplayDemo.vue b/src/views/display/DisplayDemo.vue
new file mode 100644
index 000000000..3e4198f05
--- /dev/null
+++ b/src/views/display/DisplayDemo.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Display</h1>
+                <p>Efficiently configure the display of the component with <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> display utilities.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Inline</h5>
+                <InputText class="p-mr-2 p-d-inline" />
+                <InputText class="p-d-inline" />
+
+                <h5>Block</h5>
+                <InputText class="p-mb-2 p-d-block" />
+                <InputText class="p-d-block" />
+
+                <h5>Visible on a Small Screen</h5>
+                <p>Resize to view.</p>
+                <Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />
+
+                <h5>Hidden on a Small Screen</h5>
+                <p>Resize to hide.</p>
+                <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />
+
+                <h5>Visible to Print, Invisible for Screen</h5>
+                <p class="p-d-none p-print-block">Only visible when printed.</p>
+
+                <h5>Visible to Screen, Invisible for Print</h5>
+                <p class="p-d-block p-print-none">Not available for printing.</p>
+            </div>
+            
+            <DisplayDoc />
+        </div>
+    </div>
+</template>
+
+<script>
+import DisplayDoc from './DisplayDoc';
+
+export default {
+	components: {
+		'DisplayDoc': DisplayDoc
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/display/DisplayDoc.vue b/src/views/display/DisplayDoc.vue
new file mode 100644
index 000000000..895afa096
--- /dev/null
+++ b/src/views/display/DisplayDoc.vue
@@ -0,0 +1,81 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+                <h5>Getting Started</h5>
+                <p>The display classes use the <i>p-d-{value}</i> format and <i>p-d-{breakpoint}-{value}</i> format for responsive design.</p>
+
+                <h5>Values</h5>
+                <p>Value field can be one of the following options.</p>
+                <ul>
+                    <li>none</li>
+                    <li>inline</li>
+                    <li>inline-block</li>
+                    <li>block</li>
+                    <li>flex</li>
+                    <li>inline-flex</li>
+                </ul>
+
+                <h5>Breakpoint</h5>
+                <p>Breakpoints define how the display property should be defined depending on the screen size. Design is mobile first so smaller values
+                    can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.</p>
+                <ul>
+                    <li><b>sm</b>: small screens e.g. phones</li>
+                    <li><b>md</b>: medium screens e.g. tablets</li>
+                    <li><b>lg</b>: large screens e.g. notebooks</li>
+                    <li><b>xl</b>: larger screens .e.g monitors</li>
+                </ul>
+
+                <h5>Examples</h5>
+<CodeHighlight>
+&lt;div class="p-d-inline"&gt;Displayed as inline.&lt;/div&gt;
+&lt;div class="p-d-flex"&gt;Displayed as a flexbox container.&lt;/div&gt;
+&lt;div class="p-d-block p-d-lg-inline"&gt;Inline for larger screens and block for others.&lt;/div&gt;
+&lt;div class="p-d-md-none"&gt;Visible on a Small Screen&lt;/div&gt;
+&lt;div class="p-d-none p-d-md-inline-flex"&gt;Hidden on a Small Screen&lt;/div&gt;
+&lt;div class="p-d-none p-print-block"&gt;Only visible when printed.&lt;/div&gt;
+&lt;div class="p-d-block p-print-none"&gt;Not available for printing.&lt;/div&gt;
+</CodeHighlight>
+
+                <h5>Customization</h5>
+                <p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
+
+				<h5>Dependencies</h5>
+				<p>PrimeFlex.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/display" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;div class="card"&gt;
+    &lt;h5&gt;Inline&lt;/h5&gt;
+    &lt;InputText class="p-mr-2 p-d-inline" /&gt;
+    &lt;InputText class="p-d-inline" /&gt;
+
+    &lt;h5&gt;Block&lt;/h5&gt;
+    &lt;InputText class="p-mb-2 p-d-block" /&gt;
+    &lt;InputText class="p-d-block" /&gt;
+
+    &lt;h5&gt;Visible on a Small Screen&lt;/h5&gt;
+    &lt;p&gt;Resize to view.&lt;/p&gt;
+    &lt;Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" /&gt;
+
+    &lt;h5&gt;Hidden on a Small Screen&lt;/h5&gt;
+    &lt;p&gt;Resize to hide.&lt;/p&gt;
+    &lt;Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" /&gt;
+
+    &lt;h5&gt;Visible to Print, Invisible for Screen&lt;/h5&gt;
+    &lt;p class="p-d-none p-print-block"&gt;Only visible when printed.&lt;/p&gt;
+
+    &lt;h5&gt;Visible to Screen, Invisible for Print&lt;/h5&gt;
+    &lt;p class="p-d-block p-print-none"&gt;Not available for printing.&lt;/p&gt;
+&lt;/div&gt;
+</template>
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file
diff --git a/src/views/flexbox/FlexBoxDemo.vue b/src/views/flexbox/FlexBoxDemo.vue
new file mode 100644
index 000000000..7f6cafe64
--- /dev/null
+++ b/src/views/flexbox/FlexBoxDemo.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>FlexBox</h1>
+                <p><a href="https://github.com/primefaces/primeflex">PrimeFlex</a> provides various spacing utilities to modify an element's layout.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            
+            
+
+            <DisplayDoc />
+        </div>
+    </div>
+</template>
+
+<script>
+import FlexBoxDoc from './FlexBoxDoc';
+
+export default {
+	components: {
+		'FlexBoxDoc': FlexBoxDoc
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/flexbox/FlexBoxDoc.vue b/src/views/flexbox/FlexBoxDoc.vue
new file mode 100644
index 000000000..0c8283657
--- /dev/null
+++ b/src/views/flexbox/FlexBoxDoc.vue
@@ -0,0 +1,26 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+                <h5>Getting Started</h5>
+                <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
+                values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
+
+
+				<h5>Dependencies</h5>
+				<p>PrimeFlex.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/display" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+
+</template>
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file
diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue
index 490d0aa73..860f0bef1 100644
--- a/src/views/spacing/SpacingDoc.vue
+++ b/src/views/spacing/SpacingDoc.vue
@@ -39,7 +39,8 @@
                 </ul>
 
                 <h5>Breakpoint</h5>
-                <p>Breakpoints define how the spacing should be depending on the screen size.</p>
+                <p>Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values
+                    can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.</p>
                 <ul>
                     <li><b>sm</b>: small screens e.g. phones</li>
                     <li><b>md</b>: medium screens e.g. tablets</li>
@@ -49,15 +50,18 @@
 
                 <h5>Examples</h5>
 <CodeHighlight>
-&lt;div class="p-mb-2"&gt;Margin bottom with level 2&lt;/i&gt;    
-&lt;div class="p-mt-4"&gt;Margin top with level 2&lt;/i&gt;
-&lt;div class="p-m-2"&gt;Margin for all sides with level 2&lt;/i&gt;
-&lt;div class="p-mx-auto"&gt;Auto margins for left and right side&lt;/i&gt;
-&lt;div class="p-pb-4"&gt;Padding bottom with level 4&lt;/i&gt;
-&lt;div class="p-p-1"&gt;Padding for all sides with level 1&lt;/i&gt;
-&lt;div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3"&gt;Level 3 spacing for lg screens and level 1 for smaller screens (xs).&lt;/i&gt;
+&lt;div class="p-mb-2"&gt;Margin bottom with level 2&lt;/div&gt;    
+&lt;div class="p-mt-4"&gt;Margin top with level 2&lt;/div&gt;
+&lt;div class="p-m-2"&gt;Margin for all sides with level 2&lt;/div&gt;
+&lt;div class="p-mx-auto"&gt;Auto margins for left and right side&lt;/div&gt;
+&lt;div class="p-pb-4"&gt;Padding bottom with level 4&lt;/div&gt;
+&lt;div class="p-p-1"&gt;Padding for all sides with level 1&lt;/div&gt;
+&lt;div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3"&gt;Level 3 spacing for lg screens and level 1 for smaller screens (xs).&lt;/div&gt;
 </CodeHighlight>
 
+                <h5>Customization</h5>
+                <p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
+
 				<h5>Dependencies</h5>
 				<p>PrimeFlex.</p>
 			</TabPanel>
diff --git a/src/views/text/TextDemo.vue b/src/views/text/TextDemo.vue
new file mode 100644
index 000000000..10772b7e9
--- /dev/null
+++ b/src/views/text/TextDemo.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Text</h1>
+                <p><a href="https://github.com/primefaces/primeflex">PrimeFlex</a> provides various spacing utilities to modify an element's layout.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            
+            
+
+            <TextDoc />
+        </div>
+    </div>
+</template>
+
+<script>
+import TextDoc from './TextDoc';
+
+export default {
+	components: {
+		'TextDoc': TextDoc
+	}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/text/TextDoc.vue b/src/views/text/TextDoc.vue
new file mode 100644
index 000000000..0c8283657
--- /dev/null
+++ b/src/views/text/TextDoc.vue
@@ -0,0 +1,26 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+                <h5>Getting Started</h5>
+                <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
+                values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
+
+
+				<h5>Dependencies</h5>
+				<p>PrimeFlex.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/display" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+
+</template>
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file