Card

The Ignite UI for React 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.

igc-card                         // host - groups related content
├─ igc-card-media                 // optional media region
│  └─ default slot                // image, video, or other media content
├─ igc-card-header                // optional header region
│  ├─ [slot="thumbnail"]          // optional avatar, icon, or small image
│  ├─ [slot="title"]              // card title
│  ├─ [slot="subtitle"]           // optional card subtitle
│  └─ default slot                // optional additional header content
├─ igc-card-content               // optional body region
│  └─ default slot                // text, lists, or custom content
└─ igc-card-actions               // optional action region
   ├─ [slot="start"]              // leading actions
   ├─ default slot                // centered actions
   └─ [slot="end"]                // trailing actions

Getting Started

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

For React using the igniteui-react package, install the package:

npm install igniteui-react

You will then need to import the Card wrappers and the theme CSS, like so:

import {
  IgrCard,
  IgrCardActions,
  IgrCardContent,
  IgrCardHeader,
  IgrCardMedia,
} from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Import any other wrappers your card content uses, such as IgrAvatar, IgrButton, and IgrIconButton.

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

<IgrCard>
  <IgrCardHeader>
    <h3 slot="title">Title</h3>
  </IgrCardHeader>
  <IgrCardContent>
    <p>Content</p>
  </IgrCardContent>
</IgrCard>

Usage

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

Media

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

<IgrCardMedia>
  <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" />
</IgrCardMedia>

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.

<IgrCardHeader>
  <IgrAvatar slot="thumbnail" initials="TS" />
  <h3 slot="title">Title</h3>
  <span slot="subtitle">Subtitle</span>
</IgrCardHeader>

Pass a heading element, such as <h3>, to the title slot so the card takes its place in the document outline, and use a neutral inline element such as <span> for the subtitle. The header resets the margin and font of slotted content, so the heading keeps the card typography.

Content

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

<IgrCardContent>
  <p>New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.</p>
</IgrCardContent>

Elevated

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

<IgrCard elevated={true}>
  ...
</IgrCard>

Actions Slots

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

<IgrCardActions>
  <IgrButton slot="start">Like</IgrButton>
  <IgrButton>Comment</IgrButton>
  <IgrIconButton slot="end" name="more_vert" />
</IgrCardActions>

Actions Orientation

Use the orientation property to arrange IgrCardActions content horizontally or vertically. The actions are horizontal by default, so set orientation to vertical to stack them.

<IgrCardActions orientation="vertical">
  <IgrButton slot="start">Like</IgrButton>
  <IgrButton slot="start">Share</IgrButton>
  <IgrIconButton slot="end" name="more_vert" />
</IgrCardActions>

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.

<IgrCard>
  <div className="card-horizontal">
    <div>
      <IgrCardHeader>
        <img src="https://dl.infragistics.com/x/img/music/rozes.jpg" slot="thumbnail" alt="Rozes album cover" />
        <span slot="title">Rozes</span>
        <span slot="subtitle">Under the Grave (2016)</span>
      </IgrCardHeader>
      <IgrCardContent>
        <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>
      </IgrCardContent>
    </div>
    <div className="divider"></div>
    <IgrCardActions>
      <IgrIconButton variant="flat" name="skip_previous" aria-label="Previous track" />
      <IgrIconButton variant="flat" name="play_arrow" aria-label="Play" />
      <IgrIconButton variant="flat" name="skip_next" aria-label="Next track" />
    </IgrCardActions>
  </div>
</IgrCard>

.card-horizontal {
  display: flex;
  flex-direction: row;
  flex: 1 1 0%;
}

.card-horizontal igc-card-actions {
  justify-content: center;
}

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

<IgrCard>
  <div className="semi-horizontal">
    <div>
      <IgrCardHeader>
        <IgrAvatar src="https://dl.infragistics.com/x/img/music/singer_with_mic.jpg" slot="thumbnail" />
        <span slot="title">HERE</span>
        <span slot="subtitle">by Mellow D</span>
      </IgrCardHeader>
      <IgrCardContent>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
      </IgrCardContent>
      <IgrCardActions>
        <IgrButton>Play Album</IgrButton>
      </IgrCardActions>
    </div>
    <IgrCardMedia className="card-media">
      <img src="https://dl.infragistics.com/x/img/music/singer_female.jpg" alt="Singer" />
    </IgrCardMedia>
  </div>
</IgrCard>

.semi-horizontal {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.card-media {
  width: 96px;
  min-width: 96px;
}

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 and action-layout controls.

Styling

The card appearance is controlled through theme variables.

The card header also exposes CSS parts for its text containers.

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.

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

igc-card-header::part(subtitle) {
  color: var(--ig-warn-500);
}

Styling with Tailwind

Use Tailwind utility classes when your application already uses Tailwind and you want the card layout and local color choices to stay in the component markup.

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 and every card region render plain slots and set no role or aria-* attributes. The wrapper elements inside the header have no accessible name and create no landmarks. Add a role and an accessible name on the card host yourself when your information architecture needs one.
• The title and subtitle slots render whatever element you pass and do not impose a heading level.
• Add alt text to images in the media region.
• 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 React 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 IgrAvatar, IgrButton, IgrIconButton, IgrIcon, and IgrRipple components.

Import the card wrappers and any supporting wrappers that your card content uses. Include a Ignite UI for React theme stylesheet once in your application.

Additional Resources

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

• Ignite UI for React Forums
• Ignite UI for React 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