diff --git a/docs/angular/src/content/en/components/layouts/card.mdx b/docs/angular/src/content/en/components/layouts/card.mdx new file mode 100644 index 0000000000..b0f57f5d46 --- /dev/null +++ b/docs/angular/src/content/en/components/layouts/card.mdx @@ -0,0 +1,481 @@ +--- +title: "Angular Card Component | Layouts | Infragistics" +description: "Angular Card organizes related media, text, and actions in one flexible content container." +keywords: "Angular Card, card component, content container, media card, Ignite UI for Angular, Infragistics" +license: MIT +last_updated: "2026-07-30" +mentionedTypes: ["Card", "CardActions", "CardContent", "CardHeader", "CardMedia", "Avatar", "Button", "Icon", "IconButton", "Ripple"] +relatedComponents: ["Grid", "List"] +llms: + description: "The Ignite UI for Angular Card organizes related media, text, and actions in one flexible content container." +--- +import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import Anatomy from 'igniteui-astro-components/components/mdx/Anatomy.astro'; +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; +import { Image } from 'astro:assets'; +import cardAnatomy from '@xplat-images/anatomy-frame-light/Card-lt.png'; +import cardDo1 from '@xplat-images/card/card_do1.png'; +import cardDo1_2x from '@xplat-images/card/card_do1@2x.png'; +import cardDo2 from '@xplat-images/card/card_do2.png'; +import cardDo2_2x from '@xplat-images/card/card_do2@2x.png'; +import cardDoNot1 from '@xplat-images/card/card_do_not1.png'; +import cardDoNot1_2x from '@xplat-images/card/card_do_not1@2x.png'; +import cardDoNot2 from '@xplat-images/card/card_do_not2.png'; +import cardDoNot2_2x from '@xplat-images/card/card_do_not2@2x.png'; + +# Card Component + +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. + + + +
+
+ A - Media Container + 1. Image (optional) +
+
+ B - Card Header + 2. Title + 3. Avatar (optional) + 4. Subtitle +
+
+ C - Content area + 5. Paragraph +
+
+ D - Card Footer + 6. Action Buttons, Icon Buttons +
+
+ + + +```text +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 + +### Prerequisites and Version Compatibility + +Before you add the card, complete the shared Ignite UI for Angular setup in the [Getting Started](../general-getting-started.mdx) topic. + +Import the standalone card directives and any supporting directives your card content uses. + +```ts +import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card'; +import { IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective } from 'igniteui-angular'; +``` + +## Usage + +Compose a card from the card container and whichever sub-components your content needs. + +### Media + +Use to place images, video, or other media content in the card. + +```html + + New York city skyline + +``` + +### Header Slots + +Use the header slots to define thumbnail, title, subtitle, and additional header content. + +```html + +
+ place +
+

Title

+
Subtitle
+ +``` + +Use neutral inline elements such as `` for `title` and `subtitle` when you want to inherit the card typography without browser heading margins. + +### Content + +Use for the card body text, lists, or custom content. + +```html + +

New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.

+ +``` + +### Elevated + +Set when the card should use the elevated visual treatment. + +```html + + ... + +``` + +### Actions Slots + +Use the actions slots to place leading, centered, and trailing actions in . + +```html + + + + + +``` + +### Actions Orientation + +Set `vertical` on `igx-card-actions` when the actions should be arranged vertically. + +```html + + + + + +``` + +### Card 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. + +```html + +
+ +
Rozes
+
Under the Grave (2016)
+ + Rozes album cover + + + +

As I have always said: I write what's real and what's true, even if it means throwing myself under the bus.

