Version: v6

ion-card

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, card title, card subtitle, and card content.

Basic Usage

src/app/example.component.html
src/app/example.component.css

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Here's a small text description for the card content. Nothing more, nothing less.
  </ion-card-content>
</ion-card>

/* iOS places the subtitle above the title */
ion-card-header.ios {
  display: flex;
  flex-flow: column-reverse;
}

Media Cards

src/app/example.component.html
src/app/example.component.css

<ion-card>
  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Here's a small text description for the card content. Nothing more, nothing less.
  </ion-card-content>
</ion-card>

/* iOS places the subtitle above the title */
ion-card-header.ios {
  display: flex;
  flex-flow: column-reverse;
}

Card Buttons

src/app/example.component.html
src/app/example.component.css

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Here's a small text description for the card content. Nothing more, nothing less.
  </ion-card-content>

  <ion-button fill="clear">Action 1</ion-button>
  <ion-button fill="clear">Action 2</ion-button>
</ion-card>

/* iOS places the subtitle above the title */
ion-card-header.ios {
  display: flex;
  flex-flow: column-reverse;
}

List Card

src/app/example.component.html
src/app/example.component.css

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    <ion-list>
      <ion-item>
        <ion-thumbnail slot="start">
          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
        </ion-thumbnail>
        <ion-label>Item</ion-label>
      </ion-item>

      <ion-item>
        <ion-thumbnail slot="start">
          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
        </ion-thumbnail>
        <ion-label>Item</ion-label>
      </ion-item>

      <ion-item>
        <ion-thumbnail slot="start">
          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
        </ion-thumbnail>
        <ion-label>Item</ion-label>
      </ion-item>

      <ion-item lines="none">
        <ion-thumbnail slot="start">
          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
        </ion-thumbnail>
        <ion-label>Item</ion-label>
      </ion-item>
    </ion-list>
  </ion-card-content>
</ion-card>

ion-item {
  --padding-start: 0;
}

/* iOS places the subtitle above the title */
ion-card-header.ios {
  display: flex;
  flex-flow: column-reverse;
}

Theming

Colors

src/app/example.component.html
src/app/example.component.css

<ion-card color="primary">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content> Card Content </ion-card-content>
</ion-card>

<ion-card color="secondary">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content> Card Content </ion-card-content>
</ion-card>

<ion-card color="tertiary">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content> Card Content </ion-card-content>
</ion-card>

<ion-card color="success">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content> Card Content </ion-card-content>
</ion-card>

<ion-card color="warning">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content> Card Content </ion-card-content>
</ion-card>

<ion-card color="danger">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content> Card Content </ion-card-content>
</ion-card>

<ion-card color="light">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content> Card Content </ion-card-content>
</ion-card>

<ion-card color="medium">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content> Card Content </ion-card-content>
</ion-card>

<ion-card color="dark">
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content> Card Content </ion-card-content>
</ion-card>

/* iOS places the subtitle above the title */
ion-card-header.ios {
  display: flex;
  flex-flow: column-reverse;
}

CSS Custom Properties

src/app/example.component.html
src/app/example.component.css

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Here's a small text description for the card content. Nothing more, nothing less.
  </ion-card-content>
</ion-card>

ion-card {
  --background: #000;
  --color: #9efff0;
}

ion-card-title {
  --color: #52ffe4;
}

ion-card-subtitle {
  --color: #d1fff8;
}

/* iOS places the subtitle above the title */
ion-card-header.ios {
  display: flex;
  flex-flow: column-reverse;
}

Properties

button

Description	`true`の場合、ボタンタグがレンダリングされ、カードはタップ可能になる。
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.
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`
Default	`undefined`

disabled

Description	`true`の場合、ユーザはカードと対話することができません。
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	modeは、どのプラットフォームのスタイルを使用するかを決定します。
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.
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	ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。
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`	すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。

CSS Custom Properties

Name	Description
`--background`	カードの背景
`--color`	カードの色

Slots

No slots available for this component.

Basic Usage​

Media Cards​

Card Buttons​

List Card​

Theming​

Colors​

CSS Custom Properties​

Properties​

button​

color​

disabled​

download​

href​

mode​

rel​

routerAnimation​

routerDirection​

target​

type​

Events​

Methods​

CSS Shadow Parts​

CSS Custom Properties​

Slots​

Contents

Basic Usage

Media Cards

Card Buttons

List Card

Theming

Colors

CSS Custom Properties

Properties

button

color

disabled

download

href

mode

rel

routerAnimation

routerDirection

target

type

Events

Methods

CSS Shadow Parts

CSS Custom Properties

Slots