-
Notifications
You must be signed in to change notification settings - Fork 0
/
style-guide.html
242 lines (241 loc) · 10.7 KB
/
style-guide.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html><!-- Last Published: Tue Jul 02 2024 14:06:22 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="63e46f9faa110eac8ed508c7" data-wf-site="6090f2cbfb550680d4288567">
<head>
<meta charset="utf-8">
<title>Style Guide</title>
<meta content="Style Guide" property="og:title">
<meta content="Style Guide" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/components.css" rel="stylesheet" type="text/css">
<link href="css/orbit-team.css" rel="stylesheet" type="text/css">
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-126281265-1"></script>
<script type="text/javascript">window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-126281265-1', {'anonymize_ip': false});</script>
<script async="" src="https://www.googletagmanager.com/gtag/js?id=AW-10840644366"></script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P5HTN2K');</script>
<!-- End Google Tag Manager -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-10840644366');
</script>
<script>
gtag('event', 'conversion', {'send_to': 'AW-10840644366/lWpuCKy55KkDEI62nLEo'});
</script>
<style>
*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.overlay{mix-blend-mode: screen;}
.cookie-notice{display:none !important;}
.clamp {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
</style>
<link rel="preconnect" href="https://assets-global.website-files.com">
<!-- Start cookieyes banner -->
<script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/2898afb20ead5b53957e5bd2/script.js"></script> <!-- End cookieyes banner -->
</head>
<body>
<div class="section">
<div class="container">
<div>Tipography</div>
<div class="grid style-guide margin-top-24">
<h1 class="heading-xl">Heading XL</h1>
<div class="divider"></div>
<h1>Heading 1</h1>
<div class="divider"></div>
<h2>Heading 2</h2>
<div class="divider"></div>
<h3>Heading 3<br></h3>
<div class="divider"></div>
<h4>Heading 4</h4>
<div class="divider"></div>
<h5>Heading 5</h5>
<div class="divider"></div>
<h6>Heading 6</h6>
<div class="divider"></div>
<div class="text-xs">Text XS</div>
<div class="divider"></div>
<div class="text-small">Text Small</div>
<div class="divider"></div>
<div class="text-small-primary-color">Text Small with Primary Color</div>
<div class="divider"></div>
<div class="text-primary-color">Text Default with Primary Color</div>
<div class="divider"></div>
<div class="text-large">Text Large</div>
<div class="divider"></div>
<div class="text-large color-gradient-1">Text Large with Gradient 1</div>
<div class="divider"></div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div>Spacing</div>
<div class="grid style-guide margin-top-24">
<div class="padding-0">Padding 0</div>
<div class="divider"></div>
<div class="padding-top-0">Padding Top 0</div>
<div class="divider"></div>
<div class="padding-80">Padding 80</div>
<div class="divider"></div>
<div class="padding-top-160">Padding Top 160</div>
<div class="divider"></div>
<div class="padding-bottom-0">Padding Bottom 0</div>
<div class="divider"></div>
<div class="padding-bottom-160">Padding Bottom 160</div>
<div class="divider"></div>
<div class="margin-0">Margin 0</div>
<div class="divider"></div>
<div class="margin-top-8">Margin Top 8</div>
<div class="divider"></div>
<div class="margin-top-16">Margin Top 16</div>
<div class="divider"></div>
<div class="margin-top-24">Margin Top 24</div>
<div class="divider"></div>
<div class="margin-top-32">Margin Top 32</div>
<div class="divider"></div>
<div class="margin-top-40">Margin Top 40</div>
<div class="divider"></div>
<div class="margin-top-48">Margin Top 48</div>
<div class="divider"></div>
<div class="margin-top-56">Margin Top 56</div>
<div class="divider"></div>
<div class="margin-top-64">Margin Top 64</div>
<div class="divider"></div>
<div class="margin-top-72">Margin Top 72</div>
<div class="divider"></div>
<div class="margin-top-80">Margin Top 80</div>
<div class="divider"></div>
<div class="margin-top-160">Margin Top 160</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div>Colors</div>
<div class="grid-thirds style-guide margin-top-24">
<div>
<div class="color-primary-1 style-guide-200"></div>
<div class="margin-top-16">Primary 1</div>
</div>
<div>
<div class="color-primary-2 style-guide-200"></div>
<div class="margin-top-16">Primary 2</div>
</div>
<div>
<div class="color-body-text style-guide-200"></div>
<div class="margin-top-16">Body Text</div>
</div>
<div>
<div class="color-gradient-1 style-guide-200"></div>
<div class="margin-top-16">Gradient 1</div>
</div>
<div>
<div class="color-gradient-2 style-guide-200"></div>
<div class="margin-top-16">Gradient 2</div>
</div>
<div>
<div class="color-loading-bar style-guide-200"></div>
<div class="margin-top-16">Loading Bar</div>
</div>
<div>
<div class="color-secondary-1 style-guide-200"></div>
<div class="margin-top-16">Secondary 1</div>
</div>
<div>
<div class="color-secondary-2 style-guide-200"></div>
<div class="margin-top-16">Secondary 2</div>
</div>
<div>
<div class="color-secondary-3 style-guide-200"></div>
<div class="margin-top-16">Secondary 3</div>
</div>
<div>
<div class="color-bg-1 style-guide-200"></div>
<div class="margin-top-16">BG 1</div>
</div>
<div>
<div class="color-bg-2 style-guide-200"></div>
<div class="margin-top-16">BG 2</div>
</div>
<div>
<div class="color-bg-3 style-guide-200"></div>
<div class="margin-top-16">BG 3</div>
</div>
<div>
<div class="color-white style-guide-200"></div>
<div class="margin-top-16">White</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="grid-thirds style-guide left">
<a href="#" class="button-outline w-inline-block">
<div>Get Started</div>
<div class="icon-arrow margin-left-8 w-embed"><svg width="15" height="12" viewbox="0 0 15 12" fill="CurrentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8.49749 0.299805L14.1975 5.9998L8.49749 11.6998H5.76149L10.4735 6.98781H0.80249V5.01181H10.4735L5.76149 0.299805H8.49749Z" fill="CurrentColor"></path>
</svg></div>
</a>
<a href="#" class="button w-inline-block">
<div>Learn More</div>
<div class="icon-arrow margin-left-8 w-embed"><svg width="15" height="12" viewbox="0 0 15 12" fill="CurrentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8.49749 0.299805L14.1975 5.9998L8.49749 11.6998H5.76149L10.4735 6.98781H0.80249V5.01181H10.4735L5.76149 0.299805H8.49749Z" fill="CurrentColor"></path>
</svg></div>
</a>
<div class="button-gradient-mask">
<a href="#" class="button-outline-gradient w-inline-block">
<div class="color-gradient-1">View Features</div><img src="images/Button---Arrow.svg" loading="lazy" alt="Gradient arrow icon" class="margin-left-8">
</a>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="blog-rich-text w-richtext">
<h2>What’s a Rich Text element?</h2>
<p>The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.</p>
<ul role="list">
<li>asdsadasda</li>
<li>asdadasda</li>
<li></li>
</ul>
<h4>Static and dynamic content editing</h4>
<p>A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!</p>
<h4>How to customize formatting for each rich text</h4>
<p>Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.</p>
</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6090f2cbfb550680d4288567" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/orbit-team.js" type="text/javascript"></script>
<script>
// Sent body to overflow hidden on first click of hamburger icon
$('.nav-lottie').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("body").css("overflow", "auto");
} else {
$("body").css("overflow", "hidden");
}
$(this).data("clicks", !clicks);
});
// Click on the hamburger icon whenever you click on the greyed out part
$( ".c-nav_background" ).click(function() {
$( ".nav-lottie" ).click();
});
</script>
</body>
</html>