I had been looking thru all the documentation available at https://teradata.github.io/covalent/ but I didn't found any documentation about the "td-menu-header" found in the Teradata Covalent Quickstart.
This css framework seems interesting but the lack of documentation -it would be great a "API" documentation or developper guide- is putting us in a difficult choice.
I have used it this way. The code sample is present in Teradata Quickstart Project.
<button md-icon-button mdTooltip="Profile" [mdMenuTriggerFor]="profileMenu"><md-icon class="md-24">person</md-icon></button>
<md-menu #profileMenu="mdMenu">
<td-menu>
<div td-menu-header class="md-subhead">Profile</div>
<div flex>
<md-list dense>
<!--<h3 md-subheader>Metadata</h3>-->
<md-list-item>
<md-icon md-list-avatar>location_on</md-icon>
<h2 md-line *ngIf='client.address!==""'><span class="text-wrap">{{client.address}}</span></h2>
<h2 md-line *ngIf='client.address===""'>--</h2>
<p md-line>Address</p>
</md-list-item>
<md-divider md-inset></md-divider>
<md-list-item>
<md-icon md-list-avatar>location_city</md-icon>
<h2 md-line>{{client.city}}, {{client.state}}-{{client.zip}}</h2>
<p md-line>City,State-Zip</p>
</md-list-item>
<md-divider md-inset></md-divider>
<md-list-item>
<md-icon md-list-avatar>flag</md-icon>
<h2 md-line>{{client.country}}</h2>
<p md-line>Country</p>
</md-list-item>
<md-list-item>
<md-icon md-list-avatar>call</md-icon>
<h2 md-line>{{client.phone}}</h2>
<p md-line>Primary Phone</p>
</md-list-item>
<md-divider md-inset></md-divider>
<md-list-item *ngIf='client.phone2!==""'>
<md-icon md-list-avatar>call</md-icon>
<h2 md-line>{{client.phone2}}</h2>
<p md-line>Secondary Phone</p>
</md-list-item>
<md-divider md-inset *ngIf='client.phone2!==""'></md-divider>
<md-list-item>
<md-icon md-list-avatar>email</md-icon>
<h1 md-line><span class="text-wrap">{{client.email}}</span></h1>
<!--<h1 md-line></h1>-->
<p md-line>Primary Email {{client.email2}}
</p>
</md-list-item>
<md-divider md-inset></md-divider>
<md-list-item *ngIf='client.email2!==""'>
<md-icon md-list-avatar>email</md-icon>
<h1 md-line><span class="text-wrap">{{client.email2}}</span></h1>
<!--<h1 md-line></h1>-->
<p md-line>Secondary Email
</p>
</md-list-item>
<md-divider md-inset *ngIf='client.email2!==""'></md-divider>
<md-list-item>
<md-icon md-list-avatar>print</md-icon>
<h2 md-line *ngIf='client.fax!==""'>{{client.fax}}</h2>
<h2 md-line *ngIf='client.fax===""'>--</h2>
<p md-line>Fax</p>
</md-list-item>
</md-list>
</div>
</td-menu>
</md-menu>
