diff --git a/cypress/integration/10.content.spec.js b/cypress/integration/10.content.spec.js
new file mode 100644
index 00000000..a7f5b966
--- /dev/null
+++ b/cypress/integration/10.content.spec.js
@@ -0,0 +1,31 @@
+/// <reference types="Cypress" />
+
+context('Custom split content example page tests', () => {
+  beforeEach(() => {
+    cy.visit('/examples/custom-gutter-content')
+  })
+
+  it('Verify gutter has custom label', () => {
+    cy.wait(1000)
+    cy.get('.custom-gutter-content').should('have.text', 'Custom label')
+  })
+
+  it('Verify gutter custom label is updated', () => {
+    cy.wait(1000)
+
+    cy.get('input:text').type(' updated')
+    cy.get('.custom-gutter-content').should('have.text', 'Custom label updated')
+  })
+
+  it('Verify gutter button is clicked', () => {
+    cy.wait(1000)
+
+    const stub = cy.stub()
+    cy.on('window:alert', stub)
+    cy.get('.custom-gutter-content > input:button')
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith('I was clicked')
+      })
+  })
+})
diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
index 700afc03..0c86f702 100644
--- a/projects/angular-split/src/lib/component/split.component.ts
+++ b/projects/angular-split/src/lib/component/split.component.ts
@@ -13,6 +13,8 @@ import {
   QueryList,
   EventEmitter,
   ViewEncapsulation,
+  ContentChild,
+  TemplateRef,
 } from '@angular/core'
 import { Observable, Subscriber, Subject } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
@@ -80,11 +82,14 @@ import {
         (touchend)="clickGutter($event, index + 1)"
       >
         <div class="as-split-gutter-icon"></div>
+        <ng-container [ngTemplateOutlet]="gutterTemplate"></ng-container>
       </div>
     </ng-template>`,
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class SplitComponent implements AfterViewInit, OnDestroy {
+  @ContentChild('gutterTemplate') gutterTemplate: TemplateRef<any>
+
   @Input() set direction(v: 'horizontal' | 'vertical') {
     this._direction = v === 'vertical' ? 'vertical' : 'horizontal'
 
diff --git a/src/app/examples/custom-gutter-content/custom-gutter-content.component.scss b/src/app/examples/custom-gutter-content/custom-gutter-content.component.scss
new file mode 100644
index 00000000..9c6fddce
--- /dev/null
+++ b/src/app/examples/custom-gutter-content/custom-gutter-content.component.scss
@@ -0,0 +1,20 @@
+.btns {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.custom-gutter-container {
+  height: 100%;
+  background: no-repeat
+    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==')
+    50% 90%;
+}
+
+.custom-gutter-content {
+  width: 40px;
+  margin-top: 16px;
+  transform: rotate(90deg);
+  white-space: nowrap;
+}
diff --git a/src/app/examples/custom-gutter-content/custom-gutter-content.component.ts b/src/app/examples/custom-gutter-content/custom-gutter-content.component.ts
new file mode 100644
index 00000000..92d1e2b2
--- /dev/null
+++ b/src/app/examples/custom-gutter-content/custom-gutter-content.component.ts
@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { AComponent } from '../../ui/components/AComponent'
+
+@Component({
+  selector: 'sp-ex-custom-gutter-content',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'split-example-page',
+  },
+  styleUrls: ['./custom-gutter-content.component.scss'],
+  template: `
+    {{ testChangeDetectorRun() }}
+    <div class="container">
+      <sp-example-title [type]="exampleEnum.CONTENT"></sp-example-title>
+      <div class="split-example ex-percent">
+        <as-split unit="percent" #split="asSplit">
+          <as-split-area #area1="asSplitArea" [size]="70">
+            <ng-template #gutterTemplate>
+              <div class="custom-gutter-container">
+                <div class="custom-gutter-content">
+                  <span>{{ customLabel }}</span>
+                  <input type="button" value="button" (click)="onClick()" />
+                </div>
+              </div>
+            </ng-template>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, 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.
+            </p>
+          </as-split-area>
+          <as-split-area size="70" #area2="asSplitArea">
+            <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 eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
+              tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+              nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
+              autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
+              illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+          </as-split-area>
+        </as-split>
+      </div>
+      <h5>Custom label</h5>
+      <input type="text" [(ngModel)]="customLabel" />
+    </div>
+  `,
+})
+export class CustomGutterContentComponent extends AComponent {
+  customLabel = 'Custom label'
+  constructor() {
+    super()
+  }
+
+  onClick() {
+    alert('I was clicked')
+  }
+}
diff --git a/src/app/examples/custom-gutter-content/custom-gutter-content.module.ts b/src/app/examples/custom-gutter-content/custom-gutter-content.module.ts
new file mode 100644
index 00000000..e9fc45e1
--- /dev/null
+++ b/src/app/examples/custom-gutter-content/custom-gutter-content.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { CustomGutterContentComponent } from './custom-gutter-content.component'
+import { RouterModule } from '@angular/router'
+import { AngularSplitModule } from 'angular-split'
+import { UiModule } from '../../ui/ui.module'
+import { FormsModule } from '@angular/forms'
+
+@NgModule({
+  declarations: [CustomGutterContentComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: CustomGutterContentComponent }]),
+    AngularSplitModule,
+    FormsModule,
+    UiModule,
+  ],
+})
+export class CustomGutterContentModule {}
diff --git a/src/app/examples/example-types.ts b/src/app/examples/example-types.ts
index 7258fffe..38290998 100644
--- a/src/app/examples/example-types.ts
+++ b/src/app/examples/example-types.ts
@@ -9,6 +9,7 @@ export enum ExampleEnum {
   NESTED = 'nested',
   SIMPLE = 'simple',
   STYLE = 'style',
+  CONTENT = 'content',
   SYNC = 'sync',
   TOGGLE = 'toggle',
   TRANSITION = 'transition',
diff --git a/src/app/examples/examples.routes.ts b/src/app/examples/examples.routes.ts
index 6d7a1a77..c89a2a8b 100644
--- a/src/app/examples/examples.routes.ts
+++ b/src/app/examples/examples.routes.ts
@@ -70,6 +70,16 @@ export const exampleRoutes: Routes = [
     loadChildren: () =>
       import('./custom-gutter-style/custom-gutter-style.module').then((m) => m.CustomGutterStyleModule),
   },
+  {
+    data: {
+      type: ExampleEnum.CONTENT,
+      label: 'Split with custom gutter content',
+      srcUrl: `${srcUrlBaseApp}/custom-gutter-content/custom-gutter-content.component.ts`,
+    },
+    path: 'custom-gutter-content',
+    loadChildren: () =>
+      import('./custom-gutter-content/custom-gutter-content.module').then((m) => m.CustomGutterContentModule),
+  },
   {
     data: {
       type: ExampleEnum.TOGGLE,