<div class="content__title"> 
 | 
    <h1> 
 | 
        Colors 
 | 
        <small>Color Palettes</small> 
 | 
    </h1> 
 | 
</div> 
 | 
<div nz-row [nzGutter]="16"> 
 | 
    <div nz-col [nzMd]="24"> 
 | 
        <nz-card nzTitle="Classic colors"> 
 | 
            <div nz-row *ngFor="let c of colorSrv.brands"> 
 | 
                <div nz-col [nzSpan]="8"> 
 | 
                    <div class="bg-{{c}}-light p-lg">.bg-{{c}}-light<br>.text-{{c}}-light</div> 
 | 
                </div> 
 | 
                <div nz-col [nzSpan]="8"> 
 | 
                    <div class="bg-{{c}} p-lg">.bg-{{c}}<br>.text-{{c}}</div> 
 | 
                </div> 
 | 
                <div nz-col [nzSpan]="8"> 
 | 
                    <div class="bg-{{c}}-dark p-lg">.bg-{{c}}-dark<br>.text-{{c}}-dark</div> 
 | 
                </div> 
 | 
            </div> 
 | 
        </nz-card> 
 | 
    </div> 
 | 
</div> 
 | 
<div nz-row [nzGutter]="16"> 
 | 
    <div nz-col [nzMd]="24"> 
 | 
        <nz-card nzTitle="Name colors"> 
 | 
            <div nz-row *ngFor="let c of colors"> 
 | 
                <div nz-col [nzSpan]="8"> 
 | 
                    <div class="bg-{{c}}-light p-lg">.bg-{{c}}-light<br>.text-{{c}}-light</div> 
 | 
                </div> 
 | 
                <div nz-col [nzSpan]="8"> 
 | 
                    <div class="bg-{{c}} p-lg">.bg-{{c}}<br>.text-{{c}}</div> 
 | 
                </div> 
 | 
                <div nz-col [nzSpan]="8"> 
 | 
                    <div class="bg-{{c}}-dark p-lg">.bg-{{c}}-dark<br>.text-{{c}}-dark</div> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div nz-row> 
 | 
                <div nz-col [nzSpan]="5"> 
 | 
                    <div class="bg-grey-darker p-lg">.bg-grey-darker<br>.color-grey-darker</div> 
 | 
                </div> 
 | 
                <div nz-col [nzSpan]="5"> 
 | 
                    <div class="bg-grey-dark p-lg">.bg-grey-dark<br>.color-grey-dark</div> 
 | 
                </div> 
 | 
                <div nz-col [nzSpan]="4"> 
 | 
                    <div class="bg-grey p-lg">.bg-grey<br>.color-grey</div> 
 | 
                </div> 
 | 
                <div nz-col [nzSpan]="5"> 
 | 
                    <div class="bg-grey-light p-lg">.bg-grey-light<br>.color-grey-light</div> 
 | 
                </div> 
 | 
                <div nz-col [nzSpan]="5"> 
 | 
                    <div class="bg-grey-lighter p-lg">.bg-grey-lighter<br>.color-grey-lighter</div> 
 | 
                </div> 
 | 
            </div> 
 | 
        </nz-card> 
 | 
    </div> 
 | 
</div> 
 | 
<div nz-row [nzGutter]="16"> 
 | 
    <div nz-col [nzMd]="24"> 
 | 
        <nz-card nzTitle="Full Colors"> 
 | 
            <div nz-row> 
 | 
                <div nz-col [nzSpan]="4" *ngFor="let c of colorSrv.names"> 
 | 
                    <div *ngFor="let i of nums" class="bg-{{c}}-{{i}} p-lg"> 
 | 
                        .bg-{{c}}-{{i}}<br> 
 | 
                        .bg-{{c}}-{{i}}-h<br> 
 | 
                        .text-{{c}}-{{i}}<br> 
 | 
                    </div> 
 | 
                </div> 
 | 
            </div> 
 | 
        </nz-card> 
 | 
    </div> 
 | 
</div> 
 |