- 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.
-
-
-
-
-
-
-
+ New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
+ New York
+City in New York
+New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
- 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.
-
-
-
-
-
-
-
+ New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
- 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.
-
-
-
-
-
-
-
+ New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+`–``). 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.
+### Media
+
+Use
+
+```html
+
+
+
+```
+
+
+
+
-Any image or video we want to show in the card, we wrap inside the
+
+
+```
+
+
-You can place anything inside the
-Finally, the
+
+
+```
-### Media, Thumbs, and Avatars
+
+
+
+
+```razor
+
+
+
+```
+
+
-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.
+### Header Slots
-Taking the card above as an example, we can edit the contents of the
```html
-
```
+
+
+```html
+
+
+ place
+
+ Title
+ Subtitle
+
+```
+
+
+
```tsx
-
```
@@ -237,77 +413,36 @@ Taking the card above as an example, we can edit the contents of the
-
-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
+Use neutral inline elements such as `` for `title` and `subtitle` when you want to inherit the card typography without browser heading margins.
-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.
+### Content
-Here's an example of an outlined horizontal card:
+Use
```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.
-
-
-
-
-
-
-
+
+ New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
```
-
+
-```razor
-
-
-
-
-
- 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.
-
-
-
-
-
-
-
+```html
+
+ New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
```
@@ -315,116 +450,43 @@ 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
-
-
-
+
+ New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
```
-We are using an additional `div` element to bundle the
-.card-horizontal igc-card-actions {
- justify-content: center;
-}
+```razor
+
+ New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
```
-If everything went well, our card should look like this:
-
-
-You can get even more creative with the layout of the
```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
-
-
-
- 
-
-
+
+ ...
```
-
+
-```razor
-
-
-
-
-
-
- Far far away, behind the word mountains,
- far from the countries Vokalia and Consonantia,
- there live the blind texts.
-
-
- Play Album
-
-
-
-
-
-
-
+```html
+
+ ...
+
```
@@ -432,162 +494,399 @@ Below is an example showing how you can create a semi-horizontal card, where we
```tsx
-
-
-
-
-
-
- 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;
-}
+
-.card-media {
- width: 96px;
- min-width: 96px;
-}
+```razor
+
+ ...
+
```
-
-### Card Actions
+### Actions Slots
-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
```html
-
-
-
-
-
-
-
-
+ Like
+ Comment
+
```
+
+
+```html
+
+
+
+
+
+```
+
+
+
+
+
+```tsx
+
+ Like
+ Comment
+
+```
+
+
+
```razor
-
-
-
-
-
-
-
-
+ Like
+ Comment
+
```
+### Actions Orientation
+
+
+
+Use the
+
+
+
+Set `vertical` on `igx-card-actions` when the actions should be arranged vertically.
+
+
+
+
+
+```html
+
+ Like
+ Share
+
+```
+
+
+
+
+
+```html
+
+
+
+
+
+```
+
+
+
```tsx
-
-
- Read more
-
-
-
-
-
-
-
+
+ Like
+ Share
+
```
-You can also add more content in-between by simply omitting the slot property and let the elements go to the default slot.
+
+
+```razor
+
+ Like
+ Share
+
+```
+
+
+
+### 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.
+
+
+
+
+
+ Do
+ Don't
+
+
+
+
+
+
+
+
+
+
+
+## Properties
+
+The card API exposes container appearance and action-layout controls.
+
+| Name | Type | Default | Description |
+| -- | -- | -- | -- |
+|
```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);
+}
+
+igx-card-header {
+ --subtitle-text-color: var(--ig-warn-500);
+}
+```
+
+
+
+### Custom Layouts
+
+Wrap card sections in your own layout containers when you need horizontal or split card compositions.
+
+
+
+```css
+.card-horizontal {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0%;
+}
+
+.card-horizontal igc-card-actions {
+ justify-content: center;
+}
+```
+
+
+
+
+
+```css
+.card-horizontal {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0%;
}
-igc-icon-button::part(base) {
- background-color: var(--ig-primary-300);
+.card-horizontal igx-card-actions {
+ justify-content: center;
}
```
-
+
+
-
-
-
-
-
-
-
-
+Use these API references for the complete card, card section, and supporting component APIs.
+
+
+
+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.
+
+## 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.
+
+
+
+
+
+
+ place
+
+ Title
+Subtitle
+
-
-
-
-
-
-
- Rozes
- Under the Grave (2016)
-
-
-
-
-
-
- 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.
-New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
-
-
-
-
-
-
- Rozes
- Under the Grave (2016)
-
-
-
-
-
-
- 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.
-New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
-
- skip_previous
- play_arrow
- skip_next
-
-
-
-
-
- Rozes
- Under the Grave (2016)
-
-
-
-
-
-
- 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.
-New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+New York City comprises five boroughs where the Hudson River meets the Atlantic Ocean.
+
-
-
-
-
+
-
- MD
- HERE
- by Mellow D
-
-
-
-
- play album
-
-
- Far far away, behind the word mountains, - far from the countries Vokalia and Consonantia, - there live the blind texts.
-
-
-
-
-
-
-
-
-
-
-
-
- Play Album
-
-
- Far far away, behind the word mountains, - far from the countries Vokalia and Consonantia, - there live the blind texts.
-
-
-
-
-
-
+
-
-
-
-
-
- Play Album
-
-
-
- Far far away, behind the word mountains, - far from the countries Vokalia and Consonantia, - there live the blind texts.
-
-
-
-
-
-
-
+
-
-
-
-
-
+
-
-
-
-
-
+
+
+
+
+
+
+## Properties
+
+The card API exposes container appearance and action-layout controls.
+
+| Name | Type | Default | Description |
+| -- | -- | -- | -- |
+| | Do | +Don't | +
|---|---|
-
-
-
-
-
-
-
-
+Use these API references for the complete card, card section, and supporting component APIs. + +