Card provides a way to display organized content in appealing way.

Igx Module

IgxCardModule

Igx Theme

igx-card-theme, igx-icon-theme, igx-button-theme

Igx Keywords

card, button, avatar, icon

Igx Group

Layouts

Remarks

The Ignite UI Card serves as a container that allows custom content to be organized in an appealing way. There are five sections in a card that you can use to organize your content. These are header, media, content, actions, and footer.

Example

<igx-card>
  <igx-card-header>
    <h3 igxCardHeaderTitle>{{title}}</h3>
    <h5 igxCardHeaderSubtitle>{{subtitle}}</h5>
  </igx-card-header>
  <igx-card-actions>
      <button igxButton igxRipple>Share</button>
      <button igxButton igxRipple>Play Album</button>
  </igx-card-actions>
</igx-card>