-
Notifications
You must be signed in to change notification settings - Fork 1
/
style.html
996 lines (895 loc) · 36.5 KB
/
style.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
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<title>EZShield Style Guide</title>
<link href="code.css" rel="stylesheet" type="text/css" />
<link href="frame.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
<script type="text/javascript" src="//use.typekit.net/dfr8gzl.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
// After window has scrolled 80px, it locks the nav in place so it's always visible.
if ($(window).scrollTop() >= 80){
$('nav').css({'position' : 'fixed', 'top' : '66px', 'margin-top' : '0'});
}
// After scrolling back up to the top of the page, it returns the nav to its original position.
if ($(window).scrollTop() < 80){
$('nav').css({'position' : 'absolute', 'top' : 'inherit', 'margin-top' : '66px'});
}
});
});
</script>
<style type='text/css'> #turnkey-credit { font-family: Tahoma,Sans,Arial,Helvetica,Verdana,sans-serif; font-size: 11px; text-align: center; } #turnkey-credit a { text-decoration: none; } #turnkey-credit a:hover { text-decoration: underline; } body.wp-admin #turnkey-credit, body#image #turnkey-credit, body#media-upload #turnkey-credit { display: none; } </style></head>
<body>
<header>
<h2>EZShield Style Guide</h2>
<!-- <ul class="picker">Choose Another Site ⌄
<li><a href="corp.html">EZShield Corporate Site</a></li>
<li><a href="fic.html">Fighting Identity Crimes</a></li>
</ul> -->
</header>
<nav>
<ul>
<li><a href="#colors">Colors</a>
<ul>
<li><a href="#color-swatches">Color Swatches</a></li>
<li><a href="#color-headline">Headline Colors</a></li>
<li><a href="#color-body">Text Colors</a></li>
<li><a href="#color-user">User Messaging Colors</a></li>
<li><a href="#color-states">State Colors</a></li>
<li><a href="#color-interface">Interface Colors</a></li>
</ul>
</li>
<li><a href="#typography">Typography</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#icons">Icons</a></li>
<li><a href="#logos">Logos</a></li>
</ul>
</nav>
<section>
<!-- Colors ---------------------------------------------------->
<article id="colors">
<h1 id="color-swatches">Colors</h1>
<!-- Swatches -->
<div class="group">
<div class="intro">
<h2>Swatches</h2>
<p>These color swatches give us an overview of our collection of colors. Please reference the sections below for more detailed information and use cases.</p>
</div>
<div class="example">
<!-- State Colors -->
<div class="example-row">
<h3>State Colors</h3>
<div class="swatch square bg-green">Green / Positive <span>#46a34f</span></div>
<div class="swatch square bg-gold">Gold / Requires Attention <span>#ef9a21</span></div>
<div class="swatch square bg-red">Red / Negative <span>#d94332</span></div>
<div class="cb"></div>
</div>
<!-- Interface Colors -->
<div class="example-row">
<h3>Interface Background Colors</h3>
<div class="swatch square bg-white invert">White / Content Background (Widgets) <span>#fff</span></div>
<div class="swatch square bg-white-alt invert">White Alt / Main Background and Alternating Table Rows <span>#f8f8f8</span></div>
<div class="swatch square bg-gray-border invert">Border / Divider Color <span>#e7e8eb</span></div>
<div class="swatch square bg-blue">Blue / Main Marketing Site Color <span>#285984</span></div>
<div class="swatch square bg-dark">Dark Gray / Sidebar Background <span>#2f343e</span></div>
<div class="cb"></div>
</div>
<!-- User Messaging Colors -->
<div class="example-row">
<h3>Text Colors</h3>
<div class="swatch square bg-gray-headline">Heading Text <span>#333</span></div>
<div class="swatch square bg-gray">Paragraph Text <span>#555</span></div>
<div class="swatch square bg-light">Secondary Text <span>#999</span></div>
<div class="swatch square bg-gray-alt">Dark Background Text <span>#7b818a</span></div>
<div class="swatch square bg-link-blue">Links <span>#4184B1</span></div>
<div class="swatch square bg-gold">Required Information Text <span>#ef9a21</span></div>
<div id="color-headline" class="cb"></div>
</div>
</div>
</div>
<!-- Headline Colors -->
<div class="group">
<div class="intro">
<h2>Headline Colors</h2>
<!-- <p>Used for any text headline.</p> -->
</div>
<div class="example">
<!-- Main Headline -->
<div class="example-row">
<div class="desc">
<h3>Headlines</h3>
<p>We use should use this color for most headlines.</p>
<span>Hex: #333</span><span>Sass: $gray-headline</span>
</div>
<div class="visual">
<h1 class="gray-headline">Main Headline</h1>
<h2 class="gray-headline">Secondary Headline</h2>
<h3 class="gray-headline">Tertiary Headline</h3>
<h4 class="gray-headline">H4 Headline</h4>
</div>
<div id="color-body" class="cb"></div>
</div>
</div>
</div>
<!-- Body Colors -->
<div class="group">
<div class="intro">
<h2>Text Colors</h2>
<!-- <p>These are our body text colors.</p> -->
</div>
<div class="example">
<!-- Gray -->
<div class="example-row">
<div class="desc">
<h3>Paragraph Text</h3>
<p>This is our body copy and paragraph text color. Should be used for large bodies of text.</p>
<span>Hex: #555</span><span>Sass: $gray</span>
</div>
<div class="visual">
<p class="gray">A bad credit score can prevent you from advancing in life. You must postpone major purchases, endure high interest rates and be handicapped from making investments in your future — such as going back to school or starting your own business.</p>
</div>
<div class="cb"></div>
</div>
<!-- Light Gray -->
<div class="example-row">
<div class="desc">
<h3>Secondary Text</h3>
<p>We use this color for inactive copy and secondary descriptive text.</p>
<span>Hex: #999</span><span>Sass: $gray-light</span>
</div>
<div class="visual">
<p class="gray-light">This is some inactive or secondary text that's less important than the main body copy.</p>
</div>
<div class="cb"></div>
</div>
<!-- Gray Alt -->
<div class="example-row">
<div class="desc">
<h3>Dark Background Text</h3>
<p>This is our text color for our navigation where it is displayed on a dark background.</p>
<span>Hex: #7b818a</span><span>Sass: $gray-alt</span>
</div>
<div class="visual visual-dark-bg">
<p class="gray-alt">Secure</p><br>
<p class="gray-alt">Monitor</p><br>
<p class="gray-alt">Restore</p>
</div>
<div class="cb"></div>
</div>
<!-- Link Blue -->
<div class="example-row">
<div class="desc">
<h3>Text Links</h3>
<p>This color is used for text links.</p>
<span>Hex: #4184B1</span><span>Sass: $link-blue</span>
</div>
<div class="visual">
<p>This is some example paragraph text and <a href="">this is a link</a>.</p>
</div>
<div id="color-user" class="cb"></div>
</div>
</div>
</div>
<!-- User Messaging Colors -->
<div class="group">
<div class="intro">
<h2>User Messaging Colors</h2>
<!-- <p>These are our user messaging colors. These are for text elements where we are notifying the user of something.</p> -->
</div>
<div class="example">
<!-- Gold -->
<div class="example-row">
<div class="desc">
<h3>Required Information</h3>
<p>We use this color to highlight to the user important or required information such as required form fields and page errors.</p>
<span>Hex: #ef9a21</span><span>Sass: $gold</span>
</div>
<div class="visual">
<input name="" type="text" placeholder="required" maxlength="30" class="field watermark" number="1" autocomplete="off">
<br><br>
<input name="" type="text" maxlength="30" class="field error watermark" number="1" autocomplete="off">
<span class="error gold">You must enter a valid phone number.</span>
<div class="message">This is a user message. It can point out an error, or provide more details.</div>
</div>
<div id="color-states" class="cb"></div>
</div>
</div>
</div>
<!-- State Colors -->
<div class="group">
<div class="intro">
<h2>State Colors</h2>
<!-- <p>These are our state colors. We use these colors to indicate something is in a particular state such as positive news, alerts, etc. Can be used as a text color or background color.</p> -->
</div>
<div class="example">
<!-- Green -->
<div class="example-row">
<div class="desc">
<h3>Green / Positive</h3>
<p>This is our primary color. Used for good news such as having zero alerts, a good credit score, and positive buttons like purchase, open, view, etc.</p>
<span>Hex: #46a34f</span><span>Sass: $green</span>
</div>
<div class="visual">
<h1 class="green">0</h1>
<button class="btn btn-green"><span>Button</span></button>
<div class="cb"></div>
<div class="swatch bg-green"></div>
</div>
<div class="cb"></div>
</div>
<!-- Gold -->
<div class="example-row">
<div class="desc">
<h3>Gold / Requires Attention</h3>
<p>This is our color for alerts. If the user has an alert and we're messaging them about it in any way, use this color.</p>
<span>Hex: #ef9a21</span><span>Sass: $gold</span>
</div>
<div class="visual">
<h1 class="gold">14</h1>
<button class="btn btn-gold"><span>Button</span></button>
<div class="cb"></div>
<div class="swatch bg-gold"></div>
</div>
<div class="cb"></div>
</div>
<!-- Red -->
<div class="example-row">
<div class="desc">
<h3>Red / Negative</h3>
<p>This is our color for threats and open cases. If the user has a threat or an open case, we should message them with this color. Should also be used for negative actions like report a threat, delete, etc.</p>
<span>Hex: #d94332</span><span>Sass: $red</span>
</div>
<div class="visual">
<h1 class="red">2</h1>
<button class="btn btn-red"><span>Button</span></button>
<div class="cb"></div>
<div class="swatch bg-red"></div>
</div>
<div id="color-interface" class="cb"></div>
</div>
</div>
</div>
<!-- Interface Colors -->
<div class="group">
<div class="intro">
<h2>Interface Colors</h2>
<!-- <p>These are our primary colors. We use Sass to abstract our color values into variables for better consistency and maintenance. Unless absolutely necessary, we should avoid introducing new colors into the CSS.</p> -->
</div>
<div class="example">
<!-- Dark Gray -->
<div class="example-row">
<div class="desc">
<h3>Dark Gray / Sidebar Background</h3>
<p>This background color is used for our dashboard navigation sidebar.</p>
<span>Hex: #2f343e</span><span>Sass: $gray-dark</span>
</div>
<div class="visual">
<div class="swatch bg-dark"></div>
</div>
<div class="cb"></div>
</div>
<!-- White -->
<div class="example-row">
<div class="desc">
<h3>White / Content Background (Widgets)</h3>
<p>This background color is used in our widgets and other sections where we are displaying content.</p>
<span>Hex: #fff</span><span>Sass: $white</span>
</div>
<div class="visual">
<div class="swatch bg-white"></div>
</div>
<div class="cb"></div>
</div>
<!-- White Alt -->
<div class="example-row">
<div class="desc">
<h3>Main Background and Alternating Table Rows</h3>
<p>This background color is used in contrast to our white background. Can be used as the background for a main container or as an alternative row color in a table.</p>
<span>Hex: #f8f8f8</span><span>Sass: $white-alt</span>
</div>
<div class="visual">
<div class="swatch bg-white-alt"></div>
</div>
<div class="cb"></div>
</div>
<!-- Border Color -->
<div class="example-row">
<div class="desc">
<h3>Border / Divider Color</h3>
<p>We use this color for our widget borders and divider lines.</p>
<span>Hex: #e7e8eb</span><span>Sass: $gray-border</span>
</div>
<div class="visual">
<div class="swatch bg-gray-border"></div>
</div>
<div class="cb"></div>
</div>
<!-- Blue -->
<div class="example-row">
<div class="desc">
<h3>Blue / Main Marketing Site Color</h3>
<p>This background color is for containing site elements such as headers and footers.</p>
<span>Hex: #285984</span><span>Sass: $blue</span>
</div>
<div class="visual">
<div class="swatch bg-blue"></div>
</div>
<div class="cb"></div>
</div>
</div>
</div>
</article>
<!-- END ---------------------------------------------------->
<!-- Typography ---------------------------------------------------->
<article id="typography">
<h1>Typography</h1>
<div class="group">
<div class="intro">
<h2>Marketing and Dashboard Typography</h2>
</div>
<div class="example">
<div class="example-row">
<p>We use <strong><a href="https://typekit.com/fonts/aktiv-grotesk-std" target="_blank">Aktiv Grotesk Std</a></strong> for all of our text, on every site. If unavailable for some reason, you may use Helvetica as a substitute.</p>
<br>
<p><strong>font-family: 'aktiv-grotesk-std', helvetica, arial, sans-serif;</strong></p>
</div>
<!-- H1 -->
<div class="example-row">
<div class="desc">
<h3>H1 Header</h3>
<p>This is the styling for our main headers.</p>
<pre><code>
h1 {
font-weight: 300;
font-size: 36px;
line-height: 48px;
color: #333;
}</code></pre>
</div>
<div class="visual">
<h1>h1: Main Heading</h1>
</div>
<div class="cb"></div>
</div>
<!-- H2 -->
<div class="example-row">
<div class="desc">
<h3>H2 Header</h3>
<p>This is the styling for our secondary headers.</p>
<pre><code>
h2 {
font-weight: 300;
font-size: 30px;
line-height: 34px;
color: #333;
}</code></pre>
</div>
<div class="visual">
<h2>h2: Secondary Heading</h2>
</div>
<div class="cb"></div>
</div>
<!-- H3 -->
<div class="example-row">
<div class="desc">
<h3>H3 Header</h3>
<p>This is the styling for our tertiary headings and form field labels.</p>
<pre><code>
h3 {
font-weight: 300;
font-size: 24px;
line-height: 30px;
color: #333;
}</code></pre>
</div>
<div class="visual">
<h3>h3: Tertiary Heading/Labels</h3>
</div>
<div class="cb"></div>
</div>
<!-- H4 -->
<div class="example-row">
<div class="desc">
<h3>H4 Header</h3>
<p>This is the styling for callout headlines.</p>
<pre><code>
h4 {
font-weight: 300;
font-size: 18px;
line-height: 24px;
color: #333;
}</code></pre>
</div>
<div class="visual">
<h4>h4: Callout Heading</h4>
</div>
<div class="cb"></div>
</div>
<!-- Paragraph -->
<div class="example-row">
<div class="desc">
<h3>Paragraph Body Copy</h3>
<p>This is the styling for body copy. We use a lighter font weight.</p>
<pre><code>
p {
font-weight: 300;
font-size: 16px;
line-height: 24px;
color: #555;
}</code></pre>
</div>
<div class="visual">
<p>Paragraph Body Copy: The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="cb"></div>
</div>
<!-- Blog Post Copy -->
<div class="example-row">
<div class="desc">
<h3>Blog Post Copy</h3>
<p class="blog">This is the styling for the body of a blog post. Longer bodies of text read better with a normal font weight.</p>
<pre><code>
p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #555;
}</code></pre>
</div>
<div class="visual">
<p class="blog">Paragraph Body Copy: The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="cb"></div>
</div>
<!-- Detail Copy -->
<div class="example-row">
<div class="desc">
<h3>Detail Copy</h3>
<p>This is the styling for smaller details copy.</p>
<pre><code>
span.details {
font-weight: 300;
font-size: 12px;
line-height: 18px;
color: #555;
}</code></pre>
</div>
<div class="visual">
<span class="details">Detail copy: The quick brown fox jumps over the lazy dog.</span>
</div>
<div class="cb"></div>
</div>
<div class="cb"></div>
</div>
</div>
</article>
<!-- END ---------------------------------------------------->
<!-- Buttons ---------------------------------------------------->
<article id="buttons">
<h1>Buttons</h1>
<div class="group">
<div class="intro">
<h2>Button Styling</h2>
<p>These are our button styles. You can choose between two versions that come in three sizes and several background colors. Border radius (rounded corners), height, text color, font size and weight, padding, etc., should not be changed. Width can change as needed by content. Button should not contain anything other than text. Text should never wrap to two or more lines.</p>
</div>
<div class="example">
<!-- Default Button -->
<div class="example-row">
<div class="desc">
<h3>Default Button</h3>
<p>These are our default buttons. This is the base for all of our buttons.</p>
</div>
<div class="visual">
<button class="btn"><span>Get Started</span></button>
<button class="btn btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-large"><span>Get Started</span></button>
<button class="btn btn-large btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-small"><span>Get Started</span></button>
<button class="btn btn-small btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
</div>
<div class="cb"></div>
</div>
<!-- Green Buttons -->
<div class="example-row">
<div class="desc">
<h3>Green Buttons</h3>
<p>These are our green buttons.</p>
</div>
<div class="visual">
<button class="btn btn-green"><span>Get Started</span></button>
<button class="btn btn-green btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-green btn-large"><span>Get Started</span></button>
<button class="btn btn-green btn-large btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-green btn-small"><span>Get Started</span></button>
<button class="btn btn-green btn-small btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
</div>
<div class="cb"></div>
</div>
<!-- Gold Buttons -->
<div class="example-row">
<div class="desc">
<h3>Gold Buttons</h3>
<p>These are our gold buttons. We use these for actions related to alerts.</p>
</div>
<div class="visual">
<button class="btn btn-gold"><span>Get Started</span></button>
<button class="btn btn-gold btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-gold btn-large"><span>Get Started</span></button>
<button class="btn btn-gold btn-large btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-gold btn-small"><span>Get Started</span></button>
<button class="btn btn-gold btn-small btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
</div>
<div class="cb"></div>
</div>
<!-- Red Buttons -->
<div class="example-row">
<div class="desc">
<h3>Red Buttons</h3>
<p>These are our red buttons. We use these for actions related to threats.</p>
</div>
<div class="visual">
<button class="btn btn-red"><span>Get Started</span></button>
<button class="btn btn-red btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-red btn-large"><span>Get Started</span></button>
<button class="btn btn-red btn-large btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-red btn-small "><span>Get Started</span></button>
<button class="btn btn-red btn-small btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
</div>
<div class="cb"></div>
</div>
<!-- Blue Buttons -->
<div class="example-row">
<div class="desc">
<h3>Blue Buttons</h3>
<p>These are our blue buttons. Primarily used on our marketing sites.</p>
</div>
<div class="visual">
<button class="btn btn-blue"><span>Get Started</span></button>
<button class="btn btn-blue btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-blue btn-large "><span>Get Started</span></button>
<button class="btn btn-blue btn-large btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-blue btn-small"><span>Get Started</span></button>
<button class="btn btn-blue btn-small btn-outline"><span>Get Started</span></button>
<div class="cb"></div>
</div>
<div class="cb"></div>
</div>
<!-- Dark Gray Buttons -->
<div class="example-row">
<div class="desc">
<h3>Dark Gray Buttons</h3>
<p>These are our dark buttons. These should only be used on dark backgrounds.</p>
</div>
<div class="visual visual-dark-bg">
<button class="btn btn-outline-dark"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-large btn-outline-dark"><span>Get Started</span></button>
<div class="cb"></div>
<button class="btn btn-small btn-outline-small btn-outline-dark"><span>Get Started</span></button>
<div class="cb"></div>
</div>
<div class="cb"></div>
</div>
<pre><code>
/* Default Button */
.btn {
border: none;
border-radius: 5px;
padding: 10px 20px;
background-color: #555555;
color: #ffffff;
text-align: center;
line-height: normal;
box-sizing: border-box;
display: inline-block;
cursor: pointer;
}
.btn:hover {
text-decoration: none;
color: #ffffff;
background-color: #333333;
}
/* Default Outline */
.btn-outline {
border: 1px solid #e7e8eb;
background-color: #f8f8f8;
color: #555555;
}
.btn-outline:hover {
background-color: #f2f2f2;
}
/* Green */
.btn-green {
background-color: #46a34f;
color: #ffffff;
}
.btn-green:hover {
background-color: #3a8641;
}
/* Green Outline */
.btn-green.btn-outline {
background-color: #f8f8f8;
color: #46a34f;
}
.btn-green.btn-outline:hover {
background-color: #f2f2f2;
}
/* Gold */
.btn-gold {
background-color: #ef9a21;
color: #ffffff;
}
.btn-gold:hover {
background-color: #d88510;
}
/* Gold Outline */
.btn-gold.btn-outline {
background-color: #f8f8f8;
color: #ef9a21;
}
.btn-gold.btn-outline:hover {
background-color: #f2f2f2;
}
/* Red */
.btn-red {
background-color: #d94332;
color: #ffffff;
}
.btn-red:hover {
background-color: #bf3323;
}
/* Red Outline */
.btn-red.btn-outline {
background-color: #f8f8f8;
color: #d94332;
}
.btn-red.btn-outline:hover {
background-color: #f2f2f2;
}
/* Blue */
.btn-blue {
background-color: #285984;
color: #ffffff;
}
.btn-blue:hover {
background-color: #1f4465;
}
/* Blue Outline */
.btn-blue.btn-outline {
background-color: #f8f8f8;
color: #285984;
}
.btn-blue.btn-outline:hover {
background-color: #f2f2f2;
}
/* Dark Gray */
.btn-darkgray {
background-color: #2f343e;
color: #7b818a;
}
.btn-darkgray:hover {
background-color: #1d2127;
}
/* Dark Gray Outline */
.btn.btn-outline-dark {
border: 1px solid #7b818a;
background-color: #2f343e;
color: #7b818a;
}
.btn-outline-dark:hover {
background-color: #1d2127;
}
.visual-dark-bg {
background-color: #2f343e;
padding: 20px;
text-align: center;
min-height: 150px;
}
/* Large */
.btn-large {
padding: 10px 25px;
font-size: 16px;
}
/* Small */
.btn-small {
padding: 8px 20px;
font-size: 12px;
}
input.btn-small {
/* adjust for input buttons */
margin-bottom: 0;
padding-bottom: 24px;
}
</code></pre>
</div>
</article>
<!-- END ---------------------------------------------------->
<article id="icons">
<h1>Icons</h1>
<div class="group">
<div class="intro">
<h2>Service & Feature Icons</h2>
<p>These are our icons for services, features, etc. We will be building out this section with more information, but for now you can view them by viewing/downloading the file below:<br><br> <a href="EZShield-Icons.pdf">EZShield-Icons.pdf</a></p>
</div>
</div>
</article>
<!-- END ---------------------------------------------------->
<article id="logos">
<h1>Logo Guidelines</h1>
<div class="group">
<div class="intro">
<h2>Brand Logo</h2>
<p>This is our official brand logo. Please be mindful to avoid distortion during resizing, maintain good contrast between the logo and background, and to always make sure it is the correct resolution for the platform being used.</p>
</div>
<div class="example">
<!-- State Colors -->
<div class="example-row">
<div class="desc">
<h3>Full Logo with Tagline</h3>
<p>This is the official EZShield logo.</p>
<a href="images/downloads/EZShield_Logo_Color_WEB.png" target="_blank" download>Download .png for web</a>
<a href="images/downloads/EZShield_Logo_Color_PRINT.pdf" target="_blank" download>Download .pdf for print</a>
</div>
<div class="visual">
<img src="images/ezshield-full-logo.png" alt="Official EZShield Logo" />
</div>
<div class="cb"></div>
</div>
<div class="example-row">
<div class="desc">
<h3>Clear Space</h3>
<p>The minimum clear space around the logo should be 15px for optimum contrast and legibility.</p>
</div>
<div class="visual">
<img src="images/clearspace-graphic.png" alt="Clear space around EZShield logo" />
</div>
<div class="cb"></div>
</div>
<div class="example-row">
<div class="desc">
<h3>Minimum Size</h3>
<p>The minimum width of EZShield’s logo is 125px so that it is always crisp and legible.</p>
</div>
<div class="visual">
<img src="images/minimum-size-graphic.png" alt="Minimum size of EZShield Logo" />
</div>
<div class="cb"></div>
</div>
</div>
</div>
<div class="group">
<div class="intro">
<h2>Logo Variations</h2>
<p>In cases where the use of our official full-color brand logo is not appropriate or possible, these variations may be used.</p>
</div>
<div class="example">
<div class="example-row">
<div class="desc">
<h3>Black & White Full Logo with Tagline</h3>
<p>This logo should only be used when color printing is not available.</p>
<a href="images/downloads/EZShield_Logo_B&W_PRINT.pdf" target="_blank" download>Download print.pdf</a>
</div>
<div class="visual">
<img src="images/ezshield-bw-logo.png" alt="EZShield black and white logo" />
</div>
<div class="cb"></div>
</div>
<div class="example-row">
<div class="desc">
<h3>Solo Shield</h3>
<p>The solo shield should only be used when ‘EZShield’ is clearly visible or has been well established elsewhere on the page or in the design. <em>Example: on a footer of a page</em>.</p>
<a href="images/downloads/EZShield_SoloShield_Color_WEB.png" target="_blank" download>Download .png for web</a>
<a href="images/downloads/EZShield_SoloShield_Color_Print.pdf" target="_blank" download>Download .pdf for print</a>
</div>
<div class="visual">
<img src="images/ezshield-solo-color.png" alt="EZShield Solo Shield Logo" />
</div>
<div class="cb"></div>
</div>
<div class="example-row">
<div class="desc">
<h3>Black & White Solo Shield</h3>
<p>Follow the same guidelines for the full-color solo shield and use only if color printing is not available.</p>
<a href="images/downloads/EZShield_SoloShield_B&W_Print.pdf" target="_blank" download>Download .pdf for print</a>
</div>
<div class="visual">
<img src="images/ezshield-solo-bw.png" alt="EZShield Solo Shield Black and White Logo" />
</div>
<div class="cb"></div>
</div>
</div>
</div>
<div class="group">
<div class="intro">
<h2>Partner Logos</h2>
<p>When partnering with other companies, these are the branding options available.</p>
</div>
<div class="example">
<div class="example-row">
<div class="desc">
<h3>EZShield Partnering with Partner X</h3>
<p>Website Header: EZShield partnering with a partner. Make sure the space between the EZShield brand logo and the Partner text is 4% the total width of the entire logo.</p>
</div>
<div class="visual">
<img src="images/ezshield-partner-logo-graphic.png" alt="EZShield partner logo template" />
</div>
<div class="cb"></div>
</div>
<div class="example-row">
<div class="desc">
<h3>Partner X Partnering with EZShield</h3>
<p>Website Header: EZShield partnering with a partner partnering with EZShield.</p>
</div>
<div class="visual">
<img src="images/partnering-with-template.png" alt="EZShield partnering with template" />
</div>
<div class="cb"></div>
</div>
<div class="example-row">
<div class="desc">
<h3>Partner X Powered by EZShield</h3>
<p>Website Header: Partner logo and program name, powered by EZShield.</p>
</div>
<div class="visual">
<img src="images/powered-by-template.png" alt="EZShield powered by template" />
</div>
<div class="cb"></div>
</div>
<div class="example-row">
<div class="desc">
<h3>Powered by EZShield</h3>
<p>Website Footer: Powered by EZShield logo appears in the footer of our partner sites.</p>
<a href="images/ezshield-powered.png" target="_blank" download>Download web .png</a>
</div>
<div class="visual">
<img src="images/ezshield-powered.png" alt="Powered By EZShield logo" />
</div>
<div class="cb"></div>
</div>
<div class="example-row">
<div class="desc">
<h3>Powered by EZShield: Black & White</h3>
<p>Available to use when color is not an option.</p>
<a href="images/ezshield-powered-bw.png" target="_blank" download>Download web .png</a>
</div>
<div class="visual">
<img src="images/ezshield-powered-bw.png" alt="Powered By EZShield bw logo" />
</div>
<div class="cb"></div>
</div>
<div class="example-row">
<div class="desc">
<h3>Powered by EZShield: Minimum Size</h3>
<p>The minimum width of the Powered by EZShield logo is 100px to insure legibility.</p>
</div>
<div class="visual">
<img src="images/powered-by-minimum-size.png" alt="Powered By EZShield Minimum Size" />
</div>
<div class="cb"></div>
</div>
</div>
</div>
</article>
</section>
<div id='turnkey-credit'> <div> <a href='http://www.turnkeylinux.org/wordpress'>WordPress Appliance</a> - Powered by <a href='http://www.turnkeylinux.org'>TurnKey Linux</a> </div> </div></body>
</html>