Angular Material Card

admin

8 years ago

Angular Material – Card : The <md-card> directive is used to create Card in Angular Material. Various options are available to create cards. Here in this tutorial we are going to explain how you can create Angular Material card. You can also use our online editor to edit and run the code online.

Angular Material Card Example

Let us create basic Angular Material Card –

Example:

<md-card>
	 <amp-img src="card-image.png" class="md-card-image amp-wp-unknown-size amp-wp-enforced-sizes" alt="image caption" width="600" height="400" sizes="(min-width: 600px) 600px, 100vw"></amp-img>
	 <md-card-content>
	   <h2>Tutorialsplane.com</h2>
	   <p>The Simpleast way to learn everything.</p>
	 </md-card-content>
	 <md-card-footer>
	   visit : www.tutorialsplane.com
	 </md-card-footer>
</md-card>

Try it »

If you run the above example it will produce output something like this –

Following options are available –

<md-card-header> – Header for the card, holds avatar, text and squared image
<md-card-avatar> – Card avatar
md-user-avatar – Class for user image
<md-icon> : Icon directive
<md-card-header-text> :– Contains elements for the card description
md-title :– Class for the card title
md-subhead – Class for the card sub header
<img>: – Image for the card
<md-card-title>:- Card content title
<md-card-title-text>:– Card Title Directive Text.
md-headline:-Class for the card content title
md-subhead: – Class for the card content sub header
<md-card-title-media>: – Squared image within the title
md-media-sm :– Class for small image
md-media-md :– Class for medium image
md-media-lg: – Class for large image
<md-card-content>: – Card content
md-media-xl : – Class for extra large image