249 lines
7.4 KiB
HTML
249 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Card - Basic</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
|
|
|
<body>
|
|
<ion-app>
|
|
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Card - Basic</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content fullscreen="true">
|
|
<ion-card>
|
|
<ion-card-content>
|
|
This is just your basic card with some text to boot. Like it? Keep scrolling...
|
|
</ion-card-content>
|
|
</ion-card>
|
|
|
|
<ion-card>
|
|
<ion-card-header>
|
|
<ion-card-subtitle>
|
|
Subtitle
|
|
</ion-card-subtitle>
|
|
<ion-card-title>
|
|
Title
|
|
</ion-card-title>
|
|
</ion-card-header>
|
|
|
|
<ion-card-content>
|
|
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
|
</ion-card-content>
|
|
</ion-card>
|
|
|
|
<ion-card>
|
|
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
|
<img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg">
|
|
</div>
|
|
<ion-card-header translucent>
|
|
<ion-card-subtitle>
|
|
Subtitle
|
|
</ion-card-subtitle>
|
|
<ion-card-title>
|
|
Title
|
|
</ion-card-title>
|
|
</ion-card-header>
|
|
|
|
<ion-card-content style="min-height: 200px">
|
|
</ion-card-content>
|
|
</ion-card>
|
|
|
|
<ion-card style="color: white;">
|
|
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
|
<img style="transform: scale(2)" src="/src/components/card/test/img.jpg">
|
|
</div>
|
|
<ion-card-header translucent>
|
|
<ion-card-subtitle>
|
|
Subtitle
|
|
</ion-card-subtitle>
|
|
<ion-card-title>
|
|
Title
|
|
</ion-card-title>
|
|
</ion-card-header>
|
|
|
|
<ion-card-content style="padding-top: 100px">
|
|
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
|
</ion-card-content>
|
|
</ion-card>
|
|
|
|
<ion-card>
|
|
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
|
<img src="/src/components/card/test/img.jpg">
|
|
</div>
|
|
|
|
<ion-card-header>
|
|
<ion-card-subtitle>
|
|
Subtitle
|
|
</ion-card-subtitle>
|
|
<ion-card-title>
|
|
Title
|
|
</ion-card-title>
|
|
</ion-card-header>
|
|
|
|
<ion-card-content>
|
|
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
|
</ion-card-content>
|
|
</ion-card>
|
|
|
|
<ion-card>
|
|
<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-grid>
|
|
<ion-row>
|
|
<ion-col class="ion-no-padding">
|
|
<ion-button fill="clear" size="small">
|
|
<ion-icon slot="start" name="star"></ion-icon>
|
|
Star
|
|
</ion-button>
|
|
</ion-col>
|
|
<ion-col class="ion-no-padding ion-text-right">
|
|
<ion-button fill="clear" size="small" class="ion-activated">
|
|
<ion-icon slot="start" name="share"></ion-icon>
|
|
Activated
|
|
</ion-button>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
</ion-card>
|
|
|
|
<ion-card class="cards-list-demo">
|
|
<ion-card-header>
|
|
Explore Nearby
|
|
</ion-card-header>
|
|
|
|
<ion-list>
|
|
<ion-item>
|
|
<ion-icon name='cart' slot="start"></ion-icon>
|
|
Shopping
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name='medical' slot="start"></ion-icon>
|
|
Hospital
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name='cafe' slot="start"></ion-icon>
|
|
Cafe
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name='paw' slot="start"></ion-icon>
|
|
Dog Park
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name='beer' slot="start"></ion-icon>
|
|
Pub
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-icon name='planet' slot="start"></ion-icon>
|
|
Space
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
</ion-card>
|
|
|
|
<ion-card>
|
|
|
|
<ion-item>
|
|
<ion-avatar slot="start">
|
|
<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-grid>
|
|
<ion-row>
|
|
<ion-col class="ion-no-padding">
|
|
<ion-button fill="clear" size="small">
|
|
<ion-icon slot="start" name="star"></ion-icon>
|
|
Favorite
|
|
</ion-button>
|
|
</ion-col>
|
|
<ion-col class="ion-no-padding ion-text-center">
|
|
<ion-button fill="clear" size="small">
|
|
<ion-icon slot="start" name="musical-notes"></ion-icon>
|
|
Listen
|
|
</ion-button>
|
|
</ion-col>
|
|
<ion-col class="ion-no-padding ion-padding-end ion-text-right ion-align-self-center">
|
|
<ion-note>
|
|
11h ago
|
|
</ion-note>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</ion-card>
|
|
|
|
<ion-card class="ion-no-margin">
|
|
|
|
<div>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
|
|
<ion-card-content>
|
|
ion-card[no-margin] This card was breaking the border radius.
|
|
</ion-card-content>
|
|
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col class="ion-no-padding">
|
|
<ion-button fill="clear" size="small" color="dark">
|
|
<ion-icon slot="start" name="star"></ion-icon>
|
|
Favorite
|
|
</ion-button>
|
|
</ion-col>
|
|
|
|
<ion-col class="ion-no-padding ion-text-center">
|
|
<ion-button fill="clear" size="small" color="dark">
|
|
<ion-icon slot="start" name="musical-notes"></ion-icon>
|
|
Listen
|
|
</ion-button>
|
|
</ion-col>
|
|
<ion-col class="ion-no-padding ion-text-right">
|
|
<ion-button fill="clear" size="small" color="dark">
|
|
<ion-icon slot="start" name="share"></ion-icon>
|
|
Share
|
|
</ion-button>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
</ion-card>
|
|
</ion-content>
|
|
|
|
</ion-app>
|
|
</body>
|
|
|
|
</html>
|