+ +
+ + + + + + + +``` + +```css +.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. + +```html + +
+ + +
HERE
+
by Mellow D
+ + +

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

+ + + + +
+ + Singer + + +``` + +```css +.card-wrapper { + max-width: 400px; + min-width: 250px; +} +``` + + + +### Do/Don't + +**When to use:** Use the card when related information benefits from a shared container with optional header, media, body content, and actions. Keep each card focused on one subject or decision, put primary information in the header or content area, and use consistent card structure across repeated cards. + +**When not to use:** Avoid cards for dense tabular data, long-form reading, or workflows where the container adds visual noise without making content easier to scan. Use the [Grid](../grid/grid.mdx) for dense tabular data, the [List](../list.mdx) for repeated compact rows, or the underlying layout pattern that best matches the content instead. + +
+ + + + + + + + + + + + + + + + + +
DoDon't
Angular Card do guidance: focused card contentAngular Card don't guidance: unfocused card content
Angular Card do guidance: clear card actionsAngular Card don't guidance: unclear card actions
+
+ +## Properties + +The card API exposes container appearance and action-layout controls. + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| | `boolean` | `false` | Sets the card to use an elevated appearance with shadow. | +| | `"horizontal" \| "vertical"` | `"horizontal"` | Sets the layout orientation of . | + +## Styling + + + +The card appearance is controlled through theme variables and CSS parts on the card header. + +| Variable | What it changes | +| -- | -- | +| `--ig-card-background` | Card background color. | +| `--ig-card-outline-color` | Card outline color. | +| `--ig-card-header-text-color` | Card title text color. | +| `--ig-card-subtitle-text-color` | Card subtitle text color. | +| `--ig-card-content-text-color` | Card content text color. | +| `--ig-card-actions-text-color` | Card actions text color. | +| `--ig-card-resting-shadow` | Card shadow in its resting state. | +| `--ig-card-hover-shadow` | Card shadow in its hover state. | +| `--ig-card-border-radius` | Card border radius. | + +| CSS Part | Description | +| -- | -- | +| `header` | Card header text container. | +| `title` | Title slot wrapper. | +| `subtitle` | Subtitle slot wrapper. | + +### Sass Theming + +Use the function when your application customizes Ignite UI themes through Sass. + +```scss +@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. + +```css +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 + +## Accessibility + +The card itself is a non-interactive container; keyboard and ARIA behavior come from the semantic content and interactive controls placed inside it. + +### Keyboard Interaction + +The card does not receive focus unless you add focusable content inside it. + +| Key | Action | +| -- | -- | +| Tab | Moves focus through interactive elements inside the card, such as buttons or links. | + +### Screen Readers / ARIA + +The card renders slotted content and does not add a landmark role by default. + +- Use semantic headings, links, buttons, images, and lists inside the card content. +- Provide `alt` text for meaningful media. +- Add an accessible name to icon-only buttons in the actions area. +- Add a role or label to the card container only when your application needs one for its information architecture. + +### Accessibility Compliance + +Infragistics documents Ignite UI for Angular accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.mdx) topic. The card's compliance evidence comes from the semantic content and interactive controls that you place inside the card. + +| Criterion | How the component complies | +| -- | -- | +| [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships) | The card preserves the semantic structure of slotted headings, text, media, and controls. | +| [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard) | Interactive card content remains reachable by keyboard when authors use keyboard-operable controls. | + +Your responsibilities: + +- Use semantic elements for titles, body content, media, and actions. +- Provide accessible names for icon-only buttons and meaningful images. +- Preserve logical focus order when building custom horizontal or split card layouts. +- Keep sufficient contrast when overriding card colors. + +## Troubleshooting + +Use these notes to handle common card layout and composition questions. + +### Known Limitations + +No additional platform-independent limitations are documented for the card. Accessibility behavior depends on the semantic content and interactive controls that you place inside the card. + +## API References + +Use these API references for the complete card, card section, and supporting component APIs. + + + + + + + + + + + + +## 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 , , , , and components. + +## Additional Resources + +Use these resources to continue with Ignite UI for Angular Card support, source, and related layout guidance. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) + +## Related Components + +Use the [Grid](../grid/grid.mdx) when users need dense tabular data with sorting, filtering, and column-level interaction. Use the [List](../list.mdx) when repeated items should remain compact and primarily vertical. + +## FAQ + + + + Use a card when related media, text, and actions describe one subject and benefit from a shared visual container. + + + Yes. Place buttons, links, menus, or other controls in the card content or actions area, and keep their tab order logical. + + + Use Grid for dense tabular data and List for compact repeated rows. Use Card when each item needs richer media, content, or actions. + + diff --git a/docs/angular/src/content/en/images/anatomy-frame-light/Card-lt.png b/docs/angular/src/content/en/images/anatomy-frame-light/Card-lt.png new file mode 100644 index 0000000000..8d54064862 Binary files /dev/null and b/docs/angular/src/content/en/images/anatomy-frame-light/Card-lt.png differ diff --git a/docs/angular/src/content/en/images/card/card_do1.png b/docs/angular/src/content/en/images/card/card_do1.png new file mode 100644 index 0000000000..ed94d07ebc Binary files /dev/null and b/docs/angular/src/content/en/images/card/card_do1.png differ diff --git a/docs/angular/src/content/en/images/card/card_do1@2x.png b/docs/angular/src/content/en/images/card/card_do1@2x.png new file mode 100644 index 0000000000..e3ddddd375 Binary files /dev/null and b/docs/angular/src/content/en/images/card/card_do1@2x.png differ diff --git a/docs/angular/src/content/en/images/card/card_do2.png b/docs/angular/src/content/en/images/card/card_do2.png new file mode 100644 index 0000000000..821543f363 Binary files /dev/null and b/docs/angular/src/content/en/images/card/card_do2.png differ diff --git a/docs/angular/src/content/en/images/card/card_do2@2x.png b/docs/angular/src/content/en/images/card/card_do2@2x.png new file mode 100644 index 0000000000..e6149debce Binary files /dev/null and b/docs/angular/src/content/en/images/card/card_do2@2x.png differ diff --git a/docs/angular/src/content/en/images/card/card_do_not1.png b/docs/angular/src/content/en/images/card/card_do_not1.png new file mode 100644 index 0000000000..8f94d1876a Binary files /dev/null and b/docs/angular/src/content/en/images/card/card_do_not1.png differ diff --git a/docs/angular/src/content/en/images/card/card_do_not1@2x.png b/docs/angular/src/content/en/images/card/card_do_not1@2x.png new file mode 100644 index 0000000000..7d825aab49 Binary files /dev/null and b/docs/angular/src/content/en/images/card/card_do_not1@2x.png differ diff --git a/docs/angular/src/content/en/images/card/card_do_not2.png b/docs/angular/src/content/en/images/card/card_do_not2.png new file mode 100644 index 0000000000..8ac2cb13c5 Binary files /dev/null and b/docs/angular/src/content/en/images/card/card_do_not2.png differ diff --git a/docs/angular/src/content/en/images/card/card_do_not2@2x.png b/docs/angular/src/content/en/images/card/card_do_not2@2x.png new file mode 100644 index 0000000000..207d066994 Binary files /dev/null and b/docs/angular/src/content/en/images/card/card_do_not2@2x.png differ diff --git a/docs/xplat/src/assets/images/card/card_do1.png b/docs/xplat/src/assets/images/card/card_do1.png new file mode 100644 index 0000000000..ed94d07ebc Binary files /dev/null and b/docs/xplat/src/assets/images/card/card_do1.png differ diff --git a/docs/xplat/src/assets/images/card/card_do1@2x.png b/docs/xplat/src/assets/images/card/card_do1@2x.png new file mode 100644 index 0000000000..e3ddddd375 Binary files /dev/null and b/docs/xplat/src/assets/images/card/card_do1@2x.png differ diff --git a/docs/xplat/src/assets/images/card/card_do2.png b/docs/xplat/src/assets/images/card/card_do2.png new file mode 100644 index 0000000000..821543f363 Binary files /dev/null and b/docs/xplat/src/assets/images/card/card_do2.png differ diff --git a/docs/xplat/src/assets/images/card/card_do2@2x.png b/docs/xplat/src/assets/images/card/card_do2@2x.png new file mode 100644 index 0000000000..e6149debce Binary files /dev/null and b/docs/xplat/src/assets/images/card/card_do2@2x.png differ diff --git a/docs/xplat/src/assets/images/card/card_do_not1.png b/docs/xplat/src/assets/images/card/card_do_not1.png new file mode 100644 index 0000000000..8f94d1876a Binary files /dev/null and b/docs/xplat/src/assets/images/card/card_do_not1.png differ diff --git a/docs/xplat/src/assets/images/card/card_do_not1@2x.png b/docs/xplat/src/assets/images/card/card_do_not1@2x.png new file mode 100644 index 0000000000..7d825aab49 Binary files /dev/null and b/docs/xplat/src/assets/images/card/card_do_not1@2x.png differ diff --git a/docs/xplat/src/assets/images/card/card_do_not2.png b/docs/xplat/src/assets/images/card/card_do_not2.png new file mode 100644 index 0000000000..8ac2cb13c5 Binary files /dev/null and b/docs/xplat/src/assets/images/card/card_do_not2.png differ diff --git a/docs/xplat/src/assets/images/card/card_do_not2@2x.png b/docs/xplat/src/assets/images/card/card_do_not2@2x.png new file mode 100644 index 0000000000..207d066994 Binary files /dev/null and b/docs/xplat/src/assets/images/card/card_do_not2@2x.png differ diff --git a/docs/xplat/src/content/en/components/layouts/card.mdx b/docs/xplat/src/content/en/components/layouts/card.mdx index e3203de67b..f35854f79d 100644 --- a/docs/xplat/src/content/en/components/layouts/card.mdx +++ b/docs/xplat/src/content/en/components/layouts/card.mdx @@ -1,159 +1,409 @@ --- -title: Card Component -description: Present users with dashboards and engaging text, images, icons or buttons as an entry point for detailed information with Ignite UI for Web Card component. -keywords: "{ProductName}, UI controls, Web widgets, web widgets, UI widgets, Native Web Components Suite, Native Web Controls, Native Web Components Library, Web Card component, Web Card controls" +title: "{Platform} Card Component | Layouts | Infragistics" +description: "{Platform} Card organizes related media, text, and actions in one flexible content container." +keywords: "{Platform} Card, card component, content container, media card, {ProductName}, Infragistics" license: MIT +last_updated: "2026-07-30" mentionedTypes: ["Card", "CardActions", "CardContent", "CardHeader", "CardMedia", "Avatar", "Button", "Icon", "IconButton", "Ripple"] +relatedComponents: ["Grid", "List"] llms: - description: "The {ProductName} Card displays text, images, icons, and buttons in a visually rich presentation that can serve as an entry point to more detailed information." + description: "The {ProductName} Card organizes related media, text, and actions in one flexible content container." --- import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import Anatomy from 'igniteui-astro-components/components/mdx/Anatomy.astro'; +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; +import { Image } from 'astro:assets'; +import cardAnatomy from '@xplat-images/anatomy-frame-light/Card-lt.png'; +import cardDo1 from '@xplat-images/card/card_do1.png'; +import cardDo1_2x from '@xplat-images/card/card_do1@2x.png'; +import cardDo2 from '@xplat-images/card/card_do2.png'; +import cardDo2_2x from '@xplat-images/card/card_do2@2x.png'; +import cardDoNot1 from '@xplat-images/card/card_do_not1.png'; +import cardDoNot1_2x from '@xplat-images/card/card_do_not1@2x.png'; +import cardDoNot2 from '@xplat-images/card/card_do_not2.png'; +import cardDoNot2_2x from '@xplat-images/card/card_do_not2@2x.png'; + +# Card Component + +The {ProductName} 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. + + + +
+
+ A - Media Container + 1. Image (optional) +
+
+ B - Card Header + 2. Title + 3. Avatar (optional) + 4. Subtitle +
+
+ C - Content area + 5. Paragraph +
+
+ D - Card Footer + 6. Action Buttons, Icon Buttons +
+
+ + + + + +```text +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 +``` + + + + + +```text +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 + +### Prerequisites and Version Compatibility + +Before you add the card, complete the shared {ProductName} setup in the [Getting Started](../general-getting-started.mdx) topic. + + + +Register the card component before you use it. The card registration includes the card header, media, content, and actions sub-components. + +```ts +import { + defineComponents, + IgcAvatarComponent, + IgcButtonComponent, + IgcCardComponent, + IgcIconButtonComponent, +} from 'igniteui-webcomponents'; + +defineComponents(IgcCardComponent, IgcAvatarComponent, IgcButtonComponent, IgcIconButtonComponent); +``` + + + + + +Import the standalone card directives and any supporting directives your card content uses. + +```ts +import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card'; +import { IgxButtonDirective, IgxIconButtonDirective, IgxIconComponent, IgxRippleDirective } from 'igniteui-angular'; +``` + + + -# {Platform} Card Overview +Import the React wrappers and theme stylesheet before you render the card. -The {ProductName} Card 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. +```tsx +import { + IgrAvatar, + IgrButton, + IgrCard, + IgrCardActions, + IgrCardContent, + IgrCardHeader, + IgrCardMedia, + IgrIconButton, +} from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +``` + -## {Platform} Card Example + - +Register the card module in `Program.cs`. + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule)); +builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule)); +builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); +builder.Services.AddIgniteUIBlazor(typeof(IgbIconButtonModule)); +``` + +Add the theme stylesheet to your host page. + +```razor + +``` + + ## Usage -Cards allow you to easily display content composed of different types of objects or similar objects whose size and supported actions can vary. +Compose a card from the card container and whichever sub-components your content needs. + +### Media -### Getting Started +Use to place images, video, or other media content in the card. -First, you need to install the {ProductName} by running the following command: +```html + + New York city skyline + +``` + + + + -```cmd -npm install {PackageWebComponents} +```html + + New York city skyline + ``` -First, you need to the install the corresponding {ProductName} npm package by running the following command: +```tsx + + New York city skyline + +``` + + + + -```cmd -npm install igniteui-react +```razor + + New York city skyline + ``` -You will then need to import the and its necessary CSS, like so: + -```tsx -import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardMedia, IgrCardActions } from 'igniteui-react'; -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +### Header Slots + +Use the header slots to define thumbnail, title, subtitle, and additional header content. + + + +```html + + + Title + Subtitle + ``` -Before using the , you need to register it as follows: + - +```html + +
+ place +
+

