mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
121 lines
2.7 KiB
HTML
121 lines
2.7 KiB
HTML
|
|
<ion-toolbar><ion-title>Advanced Cards</ion-title></ion-toolbar>
|
|
|
|
<ion-content class="outer-content">
|
|
|
|
<ion-card>
|
|
|
|
<div>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
|
|
<ion-card-content>
|
|
<ion-card-title>
|
|
Card Title Goes Here
|
|
</ion-card-title>
|
|
<p>
|
|
Keep close to Nature's heart... and break clear away,
|
|
once in awhile, and climb a mountain. I am within a paragraph element.
|
|
</p>
|
|
</ion-card-content>
|
|
|
|
<ion-row>
|
|
<ion-col no-padding>
|
|
<button clear small>
|
|
<ion-icon name="star"></ion-icon>
|
|
Star
|
|
</button>
|
|
</ion-col>
|
|
<ion-col no-padding text-right>
|
|
<button clear small class="activated">
|
|
<ion-icon name="share"></ion-icon>
|
|
Activated
|
|
</button>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
</ion-card>
|
|
|
|
|
|
<ion-card>
|
|
|
|
<ion-item>
|
|
<ion-avatar item-left>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-avatar>
|
|
<h2>Card With An Inset Picture</h2>
|
|
<p>Isn't it beautiful</p>
|
|
</ion-item>
|
|
|
|
<div>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
|
|
<ion-card-content>
|
|
<p>Hello. I am a paragraph.</p>
|
|
</ion-card-content>
|
|
|
|
<ion-row>
|
|
<ion-col no-padding>
|
|
<button clear small>
|
|
<ion-icon name="star"></ion-icon>
|
|
Favorite
|
|
</button>
|
|
</ion-col>
|
|
<ion-col no-padding text-center>
|
|
<button clear small>
|
|
<ion-icon name="musical-notes"></ion-icon>
|
|
Listen
|
|
</button>
|
|
</ion-col>
|
|
<ion-col no-padding text-right>
|
|
<button clear small danger class="activated">
|
|
<ion-icon name="share"></ion-icon>
|
|
Activated
|
|
</button>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-card>
|
|
|
|
<ion-card>
|
|
|
|
<div>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
|
|
<ion-card-content>
|
|
This card was breaking the border radius.
|
|
</ion-card-content>
|
|
|
|
<ion-row>
|
|
<ion-col no-padding>
|
|
<button clear small dark>
|
|
<ion-icon name="star"></ion-icon>
|
|
Favorite
|
|
</button>
|
|
</ion-col>
|
|
|
|
<ion-col no-padding text-center>
|
|
<button clear small dark>
|
|
<ion-icon name="musical-notes"></ion-icon>
|
|
Listen
|
|
</button>
|
|
</ion-col>
|
|
<ion-col no-padding text-right>
|
|
<button clear small dark>
|
|
<ion-icon name="share-alt"></ion-icon>
|
|
Share
|
|
</button>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
</ion-card>
|
|
|
|
</ion-content>
|
|
|
|
<style>
|
|
img {
|
|
height: 100px;
|
|
}
|
|
</style>
|