Implemented Divider Component, Fixes #690

2020-11-28 16:59:11 +03:00 · 2020-11-28 16:59:11 +03:00 · 5148237374
parent ae7a54dd78
commit 5148237374
44 changed files with 1453 additions and 2 deletions
--- a/exports/divider.d.ts
+++ b/exports/divider.d.ts
@ -0,0 +1 @@
+export * from './components/divider/Divider';
--- a/exports/divider.js
+++ b/exports/divider.js
@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/divider/Divider.vue');
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@ -4396,6 +4396,30 @@
  color: #121212;
 }

+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #383838;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #383838;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #64B5F6;
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@ -4396,6 +4396,30 @@
  color: #121212;
 }

+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #383838;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #383838;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #81C784;
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@ -4396,6 +4396,30 @@
  color: #121212;
 }

+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #383838;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #383838;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #FFD54F;
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@ -4396,6 +4396,30 @@
  color: #121212;
 }

+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #383838;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #383838;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #BA68C8;
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@ -4408,6 +4408,30 @@
  color: #151515;
 }

+.p-divider .p-divider-content {
+  background-color: #2a323d;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #3f4b5b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #3f4b5b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Vendor extensions to the designer enhanced bootstrap compatibility */
 .p-breadcrumb .p-breadcrumb-chevron {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@ -4408,6 +4408,30 @@
  color: #151515;
 }

+.p-divider .p-divider-content {
+  background-color: #2a323d;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #3f4b5b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #3f4b5b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Vendor extensions to the designer enhanced bootstrap compatibility */
 .p-breadcrumb .p-breadcrumb-chevron {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@ -4408,6 +4408,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Vendor extensions to the designer enhanced bootstrap compatibility */
 .p-breadcrumb .p-breadcrumb-chevron {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@ -4408,6 +4408,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Vendor extensions to the designer enhanced bootstrap compatibility */
 .p-breadcrumb .p-breadcrumb-chevron {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@ -4347,6 +4347,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #edebe9;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #edebe9;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-button-label {
  font-weight: 600;
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@ -4359,4 +4359,28 @@
  color: #212529;
 }

+.p-divider .p-divider-content {
+  background-color: #323232;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #4b4b4b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #4b4b4b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@ -4359,4 +4359,28 @@
  color: #212529;
 }

+.p-divider .p-divider-content {
+  background-color: #323232;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #4b4b4b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #4b4b4b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@ -4359,4 +4359,28 @@
  color: #212529;
 }

+.p-divider .p-divider-content {
+  background-color: #323232;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #4b4b4b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #4b4b4b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@ -4359,4 +4359,28 @@
  color: #212529;
 }

+.p-divider .p-divider-content {
+  background-color: #323232;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #4b4b4b;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #4b4b4b;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@ -4420,6 +4420,30 @@
  color: #212121;
 }

+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1.25rem 0;
+  padding: 0 1.25rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1.25rem;
+  padding: 1.25rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-accordion .p-accordion-tab {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 0;
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@ -4420,6 +4420,30 @@
  color: #212121;
 }

+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1.25rem 0;
+  padding: 0 1.25rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1.25rem;
+  padding: 1.25rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-accordion .p-accordion-tab {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 0;
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@ -4420,6 +4420,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1.25rem 0;
+  padding: 0 1.25rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1.25rem;
+  padding: 1.25rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-accordion .p-accordion-tab {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 0;
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@ -4420,6 +4420,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1.25rem 0;
+  padding: 0 1.25rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1.25rem;
+  padding: 1.25rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-accordion .p-accordion-tab {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 0;
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@ -4420,6 +4420,30 @@
  color: #212121;
 }

+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-accordion .p-accordion-tab {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 0;
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@ -4420,6 +4420,30 @@
  color: #212121;
 }

+.p-divider .p-divider-content {
+  background-color: #1e1e1e;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(255, 255, 255, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-accordion .p-accordion-tab {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 0;
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@ -4420,6 +4420,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-accordion .p-accordion-tab {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 0;
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@ -4420,6 +4420,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px rgba(0, 0, 0, 0.12);
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-accordion .p-accordion-tab {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  margin-bottom: 0;
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@ -4347,6 +4347,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #c8c8c8;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #c8c8c8;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header .p-panel-header-icon {
  color: #ffffff;
 }
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@ -4359,6 +4359,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #c8c8c8;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #c8c8c8;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header .p-panel-header-icon {
  color: #ffffff;
 }
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@ -4359,6 +4359,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #c8c8c8;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #c8c8c8;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header .p-panel-header-icon {
  color: #848484;
 }
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@ -4359,6 +4359,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #c8c8c8;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #c8c8c8;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header .p-panel-header-icon {
  color: #848484;
 }
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@ -4347,6 +4347,30 @@
  color: #262222;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dadada;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dadada;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 .p-panel .p-panel-header .p-panel-header-icon {
  color: #ffffff;
 }
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@ -4396,6 +4396,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #2196F3;
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@ -4396,6 +4396,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #4CAF50;
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@ -4396,6 +4396,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #FFC107;
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@ -4396,6 +4396,30 @@
  color: #ffffff;
 }

+.p-divider .p-divider-content {
+  background-color: #ffffff;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #dee2e6;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #dee2e6;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #9C27B0;
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@ -4396,6 +4396,30 @@
  color: #121212;
 }

+.p-divider .p-divider-content {
+  background-color: #1f2d40;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #304562;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #304562;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #64B5F6;
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@ -4396,6 +4396,30 @@
  color: #121212;
 }

+.p-divider .p-divider-content {
+  background-color: #1f2d40;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #304562;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #304562;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #81C784;
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@ -4396,6 +4396,30 @@
  color: #121212;
 }

+.p-divider .p-divider-content {
+  background-color: #1f2d40;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #304562;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #304562;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #FFD54F;
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@ -4396,6 +4396,30 @@
  color: #121212;
 }

+.p-divider .p-divider-content {
+  background-color: #1f2d40;
+}
+.p-divider.p-divider-horizontal {
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+.p-divider.p-divider-horizontal:before {
+  border-top: 1px #304562;
+}
+.p-divider.p-divider-horizontal .p-divider-content {
+  padding: 0 0.5rem;
+}
+.p-divider.p-divider-vertical {
+  margin: 0 1rem;
+  padding: 1rem 0;
+}
+.p-divider.p-divider-vertical:before {
+  border-left: 1px #304562;
+}
+.p-divider.p-divider-vertical .p-divider-content {
+  padding: 0.5rem 0;
+}
+
 /* Customizations to the designer theme should be defined here */
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
  background-color: #BA68C8;
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@ -12,6 +12,7 @@
                <a href="https://github.com/primefaces/primevue" target="_blank">Source Code</a>
                <router-link to="/support">Support</router-link>
                <a href="https://www.primefaces.org/store" target="_blank">Store</a>
+                <router-link to="/accessibility">Accessibility</router-link>
            </div>

            <div class="menu-category">Theming</div>
@ -247,9 +248,9 @@

            <div class="menu-category">Misc</div>
            <div class="menu-items">
-                <router-link to="/accessibility">Accessibility</router-link>
                <router-link to="/badge">Badge</router-link>
                <router-link to="/blockui">BlockUI</router-link>
+                <router-link to="/divider">Divider <span class="p-tag">New</span></router-link>
                <router-link to="/inplace">Inplace</router-link>
                <router-link to="/progressbar">ProgressBar</router-link>
                <router-link to="/progressspinner">ProgressSpinner</router-link>
--- a/src/assets/styles/app/_menu.scss
+++ b/src/assets/styles/app/_menu.scss
@ -35,7 +35,8 @@

            a {
                color: var(--text-color);
-                display: block;
+                display: flex;
+                align-items: center;
                padding: .5rem;
                border-radius: 3px;
                cursor: pointer;
@ -58,6 +59,7 @@
                .p-tag {
                    padding-top:.125rem;
                    padding-bottom: .125rem;
+                    margin-left: .5rem;
                }
            }

--- a/src/components/divider/Divider.d.ts
+++ b/src/components/divider/Divider.d.ts
@ -0,0 +1,9 @@
+import Vue from 'vue';
+
+declare class Divider extends Vue {
+    align?: string;
+    layout?: string;
+    type?: string;
+}
+
+export default Divider;
--- a/src/components/divider/Divider.vue
+++ b/src/components/divider/Divider.vue
@ -0,0 +1,125 @@
+<template>
+    <div :class="containerClass" role="separator">
+        <div class="p-divider-content" v-if="$slots.default">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        align: {
+            mode: String,
+            default: null
+        },
+        layout: {
+            mode: String,
+            default: 'horizontal'
+        },
+        type: {
+            mode: String,
+            default: 'solid'
+        }
+    },
+    computed: {
+        containerClass() {
+            return ['p-divider p-component', 'p-divider-' + this.layout, 'p-divider-' + this.type, 
+                {'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left')},
+                {'p-divider-center': this.layout === 'horizontal' && this.align === 'center'},
+                {'p-divider-right': this.layout === 'horizontal' && this.align === 'right'},
+                {'p-divider-top': this.layout === 'vertical' && (this.align === 'top')},
+                {'p-divider-center': this.layout === 'vertical' && (!this.align || this.align === 'center')},
+                {'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom'}
+            ];
+        }
+    }
+}
+</script>
+
+<style>
+.p-divider-horizontal {
+    display: flex;
+    width: 100%;
+    position: relative;
+    align-items: center;
+}
+
+.p-divider-horizontal:before {
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    content: "";
+}
+
+.p-divider-horizontal.p-divider-left {
+    justify-content: flex-start;
+}
+
+.p-divider-horizontal.p-divider-right {
+    justify-content: flex-end;
+}
+
+.p-divider-horizontal.p-divider-center {
+    justify-content: center;
+}
+
+.p-divider-content {
+    z-index: 1;
+}
+
+.p-divider-vertical {
+    min-height: 100%;
+    margin: 0 1rem;
+    display: flex;
+    position: relative;
+    justify-content: center;
+}
+
+.p-divider-vertical:before {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    content: "";
+}
+
+.p-divider-vertical.p-divider-top {
+    align-items: flex-start;
+}
+
+.p-divider-vertical.p-divider-center {
+    align-items: center;
+}
+
+.p-divider-vertical.p-divider-bottom {
+    align-items: flex-end;
+}
+
+.p-divider-solid.p-divider-horizontal:before {
+    border-top-style: solid;
+}
+
+.p-divider-solid.p-divider-vertical:before {
+    border-left-style: solid;
+}
+
+.p-divider-dashed.p-divider-horizontal:before {
+    border-top-style: dashed;
+}
+
+.p-divider-dashed.p-divider-vertical:before {
+    border-left-style: dashed;
+}
+
+.p-divider-dotted.p-divider-horizontal:before {
+    border-top-style: dotted;
+}
+
+.p-divider-dotted.p-divider-horizontal:before {
+    border-left-style: dotted;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -26,6 +26,7 @@ import DataView from './components/dataview/DataView';
 import DataViewLayoutOptions from './components/dataviewlayoutoptions/DataViewLayoutOptions';
 import DeferredContent from './components/deferredcontent/DeferredContent';
 import Dialog from './components/dialog/Dialog';
+import Divider from './components/divider/Divider';
 import Dropdown from './components/dropdown/Dropdown';
 import Editor from './components/editor/Editor';
 import Fieldset from './components/fieldset/Fieldset';
@ -132,6 +133,7 @@ app.component('DataView', DataView);
 app.component('DataViewLayoutOptions', DataViewLayoutOptions);
 app.component('DeferredContent', DeferredContent);
 app.component('Dialog', Dialog);
+app.component('Divider', Divider);
 app.component('Dropdown', Dropdown);
 app.component('Editor', Editor);
 app.component('Fieldset', Fieldset);
--- a/src/router/index.js
+++ b/src/router/index.js
@ -302,6 +302,11 @@ const routes = [
        name: 'display',
        component: () => import('../views/display/DisplayDemo.vue')
    },
+    {
+        path: '/divider',
+        name: 'divider',
+        component: () => import('../views/divider/DividerDemo.vue')
+    },
    {
        path: '/dropdown',
        name: 'dropdown',
--- a/src/views/divider/DividerDemo.vue
+++ b/src/views/divider/DividerDemo.vue
@ -0,0 +1,162 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Divider</h1>
+                <p>Divider is used to separate contents.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Basic</h5>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                <Divider />
+
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+
+                <Divider />
+
+                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+
+                <Divider />
+
+                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur 
+                            a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                            Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.</p>
+            </div>
+
+            <div class="card">
+                <h5>Text with Dashed Style</h5>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                <Divider align="left" type="dashed">
+                    <b>Left</b>
+                </Divider>
+
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+
+                <Divider align="center" type="dashed">
+                    <b>Center</b>
+                </Divider>
+
+                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+
+                <Divider align="right" type="dashed">
+                    <b>Right</b>
+                </Divider>
+
+                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur 
+                            a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                            Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.</p>
+            </div>
+
+            <div class="card">
+                <h5>Content</h5>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                <Divider align="left">
+                    <div class="p-d-inline-flex p-ai-center">
+                        <i class="pi pi-user p-mr-2"></i>
+                        <b>Icon</b>
+                    </div>
+                </Divider>
+
+                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+
+                <Divider align="center">
+                    <span class="p-tag">Badge</span>
+                </Divider>
+
+                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                            cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+
+                <Divider align="right">
+                    <Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
+                </Divider>
+
+                <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur 
+                            a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                            Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.</p>
+            </div>
+
+            <div class="card">
+                <h5>Vertical</h5>
+                <div class="p-d-flex">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+                    <Divider layout="vertical" />
+
+                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+
+                    <Divider layout="vertical" />
+
+                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5>Vertical with Content</h5>
+                <div class="p-grid">
+                    <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                        <div class="p-fluid">
+                            <div class="p-field">
+                                <label for="username">Username</label>
+                                <InputText id="username" type="text" />
+                            </div>
+                            <div class="p-field">
+                                <label for="password">Password</label>
+                                <InputText id="password" type="password" />
+                            </div>
+                            <Button label="Login"></Button>
+                         </div>
+                    </div>
+                    <div class="p-col-2">
+                        <Divider layout="vertical">
+                            <b>OR</b>
+                        </Divider>
+                    </div>
+                    <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                        <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <DividerDoc />
+    </div>
+</template>
+
+<script>
+import DividerDoc from './DividerDoc';
+
+export default {
+    components: {
+        'DividerDoc': DividerDoc
+    }
+}
+</script>
--- a/src/views/divider/DividerDoc.vue
+++ b/src/views/divider/DividerDoc.vue
@ -0,0 +1,326 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h5>Import</h5>
+<pre v-code.script>
+<code>
+import Divider from 'primevue/divider';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>Divider has two orientations defined with the <i>layout</i> property, default is "horizontal" and the alternative is "vertical".</p>
+<pre v-code>
+<code>
+&lt;div&gt;Content 1&lt;/div&gt;
+&lt;Divider /&gt;
+&lt;div&gt;Content 2&lt;/div&gt;
+
+</code></pre>
+
+                <h5>Border Style</h5>
+                <p>Style of the border is configured with the <i>type</i> property and supports 3 values; default is "solid" and other possibilities are "dashed" and "dotted".</p>
+<pre v-code>
+<code>
+&lt;div&gt;Content 1&lt;/div&gt;
+&lt;Divider type="dashed"/&gt;
+&lt;div&gt;Content 2&lt;/div&gt;
+
+</code></pre>
+
+                <h5>Vertical Divider</h5>
+                <p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
+<pre v-code>
+<code>
+&lt;div class="p-d-flex"&gt;
+    &lt;div&gt;Content 1&lt;/div&gt;
+    &lt;Divider layout="vertical" /&gt;
+    &lt;div&gt;Content 2&lt;/div&gt;
+    &lt;Divider layout="vertical" /&gt;
+    &lt;div&gt;Content 3&lt;/div&gt;
+&lt;/div&gt;
+
+</code></pre>
+
+                <h5>Content</h5>
+                <p>Any content placed inside is rendered within the boundaries of the divider. In addition, location 
+                    of the content is configured with the <i>align</i> property. In horizontal layout, alignment options
+                    are "left", "center" and "right" whereas vertical mode supports "top", "center" and "bottom".
+                </p>
+<pre v-code>
+<code>
+&lt;div&gt;Content 1&lt;/div&gt;
+
+&lt;Divider align="left"&gt;
+    &lt;div class="p-d-inline-flex p-ai-center"&gt;
+        &lt;i class="pi pi-user p-mr-2"&gt;&lt;/i&gt;
+        &lt;b&gt;Icon&lt;/b&gt;
+    &lt;/div&gt;
+&lt;/Divider&gt;
+
+&lt;div&gt;Content 2&lt;/div&gt;
+
+&lt;Divider align="center"&gt;
+    &lt;span class="p-tag"&gt;Badge&lt;/span&gt;
+&lt;/Divider&gt;
+
+&lt;div&gt;Content 3&lt;/div&gt;
+
+&lt;Divider align="right"&gt;
+    &lt;Button label="Button" icon="pi pi-search" class="p-button-outlined"&gt;&lt;/Button&gt;
+&lt;/Divider&gt;
+
+&lt;div&gt;Content 4&lt;/div&gt;
+
+</code></pre>
+
+				<h5>Properties</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>align</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Alignment of the content, options are "left", "center", "right" for horizontal layout 
+                                    and "top", "center", "bottom" for vertical.</td>
+                            </tr>
+                            <tr>
+                                <td>layout</td>
+                                <td>string</td>
+                                <td>horizontal</td>
+                                <td>Specifies the orientation, valid values are "horizontal" and "vertical".</td>
+                            </tr>
+                            <tr>
+                                <td>type</td>
+                                <td>String</td>
+                                <td>solid</td>
+                                <td>Border style type, default is "solid" and other options are "dashed" and "dotted".</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling</h5>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-divider</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-horizontal</td>
+                                <td>Container element in horizontal layout.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-vertical</td>
+                                <td>Container element in vertical layout.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-solid</td>
+                                <td>Container element with solid border.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-dashed</td>
+                                <td>Container element with dashed border.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-dotted</td>
+                                <td>Container element with dotted border.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-left</td>
+                                <td>Container element with content aligned to left.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-right</td>
+                                <td>Container element with content aligned to right.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-center</td>
+                                <td>Container element with content aligned to center.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-bottom</td>
+                                <td>Container element with content aligned to bottom.</td>
+                            </tr>
+                            <tr>
+                                <td>p-divider-top</td>
+                                <td>Container element with content aligned to top.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/card" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<pre v-code>
+<code><template v-pre>
+&lt;div class="card"&gt;
+    &lt;h5&gt;Basic&lt;/h5&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+
+    &lt;Divider /&gt;
+
+    &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
+
+    &lt;Divider /&gt;
+
+    &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
+
+    &lt;Divider /&gt;
+
+    &lt;p&gt;Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur 
+                a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+    &lt;h5&gt;Text with Dashed Style&lt;/h5&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+
+    &lt;Divider align="left" type="dashed"&gt;
+        &lt;b&gt;Left&lt;/b&gt;
+    &lt;/Divider&gt;
+
+    &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
+
+    &lt;Divider align="center" type="dashed"&gt;
+        &lt;b&gt;Center&lt;/b&gt;
+    &lt;/Divider&gt;
+
+    &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
+
+    &lt;Divider align="right" type="dashed"&gt;
+        &lt;b&gt;Right&lt;/b&gt;
+    &lt;/Divider&gt;
+
+    &lt;p&gt;Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur 
+                a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+    &lt;h5&gt;Content&lt;/h5&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+
+    &lt;Divider align="left"&gt;
+        &lt;div class="p-d-inline-flex p-ai-center"&gt;
+            &lt;i class="pi pi-user p-mr-2"&gt;&lt;/i&gt;
+            &lt;b&gt;Icon&lt;/b&gt;
+        &lt;/div&gt;
+    &lt;/Divider&gt;
+
+    &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
+
+    &lt;Divider align="center"&gt;
+        &lt;span class="p-tag"&gt;Badge&lt;/span&gt;
+    &lt;/Divider&gt;
+
+    &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
+
+    &lt;Divider align="right"&gt;
+        &lt;Button label="Button" icon="pi pi-search" class="p-button-outlined"&gt;&lt;/Button&gt;
+    &lt;/Divider&gt;
+
+    &lt;p&gt;Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur 
+                a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+    &lt;h5&gt;Vertical&lt;/h5&gt;
+    &lt;div class="p-d-flex"&gt;
+        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+
+        &lt;Divider layout="vertical" /&gt;
+
+        &lt;p&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+                    voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.&lt;/p&gt;
+
+        &lt;Divider layout="vertical" /&gt;
+
+        &lt;p&gt;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+    &lt;h5&gt;Vertical with Content&lt;/h5&gt;
+    &lt;div class="p-grid"&gt;
+        &lt;div class="p-col-5 p-d-flex p-ai-center p-jc-center"&gt;
+            &lt;div class="p-fluid"&gt;
+                &lt;div class="p-field"&gt;
+                    &lt;label for="username"&gt;Username&lt;/label&gt;
+                    &lt;InputText id="username" type="text" /&gt;
+                &lt;/div&gt;
+                &lt;div class="p-field"&gt;
+                    &lt;label for="password"&gt;Password&lt;/label&gt;
+                    &lt;InputText id="password" type="password" /&gt;
+                &lt;/div&gt;
+                &lt;Button label="Login"&gt;&lt;/Button&gt;
+                &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class="p-col-2"&gt;
+            &lt;Divider layout="vertical"&gt;
+                &lt;b&gt;OR&lt;/b&gt;
+            &lt;/Divider&gt;
+        &lt;/div&gt;
+        &lt;div class="p-col-5 p-d-flex p-ai-center p-jc-center"&gt;
+            &lt;Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"&gt;&lt;/Button&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+</template>
+</code></pre>
+
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
				`@ -0,0 +1 @@`
				`export * from './components/divider/Divider';`