Title

+
Subtitle
+ +``` -```csharp -// in Program.cs file + -builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule)); + + +```tsx + + + Title + Subtitle + ``` -You will also need to link an additional CSS file to apply the styling to the component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project: - ```razor - + + + Title + Subtitle + ``` +Use neutral inline elements such as `` for `title` and `subtitle` when you want to inherit the card typography without browser heading margins. + +### Content + +Use for the card body text, lists, or custom content. + -```ts -import { defineComponents, IgcCardComponent } from 'igniteui-webcomponents'; +```html + +

New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.

+ +``` + + -defineComponents(IgcCardComponent ); + + +```html + +

New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.

+ ``` -For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic. + + +```tsx + +

New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.

+ +``` + + -Then, to represent the demo card template, we can add the following code: + + +```razor + +

New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.

+ +``` + + + +### Elevated + +Set when the card should use the elevated visual treatment. ```html - - - - - - New York - City in New York - - -

New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers.

- - - - - Read more - -
- - - - - - -
- + + ... ``` + + +```html + + ... + +``` + + + ```tsx - - - - - - New York City - City in New York - - -

New York City comprises 5 boroughs sitting where the - Hudson River meets the Atlantic Ocean. At its core is Manhattan, - a densely populated borough that’s among the world’s major commercial, - financial and cultural centers.

