added white text divider with title

src/app/app.module.ts

@@ -33,6 +33,7 @@ import { ChartsModule } from '@progress/kendo-angular-charts';
 import 'hammerjs';
 import { BkpDividerComponent } from './bkp-divider/bkp-divider.component';
 import { BkpDividerShadowBottomComponent } from './bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component';
+import { BkpDividerTextComponent } from './bkp-divider-text/bkp-divider-text.component';
 
 
 
@@ -48,7 +49,8 @@ import { BkpDividerShadowBottomComponent } from './bkp-divider-shadow-bottom/bkp
     CanvasComponent,
     LoanEditComponent,
     BkpDividerComponent,
-    BkpDividerShadowBottomComponent 
+    BkpDividerShadowBottomComponent,
+    BkpDividerTextComponent 
   ],
   imports: [
     BrowserModule,

src/app/bkp-divider-text/bkp-divider-text.component.html

@@ -0,0 +1,3 @@
+<div class='divider'>
+    <ng-content></ng-content>
+</div>

src/app/bkp-divider-text/bkp-divider-text.component.scss

@@ -0,0 +1,37 @@
+$link-color: #f52e62;
+$text-color: #3f517e;
+$hr-color:   rgba(0,0,0,0.35);
+$hr-text-color: #453986;
+
+$letter-spacing: .32em;
+
+$background-color: #fff;
+
+div.divider {
+    font-family: "Share Tech Mono", monospace;
+    color: $text-color;
+    font-size: 2vh;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
+    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      height: 0.09em;
+      min-width: 30vw;
+    }
+    
+    &::before {
+      background: linear-gradient(to right, rgba(240,240,240,0), #fff);
+      margin-right: 4vh;
+    }
+    
+    &::after {
+      background: linear-gradient(to left, rgba(240,240,240,0), #fff);
+      margin-left: 4vh;
+    } 
+  }

src/app/bkp-divider-text/bkp-divider-text.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BkpDividerTextComponent } from './bkp-divider-text.component';
+
+describe('BkpDividerTextComponent', () => {
+  let component: BkpDividerTextComponent;
+  let fixture: ComponentFixture<BkpDividerTextComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BkpDividerTextComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BkpDividerTextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/bkp-divider-text/bkp-divider-text.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'bkp-divider-text',
+  templateUrl: './bkp-divider-text.component.html',
+  styleUrls: ['./bkp-divider-text.component.scss']
+})
+export class BkpDividerTextComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/dashboard/dashboard.component.html

@@ -98,5 +98,6 @@
     </div>
     
     <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>  
+    <bkp-divider-text> some text </bkp-divider-text>
   </div>
 </div>