fuse-angular/src/app/main/quick-panel/quick-panel.component.html

<md-list class="date" cdk-focus-region-start>

    <h3 md-subheader cdk-focus-init>
        <span>Today</span>
    </h3>

    <div class="secondary-text mat-display-1 mb-0 p-16">
        <div class="mb-12">
            {{date | date:'EEEE'}}
        </div>
        <div fxLayout="row" fxLayoutAlign="start start">
            <span> {{date | date:'d'}}</span>
            <span class="mat-subheading-1">th</span>
            <span> {{date | date:'MMMM'}}</span>
        </div>
    </div>
</md-list>

<md-divider cdk-focus-region-end></md-divider>

<md-list>
    <h3 md-subheader>
        <span>Quick Settings</span>
    </h3>

    <md-list-item>
        <md-slide-toggle fxFlex class="mat-primary" [(ngModel)]="settings.notify" aria-label="Notifications"
                         labelPosition="before">
            <h3>Notifications</h3>
        </md-slide-toggle>
    </md-list-item>

    <md-list-item>
        <md-slide-toggle fxFlex class="mat-accent" [(ngModel)]="settings.cloud" aria-label="Cloud"
                         labelPosition="before">
            <h3>Cloud Sync</h3>
        </md-slide-toggle>
    </md-list-item>

    <md-list-item>
        <md-slide-toggle fxFlex class="mat-warn" [(ngModel)]="settings.retro" aria-label="Retro Thrusters"
                         labelPosition="before">
            <h3>Retro Thrusters</h3>
        </md-slide-toggle>
    </md-list-item>
</md-list>