-
Notifications
You must be signed in to change notification settings - Fork 0
/
style-overview.html
121 lines (111 loc) · 5.88 KB
/
style-overview.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
<!DOCTYPE html>
<html lang="en"><!--language declaration should change depending on the language of the page.-->
<head>
<meta charset="utf-8"><!--Meta data is page specific and should be assess and adjusted on a per page basis.-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortlink" href="https://beta.novascotia.ca/">
<title>Style Overview - Forms & Services Building Blocks - Government of Nova Scotia</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"><!-- Should be included in all head tags -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><!-- Should be included in all head tags -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script><!-- Should be included in all head tags -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script><!-- Not needed for service design, loads the navigation for this site -->
<link rel="stylesheet" media="all" href="https://novascotia.ca/clf/fonts/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" media="all" href="css/saltire.css">
<link rel="stylesheet" media="all" href="css/service-specific-styles.css"><!-- Not needed for services-->
<link rel="stylesheet" media="all" href="css/supplimentary-page-styles.css">
<link rel="stylesheet" media="all" href="css/global-form-styles.css">
<link rel="stylesheet" media="all" href="css/phase-banner.css"><!-- Include this only if needed -->
<!--[if lte IE 8]>
<script src="/core/assets/vendor/html5shiv/html5shiv.min.js?v=3.7.3"></script>
<![endif]-->
</head>
<body>
<div class="Site js-enabled" id="container">
<!-- -------------------------------------------------- START Skip Link --------------------------------------------------- -->
<nav class="skip-links" aria-label="Skip to main content">
<a href="#main" class="skip-to-link">Skip to main content</a>
</nav>
<!-- -------------------------------------------------- END Skip Link --------------------------------------------------- -->
<!-- -------------------------------------------------- START HEADER --------------------------------------------------- -->
<header>
<!-- START SALTIRE NS MOTHERSHIP RIBBON w FR -->
<nav id="navigation" class="ribbon" role="navigation" aria-label="Main navigation">
<div class="container">
<div class="row">
<div class="col-xs-6">
<a href="https://novascotia.ca/" hreflang="en"><img class="ribbon-img" src="https://novascotia.ca/clf/ignition/img/nsvip-en-white-flag.svg" alt="Government of Nova Scotia" /></a>
</div>
<div class="col-xs-6">
<a href="/fr" style="float: right; color: #fff; font-weight: bold; margin: 10px 0; text-decoration: none;">Français</a>
</div>
</div>
</div>
</nav>
<!-- END SALTIRE NS MOTHERSHIP RIBBON w FR -->
</header>
<!-- -------------------------------------------------- END HEADER --------------------------------------------------- -->
<!-- START Alpha Phase Banner -->
<div class="ns-phase-banner">
<div class="container">
<div class="row">
<div class="col">
<p class="ns-phase-banner__content">
<strong class="ns-tag ns-phase-banner__content__tag">
Alpha
</strong>
<span class="ns-phase-banner__text">
This is a new service that we're still developing. Try the service and <a href="https://github.com/connorscarolyns/service-pattern-library/issues">send us your comments and suggestions</a>. Your feedback will help make the service easier to use for everyone.
</span>
</p>
</div>
</div>
</div>
</div>
<!-- END Alpha Phase Banner -->
<!-- START Primary NAV -->
<div id="nav-placeholder4">
</div>
<script>
$(function(){
$("#nav-placeholder4").load("primary-nav.html");
});
</script>
<!-- End Primary NAV -->
<!--A basic page has a primary content area and an optional column for secondary information like related content.-->
<div class="container Site-content">
<main id="main"><!-- SEMANTIC MAIN TAG TO INDICATE PAGE CONTENT-->
<article><!-- SEMANTIC ARTICLE TAG TO GROUP RELATED CONTENT-->
<div class="row">
<div class="col-sm-3 col-xs-12 order-last order-sm-first">
<div id="nav-placeholder1">
</div>
<script>
$(function(){
$("#nav-placeholder1").load("nav-styles.html");
});
</script>
</div>
<div class="col-sm-8 col-xs-12"><!-- Bootstrap column grid should not be set to more than 8-col for main content column -->
<H1 id="style-overview">Style Overview</h1>
<p>Make your service look and feel like novascotia.ca</p>
<p>If you are using the <a href="https://cns.pages.novascotia.ca/patternlab/">Saltire frameswork</a> and have included the <a href="#">Service Design components (not ready yet)</a> in your build, the coded examples provided will render as they appear inside the Forms & Services Building Blocks.</p>
<p>If you need to apply styles manually, you should still follow existing novascotia.ca conventions. Don't, for example, assign new meanings to colours, change the style of buttons or adjust the thickness of borders on form fields.</p>
</div><!-- /col-xs-8 -->
</div><!--/row-->
</article>
</main>
</div><!-- /container -->
<!-- START FOOTER -->
<footer id="footer" class="footer" role="contentinfo">
<div class="container">
<ul class="remove-underline">
<li><a href="http://novascotia.ca/cns/privacy/">Privacy</a></li>
<li><a href="http://novascotia.ca/terms/">Terms</a></li>
<li><a href="http://novascotia.ca/cns/privacy/cookies/">Cookies</a></li>
</ul>
</div>
</footer>
<!-- END FOOTER -->
</div>
</body>
</html>