Ionic - Cards
Mobile Phone have smaller screen size so Ionic - Cards are one of the best elements for displaying information that will feel user friendly.
Adding CardsA default card can be created by adding a card class to your element. Cards are usually formed as lists with the active class. One of the most useful class is the active-text-wrap. This will help when you have too much text, so you want to wrap it inside your card. The first card in the following example does not have the active-text-wrap class assigned, but the second one is using it.
<div class = "card"> <div class = "active"> This is a Ionic card without active-text-wrap class. </div> <div class = "active active-text-wrap"> This is a Ionic card with active-text-wrap class. </div> </div>
Card Header and FooterIn the previous chapter, we have already discussed how to use the active-divider class for grouping lists.
<div class = "card list"> <div class = "active active-divider"> Card header </div> <div class = "active active-text-wrap"> Card text... </div> <div class = "active active-divider"> Card Footer </div> </div>
Complete Cardwe will show you how to use the full-image class together with the active-body to get a good-looking windowed image inside your card.
<div class = "card"> <div class = "active active-avatar"> <img src = "my-image.png"> <h2>Card Name</h2> </div> <div class = "active active-body"> <img class = "full-image" src = "my-image.png"> "I hear babies cry, I watch them grow, They'll learn much more, Than I'll ever know. And I think to myself, What a wonderful World" - Louis Armstrong "What a Wonderful World" You are Beautiful, no matter what they say." - Christina Aguilera "Beautiful" "Don’t you know that there ain’t no mountain high enough. Ain’t no valley low enough, ain’t no river wide enough. To keep me from getting to you, baby." – Marvin Gaye & Tammi Terrell "Ain’t No Mountain High Enough" </div> </div>