Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxCardComponent

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 type="button" igxButton igxRipple>Share</button>
      <button type="button" igxButton igxRipple>Play Album</button>
  </igx-card-actions>
</igx-card>

Constructors

Properties

Constructors

constructor

Properties

elevated

elevated: boolean = false

Sets/gets whether the card is elevated. Default value is false.

Example

<igx-card elevated></igx-card>

let cardElevation = this.card.elevated;

horizontal

horizontal: boolean = false

Sets the value of the horizontal attribute of the card. Setting this to true will make the different card sections align horizontally, essentially flipping the card to the side.

Example

<igx-card [horizontal]="true"></igx-card>

id

id: string = ...

Sets/gets the id of the card. If not set, id will have value "igx-card-0";

Example

<igx-card id="my-first-card"></igx-card>

let cardId =  this.card.id;

role

role: string = 'group'

Sets the value of the role attribute of the card. By default the value is set to group.

Example

<igx-card role="group"></igx-card>