app.component.html

<mat-toolbar color="primary" class="mzd-app-toolbar">
  <h1 class="mat-headline">{{ title }}</h1>
  <div style="flex: 1;"></div>

  <mat-slide-toggle color="accent" (change)="setDarkMode($event.checked)">
    Dark Mode
  </mat-slide-toggle>
</mat-toolbar>

<section class="mzd-app-section">
  <mat-checkbox labelPosition="before" [(ngModel)]="alternateSide" class="mzd-app-margin">Alternate side</mat-checkbox>
</section>

<section class="mzd-app-section">
  <label id="radio-label" class="mzd-app-margin">First content side:</label>
  <mat-radio-group aria-labelledby="radio-label" [(ngModel)]="firstContentSide">
    <mat-radio-button labelPosition="before" value="left" class="mzd-app-margin">Left</mat-radio-button>
    <mat-radio-button labelPosition="before" value="right" class="mzd-app-margin">Right</mat-radio-button>
  </mat-radio-group>
</section>

<mzd-timeline [alternateSide]="alternateSide" [firstContentSide]="firstContentSide">

  <!-- mzd-timeline-card no-border -->
  <mzd-timeline-content>
    <div>
      <h1>Custom-card with No-border</h1>
      <hr>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempora dolor ullam exercitationem illum enim id
        maxime sunt eius, neque repellat corporis atque voluptatibus quasi nam necessitatibus odit commodi quisquam?</p>
    </div>
    <mzd-icon>
      <fa-icon icon="briefcase"></fa-icon>
    </mzd-icon>
  </mzd-timeline-content>

  <!-- no-mzd-timeline-card mat-card no-border -->
  <mzd-timeline-content [card]="false">
    <mzd-icon><strong>X</strong></mzd-icon>
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          Mat-card with No-border
        </mat-card-title>
        <mat-card-subtitle>
          20-05-2020
        </mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem delectus impedit ipsa ad minima doloribus
        recusandae modi libero sint illo perferendis, unde, porro voluptate totam assumenda labore quia sit quas?
      </mat-card-content>
    </mat-card>
  </mzd-timeline-content>

  <!-- mzd-timeline-card mat-card mzd-timeline-border -->
  <mzd-timeline-content [card]="true" [border]="true">
    <mzd-icon>
      <fa-icon icon="camera"></fa-icon>
    </mzd-icon>
    <mat-card>
      <mat-card-header>
        <mat-card-title>
          Mat-card inside Custom-card with Border
        </mat-card-title>
        <mat-card-subtitle>
          20-05-2020
        </mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem delectus impedit ipsa ad minima doloribus
        recusandae modi libero sint illo perferendis, unde, porro voluptate totam assumenda labore quia sit quas?
      </mat-card-content>
    </mat-card>
  </mzd-timeline-content>

  <!-- mzd-timeline-card mzd-timeline-border -->
  <mzd-timeline-content [border]="true">
    <mzd-icon>
      <fa-icon icon="bell"></fa-icon>
    </mzd-icon>
    <div>
      <h1>Custom-card with Border</h1>
      <hr>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempora dolor ullam exercitationem illum enim id
        maxime sunt eius, neque repellat corporis atque voluptatibus quasi nam necessitatibus odit commodi quisquam?</p>
    </div>
  </mzd-timeline-content>

  <!-- mzd-timeline-border -->
  <mzd-timeline-content [card]="false" [border]="true">
    <mzd-icon>
      <fa-icon icon="envelope-open"></fa-icon>
    </mzd-icon>
    <div style="padding: 16px;">
      <h1>No-card with Border</h1>
      <hr>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut tempora dolor ullam exercitationem illum enim id
        maxime sunt eius, neque repellat corporis atque voluptatibus quasi nam necessitatibus odit commodi quisquam?</p>
    </div>
  </mzd-timeline-content>

</mzd-timeline>

<footer class="mzd-app-footer">
  <div class="footer-content">
    Made with &hearts; by <a class="portfolio" href="https://mazedulislam.com/" target="_blank">Mazedul Islam</a>
  </div>
</footer>