angular-material md-card Card with Avatar and image


If you want an avatar to appear on the card, use the <md-card-avatar> directive, which must be placed within the <md-card-header> directive. The <md-card-avatar> directive accepts an <img /> tag.

Optional: .md-user-avatar, which makes the <img /> tag have a circle look.


            <img src="/path/to/avatar.svg" class="md-user-avatar"/>
        <!--Header text-->
            <span class="md-title">Lorem</span>
            <span class="md-subhead">Ipsum</span>
    <!--Card image-->
    <img src="/path/to/cardimage.svg" class="md-card-image" alt="Card Image">
    <!--Card title-->
            <span class="md-headline">Card header</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere et risus sed finibus. Nunc vestibulum sagittis enim ut sagittis.</p>