fuse-angular/src/app/main/documentation/components/countdown/countdown.component.html

<div id="countdown" class="page-layout simple fullwidth">

    <!-- HEADER -->
    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutAlign="center start">
            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-16">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Components</span>
            </div>
            <div class="h2 mt-16">Countdown</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">

        <p>
            <code>fuse-countdown</code> is a custom built Fuse component allows you to create a countdowns.
        </p>

        <div class="my-48">
            <h2>Sample</h2>
            <p fxLayout="row" fxLayoutAlign="start start">
                <fuse-countdown eventDate="2019-07-28"></fuse-countdown>
            </p>
        </div>

        <div class="my-48">
            <h2>Usage</h2>
            <p class="py-8">
                <fuse-highlight lang="html">
                    <textarea #source>
                        <fuse-countdown eventDate="2019-07-28"></fuse-countdown>
                    </textarea>
                </fuse-highlight>
            </p>
        </div>

        <div class="my-48">
            <h2>Inputs</h2>
            <p class="py-8" fxLayout="row" fxLayoutAlign="start center">
                <code class="mr-16">eventDate</code>
                <span>
                    The date of the event. Since fuse-countdown uses moment.js to parse the dates, any moment.js
                    compatible date string can be used.
                </span>
            </p>
        </div>

    </div>

</div>