- - - - Read more - - -
- - - - - - -
- + + ... ``` @@ -162,61 +412,103 @@ Then, to represent the demo card template, we can add the following code: ```razor - - - - - - New York City - City in New York - - -

New York City comprises 5 boroughs sitting where the - Hudson River meets the Atlantic Ocean. At its core is Manhattan, - a densely populated borough that's among the world's major commercial, - financial and cultural centers.

- - - - - Read more - -
- - - - - - -
- + + ... ``` -You will notice a few things above. First, to _tag_ an element as a header title, we need to place it between the tags and set its slot name to `title`. Conversely, to define a subtitle, we need to set the slot name to `subtitle`. When slotting content into the `title` and `subtitle` slots, we recommend using `` rather than heading elements (`

`–`

`). Heading elements carry built-in styling (such as font size, line height, and margins) that can interfere with the component's intended typography and layout. A `` provides a neutral container that inherits the component’s styles cleanly. +### Actions Slots -Any image or video we want to show in the card, we wrap inside the tags. The allows us to size the content placed inside so that it maintains its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. +Use the actions slots to place leading, centered, and trailing actions in . -You can place anything inside the tags. Usually text goes there. + -Finally, the is where you'd place any actionable items, like buttons. +```html + + Like + Comment + + +``` -### Media, Thumbs, and Avatars + -If you want to display an image or icon in the card header next to the title and subtitle, assign the element's slot attribute to `thumbnail`. For the best results, we recommend using an [`igc-avatar`](../layouts/avatar.mdx) component for the `thumbnail` slot, as it integrates seamlessly with the card header's layout and styling. + -Taking the card above as an example, we can edit the contents of the and add an avatar with `slot="thumbnail"`: +```html + + + + + +``` + + + + + +```tsx + + Like + Comment + + +``` + + + + + +```razor + + Like + Comment + + +``` + + + +### Actions Orientation + + + +Use the property to arrange content horizontally or vertically. + + + + + +Set `vertical` on `igx-card-actions` when the actions should be arranged vertically. + + ```html - - - Title - Subtitle - + + Like + Share + + +``` + + + + + +```html + + + + + ``` @@ -224,11 +516,11 @@ Taking the card above as an example, we can edit the contents of the ```tsx - - - Title - Subtitle - + + Like + Share + + ``` @@ -236,54 +528,114 @@ Taking the card above as an example, we can edit the contents of the ```razor - - - Title - Subtitle - + + Like + Share + + ``` -The above example will show the avatar alongside the title and subtitle in the card header. + -### Outlined cards -The card has an `outlined` attribute which, if set, removes any shadows from the card, replacing them with a thin border to separate the card from the background. + -### Horizontal Layout + -By default all sections of the card (header, content, media, actions) are laid out vertically. This is nice when we have a lot of vertical space. Say we wanted to lay out the sections in the card horizontally. We can achieve such a layout with some simple CSS. +### Card Layout -Here's an example of an outlined horizontal card: +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. ```html - -
-
- - - Rozes - Under the Grave (2016) - - -

