-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathstyle-guide.html
263 lines (263 loc) · 19.9 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
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Mon Mar 10 2025 20:10:12 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="656504e52e383d09efa77704" data-wf-site="656504e52e383d09efa776a6">
<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">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/resonite-website-a2201f.webflow.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic:devanagari,latin,latin-ext"] }});</script>
<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">
</head>
<body>
<div class="section-padding">
<div class="container">
<div class="w-layout-grid style-guide-grid">
<div id="w-node-af6ac8e3-b1ce-cda6-23dc-a32b43a6a065-efa77704">
<h1 id="w-node-cef64361-1f9b-8732-7793-1d4785eeed97-efa77704">Style Guide</h1>
</div>
<div id="w-node-c4313243-b51c-03bb-11ad-c431ebe2a80b-efa77704" class="style-guide-category">
<div>Typography</div>
</div>
<div id="w-node-d0d2d682-3502-a29f-1a22-871f47028af2-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the font family and color used globally on all type elements edit, select the <span class="style-guide-element">Body</span> element and edit the <span class="style-guide-class tag-class">Body (All Pages)</span> class.</p>
</div>
<div id="w-node-eb00ca3d-f0c1-8354-e9aa-1faf574614be-efa77704" class="style-guide-wrap">
<h1>FONT<br>This is the global font used on the site</h1>
</div>
<div id="w-node-_85cb43b8-5298-9d0a-b169-853350d81ae0-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the global H1 class edit the <span class="style-guide-class tag-class">ALL H1 Heading</span> class.</p>
</div>
<div id="w-node-_5ce572de-a6ee-b264-99b3-588be3f1debe-efa77704" class="style-guide-wrap">
<h1 class="h1">H1<br>This the main heading of the page, use only once, in the hero section.</h1>
</div>
<div id="w-node-e573c9ae-1e4b-15b0-7098-638502628a9c-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the global H2 class edit the <span class="style-guide-class tag-class">ALL H2 Heading</span> class.</p>
</div>
<div id="w-node-_0c02166c-4ee3-9762-cc8d-f567a47991b2-efa77704" class="style-guide-wrap">
<h2 class="h2">H2<br>Use this as the heading for your different sections throughout the page.</h2>
</div>
<div id="w-node-_31bfd8e3-b79a-c6a8-c644-de3e1d6aef06-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the global H3 class edit the <span class="style-guide-class tag-class">ALL H3 Heading</span> class.</p>
</div>
<div id="w-node-_8101b2ee-d87b-6d50-ecc4-1cc6560df4db-efa77704" class="style-guide-wrap">
<h3 class="h3">H3<br>Use this for the titles for your different elements in your sections, like key benefits or services</h3>
</div>
<div id="w-node-aa9291ec-5ca1-3ae2-496b-ff742d602a68-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the global paragraph (P) class edit the <span class="style-guide-class tag-class">ALL paragraphs</span> class.</p>
</div>
<div id="w-node-_479385eb-f044-0d6d-9fb9-3510fe0092c5-efa77704" class="style-guide-wrap">
<p id="w-node-_36d6a540-3dac-ba1b-4887-4e460e7ddc86-efa77704">PARAGRAPHS <br>Use paragraphs any time that you have a text that more than just a few words, note that paragraphs need to be spaced between themselves clarify when one paragraph ends and another begins.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
</div>
<div id="w-node-_58a77a61-8d2a-f298-bcf8-5b5d6bda4258-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the Small Paragraph class edit the <span class="style-guide-class">Large-P</span> class.</p>
</div>
<div id="w-node-_84eebd00-708d-d564-7474-81a48d7f1aa8-efa77704" class="style-guide-wrap">
<p class="large-p">LARGE PARAGRAPH <br>Some times you need to have a big paragraph, for example below your hero section to give context to the heading.</p>
</div>
<div id="w-node-c0ceb277-bbf2-2cf4-4072-7fa273a7e783-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the Small Paragraph class edit the <span class="style-guide-class">Small-P</span> class.</p>
</div>
<div id="w-node-_293d8aee-201d-8e8e-7d11-7b9b1bf3932f-efa77704" class="style-guide-wrap">
<p class="small-p">SMALL PARAGRAPH <br>Some times you want to have smaller text, for example when you mention terms and conditions, you can use this class whenever you need a low hierarchy text.</p>
</div>
<div id="w-node-e02f6cf5-e81b-07a2-d153-c916403846e7-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the color of the light text class edit the <span class="style-guide-class">Light-Text</span> class.</p>
</div>
<div id="w-node-_90e05c14-0560-63b0-7156-ffcbe12cdec6-efa77704">
<div id="w-node-_90e05c14-0560-63b0-7156-ffcbe12cdec7-efa77704" class="style-guide-color-wrap">
<h4 class="light-text">LIGHT TEXT COLOR<br>Sometimes you'll need your text on a dark background, so you can apply this light text class to all your type elements</h4>
</div>
</div>
<div id="w-node-_40d4d6df-e38b-f778-5115-ea8f93d0542e-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the type elements nested inside a Rich Text element, select the text and edit the <span class="style-guide-class tag-class">ALL Heading</span> class nested inside <span class="style-guide-class">Rich-Text</span></p>
<p>Make sure you enable the "Nest selector" option.</p>
</div>
<div id="w-node-c9d7c3ab-d31b-4fe2-e290-666f73a76a6a-efa77704" class="style-guide-wrap">
<div class="rich-text w-richtext">
<h2>RICH TEXT</h2>
<p>You'll be using Rich Text elements on dynamic content like blog posts. If you need to have headings and text styles different than the rest of your website, you can edit them here.</p>
<h1>H1 Heading inside a Rich Text</h1>
<h3>H2 Heading inside a Rich Text</h3>
<h3>H3 Heading inside a Rich Text</h3>
<p>This is a paragraph element inside a Rich Text</p>
</div>
</div>
<div id="w-node-_1cb2eaff-c085-9ab3-df4a-1725ee4f484b-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To make changes to the bullets size and left padding edit the <span class="style-guide-class">List</span> class. </p>
</div>
<div id="w-node-_1229091c-99d0-b728-5727-37785a9996e2-efa77704" class="style-guide-wrap">
<h2>LIST</h2>
<ul role="list" class="list">
<li class="list-item">
<div class="list-text">When ever you have a list of points to make</div>
</li>
<li>
<div>It's best to use a list element</div>
</li>
<li>
<div>The SEO for your site will benefit</div>
</li>
</ul>
</div>
<div id="w-node-f637bbff-835b-0236-4124-4ac1eef82ac3-efa77704" class="style-guide-category">
<div>Color</div>
</div>
<div id="w-node-_826fbc41-7f9a-f875-b76e-3e9c3ff2002b-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>Select the Background color you'd like to edit and click <strong>EDIT SWATCH </strong>(pencil Icon)</p>
</div>
<div id="w-node-ed82fd76-b394-3b31-d285-0d24c40a28ca-efa77704">
<div id="w-node-_11717b33-079b-321a-8523-e173de28bfe2-efa77704" class="style-guide-color-wrap">
<h4 class="light-text">Dark Color</h4>
</div>
<div class="style-guide-color-wrap primary-color-background">
<h4 class="light-text">Primary Brand Color</h4>
</div>
<div class="style-guide-color-wrap secondary-color-background">
<h4>Secondary Brand Color</h4>
</div>
<div class="style-guide-color-wrap mid-grey-color-background">
<h4 class="light-text">Mid Grey Color</h4>
</div>
<div class="style-guide-color-wrap light-grey-color-background">
<h4>Mid Grey Color</h4>
</div>
<div class="style-guide-color-wrap light-color-background">
<h4>Light Color</h4>
</div>
</div>
<div id="w-node-e383549d-c8b3-87cd-ee42-73f99aa01117-efa77704" class="style-guide-category">
<div>Buttons</div>
</div>
<div id="w-node-_55db6e40-b97b-9254-09df-2929df1b67ad-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the size and padding of all buttons edit the <span class="style-guide-class">Button</span> class.</p>
<p>Specific changes to Ghost button, like background color & border should be made on the <span class="style-guide-class">Ghost-Button</span> class.</p>
<p>To edit the native text links, edit <span class="style-guide-class tag-class">ALL Links</span> class</p>
<p>Changes to the colors of inverse buttons can be done by editing the <span class="style-guide-class">Inverse</span> combo classes</p>
</div>
<div id="w-node-_8a96fce1-c74f-35f2-c6f4-3587e7d0e79a-efa77704" class="style-guide-grid-item-wrap">
<div id="w-node-bfdc7d70-2863-8331-b4f9-ad395f381310-efa77704" class="style-guide-color-wrap white-background">
<a href="#" class="button w-button">Main Button</a>
</div>
<div id="w-node-_8219438d-b20e-01aa-f124-d537d0821573-efa77704" class="style-guide-color-wrap">
<a href="#" class="button inverse-button w-button">Main Button</a>
</div>
<div id="w-node-df52a5df-cf6e-cd43-ccd8-20633efad3fb-efa77704" class="style-guide-color-wrap white-background">
<a href="#" class="button ghost-button w-button">Main Button</a>
</div>
<div id="w-node-cd8a551e-24bb-f985-80c2-ed654c7036ec-efa77704" class="style-guide-color-wrap">
<a href="#" class="button ghost-button invese-ghost w-button">Main Button</a>
</div>
<div id="w-node-c73ec5c5-9d1c-c71a-647d-93fd71def3a3-efa77704" class="style-guide-color-wrap white-background">
<a href="#">Text Link</a>
</div>
<div id="w-node-b28db8fa-48cc-0fc7-f454-c90e65fa4e38-efa77704" class="style-guide-color-wrap">
<a href="#" class="light-text">Text Link</a>
</div>
</div>
<div id="w-node-_18765f94-c4e6-c755-ac1d-a3de06ce4dbc-efa77704" class="style-guide-category">
<div>FORMS</div>
</div>
<div id="w-node-_91cfe370-0245-0733-cc80-e0128461d2a5-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the different elements by selecting the classed starting with <span class="style-guide-class">Form</span> </p>
</div>
<div id="w-node-_983a314a-baad-360b-c27c-560bd790abd0-efa77704" class="style-guide-grid-item-wrap">
<div id="w-node-dec986e8-2989-ac3d-9697-51959cdb817b-efa77704" class="w-form">
<form id="email-form" name="email-form" data-name="Email Form" method="get" data-wf-page-id="656504e52e383d09efa77704" data-wf-element-id="dec986e8-2989-ac3d-9697-51959cdb817c"><label for="name" class="form-lable">Text Input</label><input class="form-field w-input" maxlength="256" name="name" data-name="Name" placeholder="Example Text" type="text" id="name"><label for="field-2" class="form-lable">Text Area</label><textarea placeholder="Example Text" maxlength="5000" id="field-2" name="field-2" data-name="field" class="form-field form-text-area w-input"></textarea><label for="field" class="form-lable">Email Address</label><select id="field" name="field" data-name="Field" class="form-field form-select w-select">
<option value="">Select one...</option>
<option value="First">First choice</option>
<option value="Second">Second choice</option>
<option value="Third">Third choice</option>
</select><label for="email-2" class="form-lable">Email Address</label><label class="w-checkbox"><input type="checkbox" id="checkbox" name="checkbox" data-name="Checkbox" class="w-checkbox-input form-checkbox"><span class="w-form-label" for="checkbox">Checkbox</span></label><label for="email-2" class="form-lable">Email Address</label><label class="w-radio"><input type="radio" data-name="Radio" id="radio" name="radio" class="w-form-formradioinput form-radio w-radio-input" value="Radio"><span class="w-form-label" for="radio">Radio</span></label><input type="submit" data-wait="Please wait..." class="button form-submit w-button" value="Submit"></form>
<div class="w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
<div id="w-node-_539debc5-c3bf-e500-5373-a3259d80206f-efa77704" class="style-guide-category">
<div>Layout Elements</div>
</div>
<div id="w-node-aecd07ed-cd8b-1716-e906-11a45aa52757-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the left-right padding on all sections, select the top section on this page and edit the <span class="style-guide-class">Section-Padding</span> class</p>
</div>
<div id="w-node-_432c5549-5a58-4527-4926-71dbf8e6a1d1-efa77704" class="style-guide-layout-demo section-padding">
<div id="w-node-_165d79eb-b2a5-28c4-eb36-16dde57c961e-efa77704" class="style-guide-white-div">
<p>SECTION PADDING</p>
<p>Each one of your sections should include the <span class="style-guide-class">Section-Padding</span> class, to make sure there's consistent padding and your elements are not touching the edges of the screen.</p>
</div>
</div>
<div id="w-node-c962fc9a-3fcf-08e3-bdf2-4ecd4a9701dd-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the Max-Width of the container element, select the top container on this page, and edit the <span class="style-guide-class">Container</span> class</p>
</div>
<div id="w-node-_448e0e5a-f5bb-b07f-46a7-e322d88554aa-efa77704" class="style-guide-layout-demo section-padding">
<div id="w-node-_448e0e5a-f5bb-b07f-46a7-e322d88554ab-efa77704" class="style-guide-white-div">
<p>CONTAINER</p>
<p>Each section on the page should have a <span class="style-guide-class">Container</span> within keeping the main content centered within a maximum width to improve readability and consistency. </p>
</div>
</div>
<div id="w-node-bca97c44-ed2a-c4d2-234a-6c62ee4dc6b5-efa77704" class="style-guide-category">
<div>Popups</div>
</div>
<div id="w-node-_65cb131a-038a-ef25-ea34-fb9ed9c178b0-efa77704" class="style-guide-edit-wrap">
<div class="style-guide-edit">Edit</div>
<p>To edit the content of the popup, click the symbol and edit the texts / links from the <strong>Override</strong> panel</p>
<p>To edit the design of the popup, double-click the symbol to edit styling / elements</p>
<p>To use the popup on other pages, copy the <span class="style-guide-element">Popup-Background-Wrap</span> element from this page (including the symbol inside).</p>
<p>To edit the open animation, select the button below and edit the <strong>Open-Popup</strong><strong></strong> on the interactions panel.</p>
<a data-w-id="9d63daec-eb28-ba0b-87c9-d50f72ec9dbf" href="#" class="button w-button">Open Popup</a>
</div>
<div id="w-node-_50c4eecd-635c-c0cb-6b83-c35774246b79-efa77704" class="style-guide-wrap">
<div class="style-guide-popup-wrap">
<div class="popup-card">
<h2>This is your popup heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
<a href="#" class="button w-button">Button Text</a>
<a data-w-id="37fd837f-3fc7-03a8-0eeb-991de929d10d" href="#" class="close-popup-button">✖️</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="opacity:0" class="popup-background-wrap">
<div style="opacity:0;-webkit-transform:translate3d(0, 121px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 121px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 121px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 121px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="popup-wrap">
<div class="popup-card">
<h2>This is your popup heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
<a href="#" class="button w-button">Button Text</a>
<a data-w-id="37fd837f-3fc7-03a8-0eeb-991de929d10d" href="#" class="close-popup-button">✖️</a>
</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=656504e52e383d09efa776a6" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
</body>
</html>