Angular Material - Card with avatar and image in angular material - Angular Material Tutorial



card with avatar and image in angular material

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 tag <img /> have a circle look.

index.html:

<md-card>
    <md-card-header>
        <!--Avatar-->
        <md-card-avatar>
            <img src="/path/to/avatar.svg" class="md-user-avatar"/>
        </md-card-avatar>
        <!--Header text-->
        <md-card-header-text>
            <span class="md-title">Lorem</span>
            <span class="md-subhead">Ipsum</span>
        </md-card-header-text>
    </md-card-header>
    <!--Card image-->
    <img src="/path/to/cardimage.svg" class="md-card-image" alt="Card Image">
    <!--Card title-->
    <md-card-title>
        <md-card-title-text>
            <span class="md-headline">Card header</span>
        </md-card-title-text>
    </md-card-title>
    <md-card-content>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere et risus sed finibus. Nunc vestibulum sagittis enim ut sagittis.</p>
    </md-card-content>
</md-card>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team

This angular material provides most of the technology areas such as angular material example , angular material download , angular material design template , angular material vs bootstrap , angular material for angular 2 , what is angular material , angular material demo , angular material2 , angular material demo , angular 4 material , angular material npm , angular material tutorial , angular material cdn , angular material vs bootstrap


Related Searches to Card with avatar and image in angular material