Card

The Ignite UI for Angular Card organizes related media, text, and actions in one flexible content container.

Use the card to group content about a single subject, such as a product, article, contact, location, or dashboard item.

Live Demo

Anatomy

The card is a container whose standard building blocks are header, media, content, and actions.

igx-card                         // host - groups related content
|- igx-card-media                 // optional media region
|  `- default content             // image, video, or other media content
|- igx-card-header                // optional header region
|  |- [igxCardThumbnail]          // optional avatar, icon, or small image
|  |- [igxCardHeaderTitle]        // card title
|  `- [igxCardHeaderSubtitle]     // optional card subtitle
|- igx-card-content               // optional body region
|  `- default content             // text, lists, or custom content
`- igx-card-actions               // optional action region
   |- [igxStart]                  // leading actions
   `- [igxEnd]                    // trailing actions

Getting Started

To use the Angular Card, follow the Ignite UI for Angular Getting Started topic for the basic project setup, then register the component for your target platform.

For Angular using the igniteui-angular package, install the package:

npm install igniteui-angular

Then import the IGX_CARD_DIRECTIVES token in the component imports collection. The token brings in the card together with all of its supporting components and directives.

import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card';

Import any other directives your card content uses, such as IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, and IgxRippleDirective, from igniteui-angular.

The simplest way to start using the Card is as follows:

<igx-card>
  <igx-card-header>
    <h3 igxCardHeaderTitle>Title</h3>
  </igx-card-header>
  <igx-card-content>
    <p>Content</p>
  </igx-card-content>
</igx-card>

Usage

Compose a card from the card container and whichever sub-components your content needs.

Media

Use IgxCardMediaDirective to place images, video, or other media content in the card.

<igx-card-media height="196px">
  <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=50" alt="New York city skyline" />
</igx-card-media>

Position

Place the media above or below the header. The card renders its regions in the order you add them, so the element order in your markup sets the media position.

Header Slots

Use the header slots to define thumbnail, title, subtitle, and additional header content.

<igx-card-header>
  <div igxCardThumbnail>
    <igx-icon>place</igx-icon>
  </div>
  <h3 igxCardHeaderTitle>Title</h3>
  <span igxCardHeaderSubtitle>Subtitle</span>
</igx-card-header>

Apply igxCardHeaderTitle to a heading element, such as <h3>, so the card takes its place in the document outline, and apply igxCardHeaderSubtitle to a neutral inline element such as <span>.

Content

Use IgxCardContentDirective for the card body text, lists, or custom content.

<igx-card-content>
  <p>New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.</p>
</igx-card-content>

Elevated

Set elevated when the card should use the elevated visual treatment.

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

Actions Slots

Use the actions slots to place leading, centered, and trailing actions in CardActions.

<igx-card-actions>
  <button igxButton igxStart>Like</button>
  <button igxButton>Comment</button>
  <button igxIconButton="flat" igxEnd>
    <igx-icon>more_vert</igx-icon>
  </button>
</igx-card-actions>

Actions Orientation

Set vertical on igx-card-actions when the actions should be arranged vertically.

<igx-card-actions [vertical]="true">
  <button igxButton>Like</button>
  <button igxButton>Share</button>
  <button igxIconButton="flat">
    <igx-icon>more_vert</igx-icon>
  </button>
</igx-card-actions>

Layout

Use layout wrappers when card sections need to be arranged horizontally or split between media and content areas.

For a horizontal card, group the header and content in one wrapper, add the actions beside that wrapper, and apply a flex row to the card content.

<igx-card [horizontal]="true">
  <div igxLayout igxLayoutDir="column" igxFlex [igxFlexGrow]="1">
    <igx-card-header>
      <h5 igxCardHeaderTitle>Rozes</h5>
      <h5 igxCardHeaderSubtitle>Under the Grave (2016)</h5>
      <igx-card-media width="64px" height="64px">
        <img src="https://dl.infragistics.com/x/img/music/rozes.jpg" alt="Rozes album cover" />
      </igx-card-media>
    </igx-card-header>
    <igx-card-content>
      <p>As I have always said: I write what's real and what's true, even if it means throwing myself under the bus.</p>
    </igx-card-content>
  </div>
  <igx-divider [vertical]="true"></igx-divider>
  <igx-card-actions layout="justify">
    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd aria-label="Previous track">
      <igx-icon>skip_previous</igx-icon>
    </button>
    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd aria-label="Play">
      <igx-icon>play_arrow</igx-icon>
    </button>
    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" igxEnd aria-label="Next track">
      <igx-icon>skip_next</igx-icon>
    </button>
  </igx-card-actions>
</igx-card>

.card-wrapper {
  max-width: 400px;
  min-width: 250px;
}

For a semi-horizontal card, keep the header, content, and actions stacked in one column, then place the media section beside that column.

<igx-card [horizontal]="true" elevated>
  <div igxLayout igxLayoutDir="column" igxFlex [igxFlexGrow]="1">
    <igx-card-header>
      <igx-avatar src="https://dl.infragistics.com/x/img/music/singer_with_mic.jpg"></igx-avatar>
      <h5 igxCardHeaderTitle>HERE</h5>
      <h5 igxCardHeaderSubtitle>by Mellow D</h5>
    </igx-card-header>
    <igx-card-content>
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
    </igx-card-content>
    <igx-card-actions [vertical]="false">
      <button igxButton="flat" igxRipple igxStart>Play Album</button>
    </igx-card-actions>
  </div>
  <igx-card-media width="96px">
    <img src="https://dl.infragistics.com/x/img/music/singer_female.jpg" alt="Singer" />
  </igx-card-media>
</igx-card>

.card-wrapper {
  max-width: 400px;
  min-width: 250px;
}

Do/Don’t

The card usually works as an overview UI and an entry point for more detailed information. Avoid clogging it with too much information, and as you create dashboards with it, size and arrange the cards consistently in order to form a layout grid with equal horizontal and vertical gaps between cards.

Properties

The card API exposes container appearance, action-layout, and media sizing controls.

Styling

The card appearance is controlled through theme variables.

Sass Theming

Use the card-theme function when your application customizes Ignite UI themes through Sass.

@use "igniteui-theming/sass/themes" as *;

$custom-card-theme: card-theme(
  $background: #1f2937,
  $border-radius: 12px,
  $header-text-color: #ffffff,
  $content-text-color: #e5e7eb
);

:root {
  @include tokens($custom-card-theme);
}

CSS Variables

Set component CSS variables directly when you need local styling without a Sass build step.

igx-card {
  --background: var(--ig-secondary-900);
  --header-text-color: var(--ig-secondary-900-contrast);
  --content-text-color: var(--ig-secondary-900-contrast);
}

igx-card-header {
  --subtitle-text-color: var(--ig-warn-500);
}

Styling with Tailwind

Use Tailwind utility classes when your Angular application already styles Ignite UI components through Tailwind.

Accessibility

The card is a container. Grouping and media semantics come from the card regions, while keyboard operability and accessible names come from the content you place inside them.

Keyboard Interaction

The card and its header, media, content, and actions regions declare no key handlers and are not in the tab order. Focus moves through the focusable content you place inside them, in DOM order.

The actions area always renders its leading region, then its centered content, then its trailing region. Switching the actions to a vertical layout restyles them without reordering the DOM, so keyboard and screen reader order stay the same.

Screen Readers / ARIA

• The card host renders role="group" and a generated id in the form igx-card-1. Set the role input when a different grouping role fits your information architecture, and reference the card title with aria-labelledby so the group has an accessible name.
• igx-card-media renders role="img", which exposes the whole media region as a single image and makes its children presentational, so an alt attribute on the inner image does not name it. Name the region itself with aria-label or aria-labelledby, or set its role input to presentation when the media is decorative.
• The header, title, subtitle, content, and actions members add styling classes only. They contribute no roles and no aria-* attributes.
• Give icon-only buttons in the actions area an accessible name; the icon alone provides none.
• Use a single interactive element when the whole card triggers one action, rather than attaching a click handler to the container, so the action keeps a role and a name.

Accessibility Compliance

Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the Accessibility Compliance topic.

Your responsibilities:

• Pass a real heading element to the title so the card takes its place in the document outline, and keep the subtitle as plain text.
• Provide alternative text for meaningful media, and give the media region an accessible name wherever it is exposed as an image.
• Give icon-only action buttons an accessible name.
• Keep DOM order and visual order aligned when you build horizontal or split card layouts with CSS.
• Keep sufficient contrast when overriding card colors.

API References

Dependencies

The card uses its own header, media, content, and actions sub-components. Cards that include thumbnails, actions, icons, or ripples also depend on the corresponding Avatar, IgxButtonDirective, IgxIconButtonDirective, Icon, and IgxRippleDirective components and directives.

Additional Resources

Use these resources to continue with Ignite UI for Angular Card support, source, and related layout guidance.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub

Related Components

Use the Grid when users need dense tabular data with sorting, filtering, and column-level interaction. Use the List when repeated items should remain compact and primarily vertical.

FAQ