As I have always said: I write what’s real and what’s true, - even if it means throwing myself under the bus.

- -
-
- - - - - + +
+
+ + Rozes album cover + Rozes + Under the Grave (2016) + + +

As I have always said: I write what's real and what's true, even if it means throwing myself under the bus.

+
+
+ + skip_previous + play_arrow + skip_next + +
``` + + +```html + +
+ +
Rozes
+
Under the Grave (2016)
+ + Rozes album cover + + + +

As I have always said: I write what's real and what's true, even if it means throwing myself under the bus.

+ +
+ + + + + + + +``` + + + + + +```tsx + +
+
+ + Rozes album cover + Rozes + Under the Grave (2016) + + +

As I have always said: I write what's real and what's true, even if it means throwing myself under the bus.

+ +
+
+ + skip_previous + play_arrow + skip_next + +
+ +``` + + + ```razor @@ -291,20 +643,19 @@ Here's an example of an outlined horizontal card:
- ROZES-Under-the-Grave + Rozes album cover Rozes Under the Grave (2016) -

As I have always said: I write what's real and what's true, - even if it means throwing myself under the bus.

+

As I have always said: I write what's real and what's true, even if it means throwing myself under the bus.
- - - + skip_previous + play_arrow + skip_next
@@ -312,94 +663,116 @@ Here's an example of an outlined horizontal card: - - -```tsx - -
-
- - - Rozes - Under the Grave (2016) - - -

