docs(demos): add background card example

This commit is contained in:
Drew Rygh
2015-10-18 16:08:06 -05:00
parent a641f4d4bd
commit 5a8d9be121
8 changed files with 52 additions and 5 deletions

View File

@ -143,3 +143,28 @@ ion-card.cards-list-demo a > icon {
color: #444444; color: #444444;
} }
.adv-background {
position: relative;
text-align: center !important;
}
ion-card p.adv-background-title {
position: absolute;
top: 29%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff !important;
}
ion-card p.adv-background-subtitle {
font-size: 1.0em;
position: absolute;
top: 48%;
width: 100%;
color: #fff !important;
}

View File

@ -5,12 +5,34 @@
<ion-content class="has-header components-demo"> <ion-content class="has-header components-demo">
<ion-card> <ion-card class="adv-background">
<img src="img/card-amsterdam.png"/>
<p class="adv-background-title">Amsterdam</p>
<p class="adv-background-subtitle">64 Listings</p>
</ion-card>
<ion-card-content> <ion-card class="adv-background">
This is just your basic card with some text to boot. Like it? Keep scrolling... <img src="img/card-madison.png"/>
</ion-card-content> <p class="adv-background-title">Madison</p>
<p class="adv-background-subtitle">28 Listings</p>
</ion-card>
<ion-card class="adv-background">
<img src="img/card-portland.png"/>
<p class="adv-background-title">Portland</p>
<p class="adv-background-subtitle">31 Listings</p>
</ion-card>
<ion-card class="adv-background">
<img src="img/card-saopaolo.png"/>
<p class="adv-background-title">São Paulo</p>
<p class="adv-background-subtitle">41 Listings</p>
</ion-card>
<ion-card class="adv-background">
<img src="img/card-sf.png"/>
<p class="adv-background-title">San Francisco</p>
<p class="adv-background-subtitle">72 Listings</p>
</ion-card> </ion-card>

View File

@ -75,7 +75,7 @@ export function getPageFor(hash) {
'card-header': CardsHeaderPage, 'card-header': CardsHeaderPage,
'card-list': CardsListPage, 'card-list': CardsListPage,
'card-image': CardsImagePage, 'card-image': CardsImagePage,
'card-background-image': CardsBackgroundPage, 'card-background': CardsBackgroundPage,
'card-advanced-map': CardsAdvancedMapPage, 'card-advanced-map': CardsAdvancedMapPage,
'card-advanced-social': CardsAdvancedSocialPage, 'card-advanced-social': CardsAdvancedSocialPage,
'card-advanced-image': CardsAdvancedImagePage, 'card-advanced-image': CardsAdvancedImagePage,

Binary file not shown.

After

Width:  |  Height:  |  Size: 438 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 465 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 415 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 403 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 271 KiB