Ionic 2 components - Cards (Part 1)

Cards are used to highlight the display of any content in the page. Information can be displayed in an organized manner. Cards are nothing but a CSS component. Let's take a concept of displaying any important article in our  page. Lets look in to the cards by following categories.

  1. Basic Cards

  2. Card Headers

  3. Card Lists

  4. Card Images

  5. Advanced Cards

Basic Cards:

    To list a content inside cards.

a5.PNG

Card with Headers

    We can also add headers to our card contents.

a4.PNG

Card with Lists of contents:

    Cards can support displaying a list of content in a list format.

a3.PNG

Card with Images:

    It’s good to maintain a constant styles for images throughout our application. Images inside the card will be displayed with a constant with and  a variable height. Still Card header, list can be displayed with image.

a2.PNG

Advanced Cards:

   We can add our custom styles to our cards. Many of the element will designs by default, but still we need our own styles for some elements. Below is the page that will give you a completely different look.

a1.PNG

 


Sample Source Code:
Basic Cards (.html file)
 
  <ion-card>
 
    <ion-card-content>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </ion-card-content>
 
  </ion-card>
 
 
Card with Headers (.html file)
 
  <ion-card>
 
    <ion-card-header>
      My Card Header
    </ion-card-header>
 
    <ion-card-content>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
      text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
      with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </ion-card-content>
 
  </ion-card>
 
 
Card with Lists of contents (.html file):
 
  <ion-card>
    <ion-card-header>
      Top Articles today
    </ion-card-header>
 
    <ion-list>
      <ion-item>
        <ion-icon name="locate" item-start></ion-icon>
        Google Map integration in Ionic 2
      </ion-item>
 
      <ion-item>
        <ion-icon name="git-pull-request" item-start></ion-icon>
        A pull down effect Ionic 2
      </ion-item>
 
      <ion-item>
        <ion-icon name="apps" item-start></ion-icon>
        Check App Availability in Ionic 2
      </ion-item>
 
      <ion-item>
        <ion-icon name="albums" item-start></ion-icon>
        Fullscreen mode for Ionic 2
      </ion-item>
 
      <ion-item>
        <ion-icon name="color-filter" item-start></ion-icon>
        Pipes or Filters in Ionic 2
      </ion-item>
 
    </ion-list>
  </ion-card>
 
 
Card with Images (.html file):
 
  <ion-card>
    <img src="https://sites.udel.edu/diversity/files/2015/04/Calendar2-1ctzhl8.jpg" />
    <ion-card-content>
      <ion-card-title>
        Ionic 2 Calendar with events
      </ion-card-title>
      <p>
        You can add a calendar in ionic 2 using the node module "ionic2-calendar". Follow the link for further clarifications and sample code
http://www.codeexpertz.com/blog/mobile/ionic-2-calendar
      </p>
    </ion-card-content>
  </ion-card>
 
 
Advanced Cards:
 
  <ion-card>
    <ion-item>
      <ion-avatar item-start>
        <img src="https://pbs.twimg.com/profile_images/684416030874013696/hICN7ttp.jpg">
      </ion-avatar>
      <h2>Anish Nirmal</h2>
      <p>July 16, 1992</p>
    </ion-item>
    <img src="https://i.ytimg.com/vi/RqRNd4UyA4c/maxresdefault.jpg" />
    <ion-card-content>
      <ion-card-title>
        Theme Ionic 2 Application (Part 1) - Customize and modify default theme layer of ionic application
      </ion-card-title>
      <p>
        Ionic is built on top of Sass, which allows us to set some default styles. SASS is nothing but a "CSS preprocessor" which
        is a scripting language that extends CSS by allowing developers to write code in one language and then compile it
        into CSS. Some examples of CSS preprocessor include: Sass, LESS etc...
      </p>
    </ion-card-content>
    <ion-row>
      <ion-col>
        <button ion-button icon-left clear small>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>54 Likes</div>
      </button>
      </ion-col>
      <ion-col>
        <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
        <div>40 Comments</div>
      </button>
      </ion-col>
    </ion-row>
  </ion-card>
.css file:
 
ion-card {
    position: relative;
    text-align: center;
}
ion-card-title {
    position: absolute;
    top: 25%;
    font-size: 25px;
    width: 100%;
    font-weight: bold;
    color: #fff !important;
}
Category: