Ionic CSS - Card

Since mobile devices have a smaller screen size, cards are one of the best elements for displaying information that will feel user-friendly. In the previous chapter, we have discussed how to inset lists. Cards are very similar to inset lists, but they offer some additional shadowing that can influence the performance for larger lists.  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-contention-card-headerion-card-titleion-card-subtitle.

 

Content (ion-card-content)

ion-card-content is child component of ion-card that adds some content padding. It is recommended that any text content for a card should be placed in an ion-card-content.

<ion-card>
  <ion-card-content>
    Nullam scelerisque id ante ut sagittis.
  </ion-card-content>
</ion-card>

 

Header (ion-card-header)

ion-card-header is a header component for ion-card.

<ion-card>
  <ion-card-header>
  </ion-card-header>

  <ion-card-content>
    Aenean sagittis malesuada nisl vel dapibus.
  </ion-card-content>
</ion-card>

 

 

Title (ion-card-title)

ion-card-title is a child component of ion-card

<ion-card>
  <ion-card-header>
    <ion-card-title>My Title</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    Aenean sagittis malesuada nisl vel dapibus.
  </ion-card-content>
</ion-card>

 

Subtitle (ion-card-subtitle)

ion-card-subtitle is a child component of ion-card

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

  <ion-card-content>
    Aenean sagittis malesuada nisl vel dapibus.
  </ion-card-content>
</ion-card>