Working with Card Components
1. Using IonCard Component
| Property | Values | Description |
|---|---|---|
| color | primary | secondary | tertiary | success | warning | danger | light | medium | dark |
Sets the color theme of the card |
| mode | ios | md |
Specifies the UI mode (iOS or Material Design) |
| disabled | true | false |
Disables the card if set to true |
Example: Basic IonCard Usage
<ion-card>
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>This is the content of the card.</p>
</ion-card-content>
</ion-card>Example: Card with Image
<ion-card>
<ion-img src="card-image.jpg"></ion-img>
<ion-card-header>
<ion-card-title>Card with Image</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>This card includes an image.</p>
</ion-card-content>
</ion-card>
Note: IonCard is a flexible component that can contain headers, content, and footers. It supports various themes and modes to match the design language of your app.
2. Adding Card Header
| Property | Values | Description |
|---|---|---|
| title | string |
Sets the main title of the card header |
| subtitle | string |
Optional subtitle for additional context |
| avatar | string |
URL or path to an avatar image |
Example: Basic Card Header
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
</ion-card-header>Example: Card Header with Avatar
<ion-card-header>
<ion-avatar slot="start">
<img alt="User Avatar" src="path/to/avatar.jpg">
</ion-avatar>
<ion-card-title>John Doe</ion-card-title>
<ion-card-subtitle>Developer</ion-card-subtitle>
</ion-card-header>3. Adding Card Title
| Property | Values | Description |
|---|---|---|
| title | string |
Sets the title text of the card. |
| subtitle | string |
Optional subtitle for the card. |
Example: Basic Card with Title
<ion-card>
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>This is the content of the card.</p>
</ion-card-content>
</ion-card>Example: Card with Title and Subtitle
<ion-card>
<ion-card-header>
<ion-card-title>Ionic Framework</ion-card-title>
<ion-card-subtitle>Build Cross-Platform Apps</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<p>Learn how to build mobile apps with Ionic.</p>
</ion-card-content>
</ion-card>4. Adding Card Subtitle
| Property | Values | Description |
|---|---|---|
| subtitle | string |
Sets the subtitle text for the card component. |
Example: Using Subtitle in Card
<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>
<p>This is the content of the card.</p>
</ion-card-content>
</ion-card>5. Adding Card Content
Cards in Ionic are used to display content in a structured way. The following table outlines the primary components and properties for adding content to cards.
| Component | Properties | Description |
|---|---|---|
| ion-card-content | color, mode |
Displays content inside a card. Can include text, images, and other components. |
Example: Basic Card Content
<ion-card>
<ion-card-content>
<p>This is the content of the card.</p>
</ion-card-content>
</ion-card>Example: Card with Image and Content
<ion-card>
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
<img src="card-image.jpg" alt="Card Image">
<p>This card includes an image and some content.</p>
</ion-card-content>
</ion-card>6. Using Card Images
| Property | Values | Description |
|---|---|---|
| src | string |
URL or path to the image file. Supports local paths and remote URLs. |
| alt | string |
Alternative text for accessibility and SEO purposes. |
| loading | lazy | eager |
Controls when the image is loaded. Default is eager. |
Example: Basic Card Image
<ion-card>
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-img src="/assets/images/card-image.jpg" alt="A beautiful landscape"></ion-img>
</ion-card-content>
</ion-card>Example: Responsive Card Image
<ion-card>
<ion-img src="/assets/images/responsive-card.jpg" alt="Responsive card image" loading="lazy"></ion-img>
<ion-card-content>
<p>This image loads only when it's near the viewport.</p>
</ion-card-content>
</ion-card>
Note: For best performance, use
loading="lazy" on images that are not immediately visible to the user.
7. Making Cards Clickable
Cards in Ionic can be made clickable by using the button property or by adding a click handler to the card component.
| Property | Description | Values | Notes |
|---|---|---|---|
| button | Makes the card clickable | true / false |
When set to true, the card will behave as a button and trigger a click event |
Example: Using the button property
<ion-card button="true">
<ion-card-header>
<ion-card-title>Clickable Card</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>This card is clickable.</p>
</ion-card-content>
</ion-card>Example: Adding a click handler
import { Component } from '@angular/core';
@Component({
selector: 'app-card-example',
template: `
<ion-card (click)="onCardClick()">
<ion-card-header>
<ion-card-title>Card with Click Handler</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Click me to see the effect.</p>
</ion-card-content>
</ion-card>
`
})
export class CardExampleComponent {
onCardClick() {
console.log('Card was clicked!');
}
}8. Styling Card Appearance
| Property | Values | Description |
|---|---|---|
| --background | transparent |
Background color or image of the card |
| --border-color | #ccc |
Border color of the card |
| --border-radius | 8px |
Border radius of the card corners |
| --border-width | 1px |
Width of the card border |
| --box-shadow | 0 2px 8px rgba(0,0,0,0.1) |
Shadow effect of the card |
| --color | #333 |
Text color inside the card |
| --padding-bottom | 16px |
Padding at the bottom of the card |
| --padding-end | 16px |
Padding at the right side of the card |
| --padding-start | 16px |
Padding at the left side of the card |
| --padding-top | 16px |
Padding at the top of the card |
Example: Customizing Card Background
.custom-card {
--background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--color: white;
--border-radius: 12px;
}9. Creating Card Lists
Example: Basic Card List
<ion-list>
<ion-item>
<ion-card>
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Card content goes here.</p>
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>| Property | Values | Description |
|---|---|---|
| ion-list | ion-list |
Container for a list of items |
| ion-item | ion-item |
Represents an item in a list |
| ion-card | ion-card |
Represents a card component |
| ion-card-header | ion-card-header |
Header section of a card |
| ion-card-title | ion-card-title |
Title within the card header |
| ion-card-content | ion-card-content |
Main content area of a card |
Note: Cards can be used inside lists to create a collection of related content.
10. Using Cards with Avatars
| Property | Description | Values |
|---|---|---|
| avatar.src | Source of the avatar image | string |
| avatar.alt | Alternative text for accessibility | string |
| avatar.size | Size of the avatar | 'small' | 'medium' | 'large' |
Example: Basic Card with Avatar
<ion-card>
<ion-card-header>
<ion-card-title>User Profile</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-avatar slot="start">
<img alt="User avatar" src="/assets/avatar.jpg">
</ion-avatar>
<ion-label>John Doe</ion-label>
</ion-item>
</ion-card-content>
</ion-card>Example: Avatar with Size Variation
<ion-card>
<ion-card-content>
<ion-item>
<ion-avatar slot="start" size="large">
<img alt="Large avatar" src="/assets/large-avatar.jpg">
</ion-avatar>
<ion-label>Jane Smith</ion-label>
</ion-item>
</ion-card-content>
</ion-card>
Note: The
ion-avatar component should be placed inside an ion-item or directly within the card content to ensure proper alignment and spacing.