ionic-cardsionic-cards2

Cards are used to display information of a user or an organization.

Say for example, when you searching users in Facebook or companies in any directory site, the search result often displays a list.

When the individual company pages are displayed using a card layout, it gives a better user experience. It comes with box-shadow CSS by default.


<div class="card">

<div class="item item-text-wrap">

    This is a basic Card which contains an item that has wrapping text.

</div></div>

 

Card Headers and Footers

Headers and footer in the card are not extra options. We just achieving header and footer for the card by changing the background color of the first and the last item on the card.


<div class="card">

<div class="item item-divider">

    I'm a Header in a Card!

</div>

<div class="item item-text-wrap">

    This is a basic Card with some text.

</div>

<div class="item item-divider">

    I'm a Footer in a Card!

</div></div>

 

Card Lists

We can create list of cards using the list card class.


<div class="list card">


<a href="#" class="item item-icon-left">

    <i class="icon ion-home"></i>

    Enter home address

</a>


<a href="#" class="item item-icon-left">

    <i class="icon ion-ios-telephone"></i>

    Enter phone number

</a>


<a href="#" class="item item-icon-left">

    <i class="icon ion-wifi"></i>

    Enter wireless password

</a>


<a href="#" class="item item-icon-left">

    <i class="icon ion-card"></i>

    Enter card information

</a>

</div>

 

Card Images

By using card images, we can design an organization's information, user's information, etc.


<div class="list card">


<div class="item item-avatar">

    <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">

    <h2>Pretty Hate Machine</h2>

    <p>Nine Inch Nails</p>

</div>


<div class="item item-image">

    <img src="http://ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">

</div>


<a class="item item-icon-left assertive" href="#">

    <i class="icon ion-music-note"></i>

    Start listening

</a>


</div>

 

Card Showcase

We can design Facebook like Status Post using the card showcase. It begins with list card.

The item-avatar class is used to display user image. The item-body class is used to display post with images.


<div class="list card">


<div class="item item-avatar">

    <img src="http://ionicframework.com/img/docs/mcfly.jpg">

    <h2>Marty McFly</h2>

    <p>November 05, 1955</p>

</div>


<div class="item item-body">

    <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">

    <p>

    This is a "Facebook" styled Card. The header is created from a Thumbnail List item,

    the content is from a card-body consisting of an image and paragraph text. The footer

    consists of tabs, icons aligned left, within the card-footer.

    </p>

    <p>

    <a href="#" class="subdued">1 Like</a>

    <a href="#" class="subdued">5 Comments</a>

    </p>

</div>


</div>