CSS Components in Ionic - Cards

In this post we are going to discuss about Cards in Ionic. Cards are one of the design patterns for showcasing content on a mobile device. Cards are the best way to organize the contents or information. Like Lists, creating Cards in Ionic is very simple because it is driven by CSS Classes.

In Ionic, for creating a card all you need to do is to design a personalized content that fits into a card and add a class card to the container as shown below.

<ion-content class="padding">
  <div class="card">
    <div class="item item-divider">
      Header of Card
    </div>
    <div class="item item-text-wrap">
      Body of the card
    </div>
    <div class="item item-divider">
      Footer of Card
    </div>
  </div>
</ion-content>

In the above code you can see that we have a div with class named card and inside that we have three different divs having class item. We have design our card such a way that we have header, body and footer inside the card. All the three sections are divided using item-divider class. You can also have lists inside the card as shown below.

<ion-content class="padding">
  <div class="list card">
    <div class="item">List Item 1</div>
    <div class="item">List Item 2</div>
    <div class="item">List Item 3</div>
    <div class="item">List Item 4</div>
  </div>
</ion-content>

Simple Example of Usage of Cards :

<ion-content class="padding">
  <div class="list card">
    <div class="item">
      <h1>Weather Report</h1>
      <p>October 24, 2015</p>
    </div>

    <div class="item item-body">
      <p>
        <div class="text-center">
          <h2>Sunny</h2>
        </div>
        <div class="text-center">
          <i class="icon ion-ios-sunny" style="font-size:100px"></i>
        </div>
      </p>
    </div>

    <div class="item tabs tabs-secondary tabs-icon-left">
      <a class="tab-item" href="#">
        <i class="icon ion-chatbox"></i> Comment
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-share"></i> Share
      </a>
    </div>            
  </div>
</ion-content>

The Result will be :

Please Like and Share the CodingDefined.com Blog, if you find it knowledgeable and helpful.

Related articles

• What is Apache Cordova and Ionic Framework 
• Introducing Navbar in Bootstrap - Part 1 
• Getting Started with Ionic Framework in Visual Studio 2015 
• Control Content Placement in Bootstrap 
• Enhance Data Display using Carousel in Bootstrap 
• IonicLab for Windows 
• Inheritance in TypeScript 
• Classes in TypeScript 
• C# Static Classes 
• Introducing Bootstrap Forms