-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcomponents.html
102 lines (87 loc) · 2.85 KB
/
components.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css" >
<script src="js/fetchComponents.js"></script>
<script>
components = ['usp-card', 'usp-grid'];
fetchComponents(components);
</script>
<body>
<h1>Heading one with subtext:<h1>
<hr />
<h1>Start taking recurring payments in less than 8 minutes </h1>
<p>
Subscribie provides everything you need to bring your business model into
the 21st century with no pain at all.
</p>
<hr />
<h1><usp-card></h1>
<h2>We call these a "usp-card" (unique selling point)</h2>
<p>They comprise of an image, heading, and muted text.</p>
<hr />
<primary-button></primary-button>
<p>Default Card:</p>
<usp-card></usp-card>
<p>Card with custom image, title, and text:</p>
<usp-card>
<span slot="title">Detailed payment history</span>
<span slot="image">
<img alt="File:credit card.svg"
src="images/credit-card.svg" />
</span>
<span slot="body">
Your accountant will say thank you due to well-organised reports
</span>
</usp-card>
<p>Card with additional 'soon' callout:</p>
<usp-card>
<span slot="title">Easy custom domains</span>
<i class="callout" slot="callout">soon</i>
<span slot="image">
<img alt="File:credit card.svg"
src="images/credit-card.svg" />
</span>
<span slot="body">
Connect the domain name of your choice with a few clicks
</span>
</usp-card>
<h1>We may arrange multiple <em><usp-card></em> in a grid:</h1>
<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
<usp-card></usp-card>
<usp-card>
<span slot="title">Detailed payment history</span>
<span slot="image">
<img alt="File:credit card.svg"
src="images/credit-card.svg" />
</span>
<span slot="body">
Your accountant will say thank you due to well-organised reports
</span>
</usp-card>
<usp-card>
<span slot="title">Easy custom domains</span>
<i class="callout" slot="callout">soon</i>
<span slot="image">
<img alt="File:credit card.svg"
src="images/credit-card.svg" />
</span>
<span slot="body">
Connect the domain name of your choice with a few clicks
</span>
</usp-card>
<usp-card></usp-card>
<usp-card></usp-card>
<template id="usp-grid">
<style>
#wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
</style>
<div id="wrapper">
<slot></slot>
</div>
</template>
</div>
</body>
</html>