mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
112 lines
2.7 KiB
HTML
112 lines
2.7 KiB
HTML
|
|
<ion-toolbar>
|
|
<ion-title>Social Card</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-content class="social-cards">
|
|
|
|
<ion-card>
|
|
|
|
<ion-item>
|
|
<ion-avatar item-left>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-avatar>
|
|
<h2>Marty McFly</h2>
|
|
<p>November 5, 1955</p>
|
|
</ion-item>
|
|
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
|
|
<ion-card-content>
|
|
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
|
|
</ion-card-content>
|
|
|
|
<ion-item>
|
|
<button primary clear item-left>
|
|
<ion-icon name="thumbs-up"></ion-icon>
|
|
<div>12 Likes</div>
|
|
</button>
|
|
<button primary clear item-left>
|
|
<ion-icon name="text"></ion-icon>
|
|
<div>4 Comments</div>
|
|
</button>
|
|
<ion-note item-right>
|
|
11h ago
|
|
</ion-note>
|
|
</ion-item>
|
|
|
|
</ion-card>
|
|
|
|
|
|
<ion-card>
|
|
|
|
<ion-item>
|
|
<ion-avatar item-left>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-avatar>
|
|
<h2>Sarah Connor</h2>
|
|
<p>May 12, 1984</p>
|
|
</ion-item>
|
|
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
|
|
<ion-card-content>
|
|
<p>I face the unknown future, with a sense of hope. Because if a machine, a Terminator, can learn the value of human life, maybe we can too.</p>
|
|
</ion-card-content>
|
|
|
|
<ion-item>
|
|
<button primary clear item-left>
|
|
<ion-icon name="thumbs-up"></ion-icon>
|
|
<div>30 Likes</div>
|
|
</button>
|
|
<button primary clear item-left>
|
|
<ion-icon name="text"></ion-icon>
|
|
<div>64 Comments</div>
|
|
</button>
|
|
<ion-note item-right>
|
|
30yr ago
|
|
</ion-note>
|
|
</ion-item>
|
|
|
|
</ion-card>
|
|
|
|
<ion-card>
|
|
|
|
<ion-item>
|
|
<ion-avatar item-left>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-avatar>
|
|
<h2>Dr. Ian Malcolm</h2>
|
|
<p>June 28, 1990</p>
|
|
</ion-item>
|
|
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
|
|
<ion-card-content>
|
|
<p>Your scientists were so preoccupied with whether or not they could, that they didn't stop to think if they should.</p>
|
|
</ion-card-content>
|
|
|
|
<ion-item>
|
|
<button primary clear item-left>
|
|
<ion-icon name="thumbs-up"></ion-icon>
|
|
<div>46 Likes</div>
|
|
</button>
|
|
<button primary clear item-left>
|
|
<ion-icon name="text"></ion-icon>
|
|
<div>66 Comments</div>
|
|
</button>
|
|
<ion-note item-right>
|
|
2d ago
|
|
</ion-note>
|
|
</ion-item>
|
|
|
|
</ion-card>
|
|
|
|
</ion-content>
|
|
|
|
<style>
|
|
.social-cards img {
|
|
height: 200px;
|
|
}
|
|
</style>
|