refactor: update components examples

Author: mrholek

src/pug/_mixins/example.pug

@@ -1,6 +1,6 @@
 mixin example(script)
   - var id = Math.floor(Math.random() * (15 - 1300) + 1300)
-  .example.mt-4
+  .example
     ul.nav.nav-tabs(role="tablist")
       li.nav-item
         a.nav-link.active(data-coreui-toggle="tab" href="#preview-"+id role="tab")

src/pug/views/notifications/modals.pug

@@ -17,7 +17,7 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Modal components
+          strong Modal
         .card-body
           p.text-medium-emphasis.small
             | Below is a 
@@ -45,7 +45,8 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Live demo
+          strong Modal
+          span.small.ms-1 Live demo
         .card-body
           p.text-medium-emphasis.small
             | Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
@@ -66,7 +67,8 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Static backdrop
+          strong Modal
+          span.small.ms-1 Static backdrop
         .card-body
           p.text-medium-emphasis.small
             | When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
@@ -87,7 +89,8 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Scrolling long content
+          strong Modal
+          span.small.ms-1 Scrolling long content
         .card-body
           p.text-medium-emphasis.small
             | When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
@@ -158,7 +161,8 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Vertically centered
+          strong Modal
+          span.small.ms-1 Vertically centered
         .card-body
           p.text-medium-emphasis.small
             | Add 
@@ -202,7 +206,8 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Tooltips and popovers
+          strong Modal
+          span.small.ms-1 Tooltips and popovers
         .card-body
           p.text-medium-emphasis.small
             a(href='https://coreui.io/docs/4.0/components/tooltips/') Tooltips
@@ -237,7 +242,8 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Using the grid
+          strong Modal
+          span.small.ms-1 Using the grid
         .card-body
           p.text-medium-emphasis.small
             | Utilize the Bootstrap grid system within a modal by nesting 
@@ -278,7 +284,8 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Varying modal content
+          strong Modal
+          span.small.ms-1 Varying modal content
         .card-body
           p.text-medium-emphasis.small
             | Have a bunch of buttons that all trigger the same modal with slightly different contents? Use 
@@ -319,7 +326,8 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Optional sizes
+          strong Modal
+          span.small.ms-1 Optional sizes
         .card-body
           p.text-medium-emphasis.small
             | Modals have three optional sizes, available via modifier classes to be placed on a 
@@ -387,7 +395,8 @@ block view
     .col-12
       .card.mb-4
         .card-header
-          | Fullscreen Modal
+          strong Modal
+          span.small.ms-1 Fullscreen Modal
         .card-body
           p.text-medium-emphasis.small
             | Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a 

src/pug/views/widgets.pug

@@ -13,7 +13,7 @@ block breadcrumb
   +breadcrumb(['Home', 'Components'], 'Widgets')
 
 block view
-  .card
+  .card.mb-4
     .card-header
       string Widgets
     .card-body

src/scss/_examples.scss

@@ -1,4 +1,8 @@
 .example {
+  &:not(:first-child) {
+    margin-top: 1.5rem;
+  }
+
   .tab-content {
     background-color: $light-50 !important;