Card

The Ignite UI for Angular Card component displays text, images, icons, and buttons in a visually rich presentation that can serve as an entry point to more detailed information. Cards can be used to create a multimedia dashboard. The Card component supports pagination using the same component as the Ignite UI for Angular Grid, with some custom coding required.

Card Demo

Getting Started

Import the IgxCardModule inside your application/module.

import { IgxCardModule } from "igniteui-angular";

Usage

<igx-card>
    <igx-card-header>
        <igx-avatar src="..." roundShape="true">
            <h3>Elon Musk</h3>
        </igx-avatar>
    </igx-card-header>
    <igx-card-content>
        <p>
        South African entrepreneur Elon Musk is known for founding Tesla Motors and SpaceX, which launched a landmark commercial spacecraft in 2012.
        </p>
    </igx-card-content>
    <igx-card-actions>
        <button igxButton (click)="openUrl('https://www.facebook.com/pages/Elon-Musk/108250442531979')">Like</button>
        <button igxButton (click)="openUrl('https://twitter.com/elonmusk')">Share</button>
    </igx-card-actions>
</igx-card>