Card Showcase
Here is a showcase of a card using several different items. It begins with the list card
element, utilizing the item-avatar
list item, an item-body
element for images and text, and a footer with the item-divider
classname.
<divclass="list card"><divclass="item item-avatar"><imgsrc="mcfly.jpg"><h2>Marty McFly</h2><p>November 05, 1955</p></div><divclass="item item-body"><imgclass="full-image"src="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><ahref="#"class="subdued">1 Like</a><ahref="#"class="subdued">5 Comments</a></p></div><divclass="item tabs tabs-secondary tabs-icon-left"><aclass="tab-item"href="#"><iclass="icon ion-thumbsup"></i>
Like
</a><aclass="tab-item"href="#"><iclass="icon ion-chatbox"></i>
Comment
</a><aclass="tab-item"href="#"><iclass="icon ion-share"></i>
Share
</a></div></div>