framework7.angular

.page(data-page="cards") .navbar .navbar-inner .left a(href="index.html").back.link.icon-only i.icon.icon-back .center Cards .right a(href="#").link.open-panel.icon-only i.icon.icon-bars .page-content .content-block p Cards, along with List View, is a one more great way to contain and orginize your information. Cards contains unique related data, for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information. .content-block-title Simple Cards .card .card-content .card-content-inner This is simple card with plain text. But card could contain its own header, footer, list view, image, and any elements inside. .card .card-header Card header .card-content .card-content-inner Card with header and footer. Card header is used to display card title and footer for some additional information or for custom actions. .card-footer Card Footer .card .card-content .card-content-inner Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. .content-block-title Styled Cards .card.ks-card-header-pic .card-header.color-white.no-border(style="background-image:url(http://lorempixel.com/1000/600/nature/3/)", valign="bottom") Journey To Mountains .card-content .card-content-inner p.color-gray Posted on January 21, 2015 p Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit... .card-footer a(href="#").link Like a(href="#").link Read more .card.ks-card-header-pic .card-header.color-white.no-border(style="background-image:url(http://lorempixel.com/1000/600/people/6/)", valign="bottom") Lorem Ipsum .card-content .card-content-inner p.color-gray Posted on January 21, 2015 p Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit... .card-footer a(href="#").link Like a(href="#").link Read more .content-block-title Facebook Cards .card.ks-facebook-card .card-header.no-border .ks-facebook-avatar img(src="http://lorempixel.com/68/68/people/1/", width="34" height="34") .ks-facebook-name John Doe .ks-facebook-date Monday at 3:47 PM .card-content img(src="http://lorempixel.com/1000/700/nature/8/", width="100%") .card-footer.no-border a(href="#").link Like a(href="#").link Comment a(href="#").link Share .card.ks-facebook-card .card-header .ks-facebook-avatar img(src="http://lorempixel.com/68/68/people/1/", width="34" height="34") .ks-facebook-name John Doe .ks-facebook-date Monday at 2:15 PM .card-content .card-content-inner p What a nice photo i took yesterday! img(src="http://lorempixel.com/1000/700/nature/8/", width="100%") p.color-gray Likes: 112    Comments: 43 .card-footer a(href="#").link Like a(href="#").link Comment a(href="#").link Share .content-block-title Cards With List View .card .card-content .list-block ul li a.item-link.item-content(href="#") .item-media i.icon.icon-f7 .item-inner .item-title Link 1 li a.item-link.item-content(href="#") .item-media i.icon.icon-f7 .item-inner .item-title Link 2 li a.item-link.item-content(href="#") .item-media i.icon.icon-f7 .item-inner .item-title Link 3 li a.item-link.item-content(href="#") .item-media i.icon.icon-f7 .item-inner .item-title Link 4 li a.item-link.item-content(href="#") .item-media i.icon.icon-f7 .item-inner .item-title Link 5 .card .card-header New Releases: .card-content .list-block.media-list ul li.item-content .item-media img(src="http://lorempixel.com/88/88/fashion/4", width="44") .item-inner .item-title-row .item-title Yellow Submarine .item-subtitle Beatles li.item-content .item-media img(src="http://lorempixel.com/88/88/fashion/5", width="44") .item-inner .item-title-row .item-title Don't Stop Me Now .item-subtitle Queen li.item-content .item-media img(src="http://lorempixel.com/88/88/fashion/6", width="44") .item-inner .item-title-row .item-title Billie Jean .item-subtitle Michael Jackson .card-footer span January 20, 2015 span 5 comments