menu

Ionic Cards


Ionic Cards : Ionic cards are great way to display information in an organized way. Cards are used widely by the companies like google, twitter. Cards can be any size and animated. Cards can be swiped left or right. You can add shadow and border to the ionic cards. Class “card” is used to create ionic cards. Here we are going to explain the card functionality with example and demo.


Ionic Cards

Add the class .card in wrapper div and then add child elements. Here is simple example of ionic cards.

Ionic Cards Example

Try it »

The above example will produce the following output-

Ionic Cards

Headers And Footers

Headers and Footers are important part of ionic Cards. You can add Headers and footers by adding the class – .item-divider in header and footer. Example of header is as –

Cards Header And Footer Example

Try it »

The above example will produce the following output-

Ionic headers and footers

Ionic Cards With List

The class – .list is used to create cards with list. Example of card list is as –

Cards List Example

Try it »

The above example will produce the following output-

Ionic Cards With List

Ionic Card Images

Cards are perfect to display images and content. Images in cards looks great. Here is an example card image-

Cards Image Example

Try it »

The above example will produce the following output-

Ionic Card Images

Card Showcase

Card Showcase contains several items such as item-avatar, item-card, images and item-body etc. Card Showcase are great way to display the rich content. Here is example of Card Showcase-

Card Showcase Example

Try it »

The above example will produce the following output-

Card Showcase  Card Showcase contains


User Ans/Comments

📖 Read More


Advertisements