Angular Material - Angular Material Cards - Angular Material Tutorial
Angular Material Cards
- Md-card, an Angular Directive, is a container directive and is used to draw cards in angularjs application.
- Following are the angular directives and classes used in md-card.
learn angular material tutorials - cards Example
Sr.No | Directive/Class | Description |
---|---|---|
1 | <md-card-header> | Header for the card, holds avatar, text and squared image. |
2 | <md-card-avatar> | Card avatar. |
3 | md-user-avatar | Class for user image. |
4 | <md-icon> | Icon directive. |
5 | <md-card-header-text> | Contains elements for the card description. |
6 | md-title | Class for the card title. |
7 | md-subhead | Class for the card sub header. |
8 | <img> | Image for the card. |
9 | <md-card-title> | Card content title. |
10 | <md-card-title-text> | Card Title text container. |
11 | md-headline | Class for the card content title. |
12 | md-subhead | Class for the card content sub header. |
13 | <md-card-title-media> | Squared image within the title. |
14 | md-media-sm | Class for small image. |
15 | md-media-md | Class for medium image. |
16 | md-media-lg | Class for large image. |
17 | <md-card-content> | Card content. |
18 | md-media-xl | Class for extra large image. |
19 | <md-card-actions> | Card actions. |
20 | <md-card-icon-actions> | Icon actions. |
Example:
- This example shows the use of md-card directive to showcase use of card classes.
am_cards.htm