Skip to main content
Version: v5

ion-card

Cards are a standard piece of UI that serves as an entry point to more detailed information. A card can be a single component, but is often made up of some header, title, subtitle, and content. ion-card is broken up into several sub-components to reflect this. Please see ion-card-content, ion-card-header, ion-card-title, ion-card-subtitle.

Usage

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

<ion-card-content>
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the
woods. Wash your spirit clean.
</ion-card-content>
</ion-card>

<ion-card>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>ion-item in a card, icon left, button right</ion-label>
<ion-button fill="outline" slot="end">View</ion-button>
</ion-item>

<ion-card-content>
This is content, without any paragraph or header tags, within an ion-card-content element.
</ion-card-content>
</ion-card>

<ion-card>
<ion-item href="#" class="ion-activated">
<ion-icon name="wifi" slot="start"></ion-icon>
<ion-label>Card Link Item 1 activated</ion-label>
</ion-item>

<ion-item href="#">
<ion-icon name="wine" slot="start"></ion-icon>
<ion-label>Card Link Item 2</ion-label>
</ion-item>

<ion-item class="ion-activated">
<ion-icon name="warning" slot="start"></ion-icon>
<ion-label>Card Button Item 1 activated</ion-label>
</ion-item>

<ion-item>
<ion-icon name="walk" slot="start"></ion-icon>
<ion-label>Card Button Item 2</ion-label>
</ion-item>
</ion-card>

Properties

button

Descriptiontrueの場合、ボタンタグがレンダリングされ、カードはタップ可能になる。
Attributebutton
Typeboolean
Defaultfalse

color

DescriptionThe 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.
Attributecolor
Typestring | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはカードと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

download

DescriptionThis 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).
Attributedownload
Typestring | undefined
Defaultundefined

href

DescriptionContains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attributehref
Typestring | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

rel

DescriptionSpecifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attributerel
Typestring | undefined
Defaultundefined

routerAnimation

DescriptionWhen using a router, it specifies the transition animation when navigating to another page using href.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

routerDirection

DescriptionWhen using a router, it specifies the transition direction when navigating to another page using href.
Attributerouter-direction
Type"back" | "forward" | "root"
Default'forward'

target

DescriptionSpecifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

type

Descriptionボタンの種類。onclickまたはbutton`プロパティが存在する場合にのみ使用される。
Attributetype
Type"button" | "reset" | "submit"
Default'button'

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeすべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。

CSS Custom Properties

NameDescription
--backgroundカードの背景
--colorカードの色

Slots

No slots available for this component.

View Source