As I have always said: I write what’s real and what’s true, - even if it means throwing myself under the bus.

- -
-
- - skip_previous - play_arrow - skip_next - -
- -``` - - - -We are using an additional `div` element to bundle the and together, keeping them aligned vertically, and applying the `.card-horizontal` class to the wrapping `div` element to align the two sections of the card horizontally. - -The styles that `.card-horizontal` class applies are: + ```css .card-horizontal { - display: flex; - flex-direction: row; - flex: 1 1 0%; -} - -.card-horizontal img { - width: 64px; - height: 64px; + display: flex; + flex-direction: row; + flex: 1 1 0%; } .card-horizontal igc-card-actions { - justify-content: center; + justify-content: center; } ``` -If everything went well, our card should look like this: + - + -### Alternative layouts +```css +.card-wrapper { + max-width: 400px; + min-width: 250px; +} +``` -You can get even more creative with the layout of the . + -Below is an example showing how you can create a semi-horizontal card, where we have every section of the card laid out vertically, while the appears alongside the vertical sections. + + +For a semi-horizontal card, keep the header, content, and actions stacked in one column, then place the media section beside that column. ```html -
-
- - MD - HERE - by Mellow D - - -

Far far away, behind the word mountains, - far from the countries Vokalia and Consonantia, - there live the blind texts.

- - - play album - -
- - - +
+
+ + + HERE + by Mellow D + + +

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

+ + + Play Album +
+ + Singer + +
``` + + +```html + +
+ + +
HERE
+
by Mellow D
+ + +

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

+ + + + +
+ + Singer + + +``` + + + + + +```tsx + +
+
+ + + HERE + by Mellow D + + +

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

+ + + Play Album + +
+ + Singer + +
+ +``` + + + ```razor @@ -407,21 +780,19 @@ Below is an example showing how you can create a semi-horizontal card, where we
- + HERE by Mellow D -

