Skip to main content

ion-card

View Source

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#

DescriptionIf true, a button tag will be rendered and the card will be tappable.
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#

DescriptionIf true, the user cannot interact with the card.
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#

DescriptionThe mode determines which platform styles to use.
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#

DescriptionThe type of the button. Only used when an onclick or button property is present.
Attributetype
Type"button" \| "reset" \| "submit"
Default'button'

CSS Shadow Parts#

NameDescription
nativeThe native HTML button, anchor, or div element that wraps all child elements.

CSS Custom Properties#

NameDescription
--backgroundBackground of the card
--colorColor of the card