# ion-card URL: https://ionicframework.com/docs/api/card **Encapsulation**: [shadow](/docs/reference/glossary.md#shadow) Cards are containers that display content such as text, images, buttons, and lists. A card can be a single component, but is often made up of a header, title, subtitle, and content. Cards are broken up into several components to accommodate this structure: [card header](/docs/api/card-header.md), [card title](/docs/api/card-title.md), [card subtitle](/docs/api/card-subtitle.md), and [card content](/docs/api/card-content.md). ## Basic Usage **JavaScript** ```html Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. ``` **Angular** `src/app/example.component.html` ```html Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. ``` `src/app/example.component.ts` ```ts import { Component } from '@angular/core'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], }) export class ExampleComponent {} ``` **React** ```tsx import React from 'react'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; function Example() { return ( Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. ); } export default Example; ``` **Vue** ```html ``` ## Media Cards **JavaScript** ```html Silhouette of mountains Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. ``` **Angular** `src/app/example.component.html` ```html Silhouette of mountains Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. ``` `src/app/example.component.ts` ```ts import { Component } from '@angular/core'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], }) export class ExampleComponent {} ``` **React** ```tsx import React from 'react'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; function Example() { return ( Silhouette of mountains Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. ); } export default Example; ``` **Vue** ```html ``` ## Card Buttons **JavaScript** ```html Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. Action 1 Action 2 ``` **Angular** `src/app/example.component.html` ```html Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. Action 1 Action 2 ``` `src/app/example.component.ts` ```ts import { Component } from '@angular/core'; import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], }) export class ExampleComponent {} ``` **React** ```tsx import React from 'react'; import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; function Example() { return ( Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. Action 1 Action 2 ); } export default Example; ``` **Vue** ```html ``` ## List Card **JavaScript** ```html Card Title Card Subtitle Silhouette of mountains Item Silhouette of mountains Item Silhouette of mountains Item Silhouette of mountains Item ``` **Angular** `src/app/example.component.html` ```html Card Title Card Subtitle Silhouette of mountains Item Silhouette of mountains Item Silhouette of mountains Item Silhouette of mountains Item ``` `src/app/example.component.css` ```css ion-item { --padding-start: 0; } ``` `src/app/example.component.ts` ```ts import { Component } from '@angular/core'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonItem, IonLabel, IonList, IonThumbnail, } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], imports: [ IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonItem, IonLabel, IonList, IonThumbnail, ], }) export class ExampleComponent {} ``` **React** `src/main.tsx` ```tsx import React from 'react'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonItem, IonLabel, IonList, IonThumbnail, } from '@ionic/react'; import './main.css'; function Example() { return ( Card Title Card Subtitle Silhouette of mountains Item Silhouette of mountains Item Silhouette of mountains Item Silhouette of mountains Item ); } export default Example; ``` `src/main.css` ```css ion-item { --padding-start: 0; } ``` **Vue** ```html ``` ## Theming ### Colors **JavaScript** ```html Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content ``` **Angular** `src/app/example.component.html` ```html Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content ``` `src/app/example.component.ts` ```ts import { Component } from '@angular/core'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], }) export class ExampleComponent {} ``` **React** ```tsx import React from 'react'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; function Example() { return ( <> Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content Card Title Card Subtitle Card Content ); } export default Example; ``` **Vue** ```html ``` ### CSS Custom Properties **JavaScript** ```html Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. ``` **Angular** `src/app/example.component.html` ```html Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. ``` `src/app/example.component.css` ```css ion-card { --background: #000; --color: #9efff0; } ion-card-title { --color: #52ffe4; } ion-card-subtitle { --color: #d1fff8; } ``` `src/app/example.component.ts` ```ts import { Component } from '@angular/core'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', styleUrls: ['example.component.css'], imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], }) export class ExampleComponent {} ``` **React** `src/main.tsx` ```tsx import React from 'react'; import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; import './main.css'; function Example() { return ( Card Title Card Subtitle Here's a small text description for the card content. Nothing more, nothing less. ); } export default Example; ``` `src/main.css` ```css ion-card { --background: #000; --color: #9efff0; } ion-card-title { --color: #52ffe4; } ion-card-subtitle { --color: #d1fff8; } ``` **Vue** ```html ``` ## Properties ### button **Description**: If `true`, a button tag will be rendered and the card will be tappable. **Attribute**: `button` **Type**: `boolean` **Default**: `false` ### color **Description**: The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics.md). **Attribute**: `color` **Type**: `"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined` **Default**: `undefined` ### disabled **Description**: If `true`, the user cannot interact with the card. **Attribute**: `disabled` **Type**: `boolean` **Default**: `false` ### download **Description**: This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). **Attribute**: `download` **Type**: `string | undefined` **Default**: `undefined` ### href **Description**: Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. **Attribute**: `href` **Type**: `string | undefined` **Default**: `undefined` ### mode **Description**: The mode determines which platform styles to use. This is a [virtual property](/docs/core-concepts/fundamentals.md#virtual-properties) that is set once during initialization and will not update if you change its value after the initial render. **Attribute**: `mode` **Type**: `"ios" | "md"` **Default**: `undefined` ### rel **Description**: Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). **Attribute**: `rel` **Type**: `string | undefined` **Default**: `undefined` ### routerAnimation **Description**: When using a router, it specifies the transition animation when navigating to another page using `href`. **Attribute**: `undefined` **Type**: `((baseEl: any, opts?: any) => Animation) | undefined` **Default**: `undefined` ### routerDirection **Description**: When using a router, it specifies the transition direction when navigating to another page using `href`. **Attribute**: `router-direction` **Type**: `"back" | "forward" | "root"` **Default**: `'forward'` ### target **Description**: Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. **Attribute**: `target` **Type**: `string | undefined` **Default**: `undefined` ### type **Description**: The type of the button. Only used when an `onclick` or `button` property is present. **Attribute**: `type` **Type**: `"button" | "reset" | "submit"` **Default**: `'button'` ## Events No events available for this component. ## Methods No public methods available for this component. ## CSS Shadow Parts | Name | Description | | --- | --- | | `native` | The native HTML button, anchor, or div element that wraps all child elements. | ## CSS Custom Properties **iOS** | Name | Description | | --- | --- | | `--background` | Background of the card | | `--color` | Color of the card | **MD** | Name | Description | | --- | --- | | `--background` | Background of the card | | `--color` | Color of the card | ## Slots | Name | Description | | --- | --- | | | The default slot |