mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
63 lines
1.3 KiB
HTML
63 lines
1.3 KiB
HTML
|
|
<ion-toolbar><ion-title>Advanced Cards</ion-title></ion-toolbar>
|
|
|
|
|
|
<ion-card>
|
|
|
|
<div class="item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
|
|
<ion-header>
|
|
Title goes here
|
|
</ion-header>
|
|
|
|
<div class="item item-text-wrap">
|
|
<div class="item-content">
|
|
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain.
|
|
</div>
|
|
</div>
|
|
|
|
<ion-item>
|
|
<button clear>Action 1</button>
|
|
<button clear>Action 2</button>
|
|
</ion-item>
|
|
|
|
</ion-card>
|
|
|
|
|
|
<ion-card>
|
|
|
|
<div class="item">
|
|
<div class="item-media">
|
|
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
<div class="item-content">
|
|
<h2>Card With An Inset Picture</h2>
|
|
<p>Isn't it beautiful</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
|
|
<div class="item item-text-wrap">
|
|
<div class="item-content">
|
|
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain.
|
|
</div>
|
|
</div>
|
|
|
|
</ion-card>
|
|
|
|
|
|
<style>
|
|
.avatar {
|
|
width: 80px !important;
|
|
height: 80px;
|
|
}
|
|
img {
|
|
height: 100px;
|
|
}
|
|
</style>
|