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

[object Object]

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

new IgxCardComponent(): IgxCardComponent

Returns IgxCardComponent

Properties

elevated

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

elevated: boolean = false

Defined in projects/igniteui-angular/card/src/card/card.component.ts:243

Example

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

let cardElevation = this.card.elevated;

horizontal

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.

horizontal: boolean = false

Defined in projects/igniteui-angular/card/src/card/card.component.ts:257

Example

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

id

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

id: string

Defined in projects/igniteui-angular/card/src/card/card.component.ts:205

Example

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

let cardId =  this.card.id;

role

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

role: string = 'group'

Defined in projects/igniteui-angular/card/src/card/card.component.ts:227

Example

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