Far far away, behind the word mountains, - far from the countries Vokalia and Consonantia, - there live the blind texts.

+

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

 Play Album
- here_media + Singer
@@ -429,165 +800,284 @@ Below is an example showing how you can create a semi-horizontal card, where we - - -```tsx - -
-
- - - HERE - by Mellow D - - -

Far far away, behind the word mountains, - far from the countries Vokalia and Consonantia, - there live the blind texts.

- - - Play Album - -
- - - - -
- -``` - - + ```css .semi-horizontal { - display: flex; - flex-direction: row; - flex-grow: 1; + display: flex; + flex-direction: row; + flex-grow: 1; } .card-media { - width: 96px; - min-width: 96px; + width: 96px; + min-width: 96px; } ``` - - -### Card Actions - -The card actions area allows additional configuration to what we have already mentioned. -The area is intended to hold actionable items, like buttons. There are two slots available that can be used to position content: `start` and `end`. We can assign these slots to any element placed inside the , and it will be positioned accordingly, either at the `start` or the `end` of the area. These slots can be used with any type of content, but we highly recommend sticking to actionable elements, or wrappers of actionable elements, as shown in the example below: + - + -```html - - - - Read more - -
- - - - - - -
- +```css +.card-wrapper { + max-width: 400px; + min-width: 250px; +} ``` - + -```razor - - - - Read more - -
- - - - - - -
- -``` +### Do/Don't + +**When to use:** Use the card when related information benefits from a shared container with optional header, media, body content, and actions. Keep each card focused on one subject or decision, put primary information in the header or content area, and use consistent card structure across repeated cards. + + + +**When not to use:** Avoid cards for dense tabular data, long-form reading, or workflows where the container adds visual noise without making content easier to scan. Use the [Grid](../grids/data-grid.mdx) for dense tabular data, the [List](../grids/list.mdx) for repeated compact rows, or the underlying layout pattern that best matches the content instead. - + -```tsx - - - Read more - - -
- - - - - - -
- -``` +**When not to use:** Avoid cards for dense tabular data, long-form reading, or workflows where the container adds visual noise without making content easier to scan. Use the [Grid](../grid/grid.mdx) for dense tabular data, the [List](../list.mdx) for repeated compact rows, or the underlying layout pattern that best matches the content instead. -You can also add more content in-between by simply omitting the slot property and let the elements go to the default slot. +
+ + + + + + + + + + + + + + + + + +
DoDon't
{Platform} Card do guidance: focused card content{Platform} Card don't guidance: unfocused card content
{Platform} Card do guidance: clear card actions{Platform} Card don't guidance: unclear card actions
+
+ +## Properties + +The card API exposes container appearance and action-layout controls. + +| Name | Type | Default | Description | +| -- | -- | -- | -- | +| | `boolean` | `false` | Sets the card to use an elevated appearance with shadow. | +| | `"horizontal" \| "vertical"` | `"horizontal"` | Sets the layout orientation of . | ## Styling -Since the card is a container that wraps different elements, styling is done by styling its building blocks - the , , and sub-components. + + +The card appearance is controlled through theme variables and CSS parts on the card header. + +| Variable | What it changes | +| -- | -- | +| `--ig-card-background` | Card background color. | +| `--ig-card-outline-color` | Card outline color. | +| `--ig-card-header-text-color` | Card title text color. | +| `--ig-card-subtitle-text-color` | Card subtitle text color. | +| `--ig-card-content-text-color` | Card content text color. | +| `--ig-card-actions-text-color` | Card actions text color. | +| `--ig-card-resting-shadow` | Card shadow in its resting state. | +| `--ig-card-hover-shadow` | Card shadow in its hover state. | +| `--ig-card-border-radius` | Card border radius. | + +| CSS Part | Description | +| -- | -- | +| `header` | Card header text container. | +| `title` | Title slot wrapper. | +| `subtitle` | Subtitle slot wrapper. | + +### Sass Theming + +Use the function when your application customizes Ignite UI themes through Sass. + +```scss +@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. + + ```css igc-card { - background-color: var(--ig-secondary-900); + --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-content, -igc-card-header::part(title) { - color: var(--ig-primary-500-contrast); +igc-card-header::part(subtitle) { + color: var(--ig-warn-500); } +``` -igc-card-header > *[slot="subtitle"] { - color: var(--ig-warn-500); - opacity: 0.9; + + + + +```css +igx-card { + --background: var(--ig-secondary-900); + --header-text-color: var(--ig-secondary-900-contrast); + --content-text-color: var(--ig-secondary-900-contrast); } -igc-icon-button::part(base) { - background-color: var(--ig-primary-300); +igx-card-header { + --subtitle-text-color: var(--ig-warn-500); } ``` - + + +### Styling with Tailwind -### Summary -In this article we covered a lot of ground with the card component. We created a simple card and added some images to make it a bit more appealing. We used some additional {Platform} inside our card, like avatars, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's appearance by changing the major colors of the building blocks. + + +Use Tailwind utility classes when your React application already uses Tailwind and you want the card layout and local color choices to stay in the component markup. + + + + - +## Accessibility + +The card itself is a non-interactive container; keyboard and ARIA behavior come from the semantic content and interactive controls placed inside it. + +### Keyboard Interaction + +The card does not receive focus unless you add focusable content inside it. + +| Key | Action | +| -- | -- | +| Tab | Moves focus through interactive elements inside the card, such as buttons or links. | + +### Screen Readers / ARIA + +The card renders slotted content and does not add a landmark role by default. + +- Use semantic headings, links, buttons, images, and lists inside the card content. +- Provide `alt` text for meaningful media. +- Add an accessible name to icon-only buttons in the actions area. +- Add a role or label to the card container only when your application needs one for its information architecture. + +### Accessibility Compliance + +Infragistics documents {ProductName} accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.mdx) topic. The card's compliance evidence comes from the semantic content and interactive controls that you place inside the card. + +| Criterion | How the component complies | +| -- | -- | +| [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships) | The card preserves the semantic structure of slotted headings, text, media, and controls. | +| [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG22/Understanding/keyboard) | Interactive card content remains reachable by keyboard when authors use keyboard-operable controls. | + +Your responsibilities: + +- Use semantic elements for titles, body content, media, and actions. +- Provide accessible names for icon-only buttons and meaningful images. +- Preserve logical focus order when building custom horizontal or split card layouts. +- Keep sufficient contrast when overriding card colors. + +## Troubleshooting + +Use these notes to handle common card layout and composition questions. + +### Known Limitations + +No additional platform-independent limitations are documented for the card. Accessibility behavior depends on the semantic content and interactive controls that you place inside the card. ## API References -
-
-
-
-
-
-
-
-
+Use these API references for the complete card, card section, and supporting component APIs. + + + + + + + + + + + + +## 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 , , , , and components. + + + +Register the card component and any supporting components that your card content uses. + + + + + +Import the card wrappers and any supporting wrappers that your card content uses. Include a {ProductName} theme stylesheet once in your application. + + + + + +Register the card module and any supporting modules that your card content uses. Include a {ProductName} theme stylesheet once in your application. + + ## Additional Resources +Use these resources to continue with {ProductName} Card support, source, and related layout guidance. + - [{ProductName} **Forums**]({ForumsLink}) - [{ProductName} **GitHub**]({GithubLink}) + +## Related Components + + + +Use the [Grid](../grids/data-grid.mdx) when users need dense tabular data with sorting, filtering, and column-level interaction. Use the [List](../grids/list.mdx) when repeated items should remain compact and primarily vertical. + + + + + +Use the [Grid](../grid/grid.mdx) when users need dense tabular data with sorting, filtering, and column-level interaction. Use the [List](../list.mdx) when repeated items should remain compact and primarily vertical. + + + +## FAQ + + + + Use a card when related media, text, and actions describe one subject and benefit from a shared visual container. + + + Yes. Place buttons, links, menus, or other controls in the card content or actions area, and keep their tab order logical. + + + Use Grid for dense tabular data and List for compact repeated rows. Use Card when each item needs richer media, content, or actions. + + diff --git a/docs/xplat/src/content/en/toc.json b/docs/xplat/src/content/en/toc.json index 3d607d7a76..9c95e45dd8 100644 --- a/docs/xplat/src/content/en/toc.json +++ b/docs/xplat/src/content/en/toc.json @@ -2226,11 +2226,10 @@ "href": "layouts/avatar.mdx" }, { - "exclude": [ - "Angular" - ], + "exclude": [], "name": "Card", - "href": "layouts/card.mdx" + "href": "layouts/card.mdx", + "updated": true }, { "exclude": [