-
Notifications
You must be signed in to change notification settings - Fork 0
/
details.html
148 lines (139 loc) · 8 KB
/
details.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
<!DOCTYPE html>
<html lang="en">
<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.0">
<link rel="shortlink" href="https://beta.novascotia.ca/">
<title>Details - 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"><!-- Include 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><!-- Include 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><!-- Include 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"><!-- Include in all head tags -->
<link rel="stylesheet" media="all" href="css/saltire.css"><!-- Include in all head tags -->
<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"><!-- Include in all head tags -->
<link rel="stylesheet" media="all" href="css/global-form-styles.css"><!-- Include only if forms are used-->
<link rel="stylesheet" media="all" href="css/radio-button.css"><!-- Include only if radios are used-->
<link rel="stylesheet" media="all" href="css/toggle.css"><!-- Include only if toggles are present-->
<link rel="stylesheet" media="all" href="css/checkboxes.css"><!-- Include only if checkboxes are used-->
<link rel="stylesheet" media="all" href="css/slider.css"><!-- Include only if sliders are used-->
<link rel="stylesheet" media="all" href="css/input-field-group.css"><!-- Include only if inputs are used-->
<link rel="stylesheet" media="all" href="css/select.css"><!-- Include only if selects are used-->
<link rel="stylesheet" media="all" href="css/buttons.css"><!-- Include only if buttons are used-->
<link rel="stylesheet" media="all" href="css/phase-banner.css"><!-- Include only if phase banner is used-->
<link rel="stylesheet" media="all" href="css/accordion.css"><!-- Include this only if needed -->
<link rel="stylesheet" media="all" href="css/panel.css"><!-- Include this only if needed -->
<link rel="stylesheet" media="all" href="css/date-picker.css"><!-- Include this only if needed -->
<link rel="stylesheet" media="all" href="css/details.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 js" 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="Province of Nova Scotia" /></a>
</div>
</div>
</div>
</nav>
<!-- END SALTIRE NS MOTHERSHIP RIBBON w FR -->
</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 -->
<!-- -------------------------------------------------- END HEADER --------------------------------------------------- -->
<!--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-->
<form name="parameters" method="GET" target="_parent">
<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-patterns.html");
});
</script>
</div>
<div class="col-sm-9 col-xs-12">
<h1>Details</h1><!-- SEMANTIC H1 TAG TO RELAY PAGE TITLE ONLY 1 PER PAGE-->
<p>Make a page easier to scan by letting users reveal more detailed information only if they need it.</p>
<h2 id="when-to-use-this-component">When to use this component</h2>
<p>Use the details component to make a page easier to scan when it contains information that only some users will need.</p>
<h2 id="when-not-to-use-this-component">When not to use this component</h2>
<p>Do not use the details component to hide information that the majority of your users will need.</p>
<h2 id="how-it-works">How it works</h2>
<p>The details component is a short link that expands into more detailed help text when a user clicks on it.</p>
<section class="row">
<div class="col-md-12 col-xs-12">
<div class="exampleDisplay">
<div class="ns-details-accordion accordion ns-accordion" data-aria-accordion="" id="acc_1-0">
<div class="accordion__heading">
<button type="button" aria-controls="acc_1-0_panel_1" id="acc_1-0_panel_1_trigger" class="accordion__trigger" aria-expanded="false" data-current="true" data-target="#acc_1-0_panel_1" data-toggle="collapse">
Not sure what type of licence you have?
</button>
</div>
<div class="accordion__panel" id="acc_1-0_panel_1" aria-hidden="true">
<h3 class="h4">Class 7 learner licence (beginner) is for people learning to drive.</h3>
<p>Most people have a class 5 licence and should select "No" to the question above. Read more about <a href="#">different types of driver licence classes</a>.</p>
</div>
</div>
</div>
</div><!-- / example col -->
</section><!--/row-->
</div><!-- /col-xs-8 -->
</div><!--/row-->
</form>
</article>
</main>
</div><!-- /container -->
<!-- START FOOTER -->
<footer id="footer" class="footer" role="contentinfo">
<div class="container">
</div>
</footer>
<!-- END FOOTER -->
</div>
</body>
<script src="js/aria.accordion.js"></script> <!-- For accodions. Include this only if needed -->
<script src="js/modernizr.min.js?v=3.3.1"></script> <!-- For accodions. Include this only if needed -->
</html>