-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (103 loc) · 4.76 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DFO Intranet - Test concepts</title>
<style>
body {
margin: 0px;
}
</style>
<link rel="stylesheet" href="styles/dfo.css" />
<!-- Icons Font Awesome (to access icons, import Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous">
<!-- GC Design System -->
<link rel="stylesheet" href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@latest/dist/gcds/gcds.css">
<script type="module" src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@latest/dist/gcds/gcds.esm.js"></script>
<script nomodule src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@latest/dist/gcds/gcds.js"></script>
<!-- Google fonts - Lato & Noto Sans -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
</style>
</head>
<body>
<section class="experimental alpha-top" role="banner">
<h2 class="wb-inv">This webpage is in alpha</h2>
<div class="container"><small><span class="alpha-label">Alpha</span> This is an experimental page for the Department of Fisheries and Oceans Canada. Contents will change regularly as we engage with the public.</small></div>
</section >
<!-- container start -->
<gcds-container
size="xl"
centered tag="main"
margin="20"
padding="600">
<gcds-heading tag="h1" id="h1-font">
Intranet prototype concepts
</gcds-heading>
<gcds-alert alert-role="info" container="md" heading="About this page">
<gcds-text>The following is a list of possible "concepts" that we are exploring and looking to get feedback on. These are not finalized designs, and nothing here should be seen as a commitment to delivery.</gcds-text>
</gcds-alert>
<gcds-text margin-top="450">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus sem, vehicula a nisi a, laoreet faucibus leo. Nunc bibendum purus in diam condimentum sodales. Nam a commodo sapien, lobortis sodales arcu. Nulla porttitor, velit ut mollis mollis, lacus lacus semper ligula, mollis consectetur nibh est id est.</gcds-text>
<gcds-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacus sem, vehicula a nisi a, laoreet faucibus leo. Nunc bibendum purus in diam condimentum sodales. Nam a commodo sapien, lobortis sodales arcu. Nulla porttitor, velit ut mollis mollis, lacus lacus semper ligula, mollis consectetur nibh est id est.</gcds-text>
<!-- cards start -->
<div class="my-500">
<gcds-grid tag="ul" columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" gap="400">
<gcds-card
card-title="Data table"
type="action"
title-element="h3"
description="A way to organize and display large amounts of data in rows and columns."
role="listitem"
>
<div slot="footer">
<p class="text-secondary">
<small>
<em>Other names: table, data grid.</em>
</small>
</p>
</div>
</gcds-card>
<gcds-card
card-title="Image"
type="action"
title-element="h3"
description="An element for displaying optimized responsive visual content."
role="listitem"
>
<div slot="footer">
<p class="text-secondary">
<small>
<em>Other names: picture, responsive image, figure, photo.</em>
</small>
</p>
</div>
</gcds-card>
<gcds-card
card-title="Tag"
type="action"
title-element="h3"
description="A component used for items that need to be labeled, categorized, or organized using keywords that describe them."
role="listitem"
>
<div slot="footer">
<p class="text-secondary">
<small>
<em>Other names: label, badge, pill.</em>
</small>
</p>
</div>
</gcds-card>
</gcds-grid>
</div>
<!-- cards ends -->
</gcds-container>
<gcds-footer
display="full"
lang="en"
contextual-heading="DFO-CCG Intranet"
contextual-links='{ "Contact us": "#", "Report an issue": "#", "About us": "#" }'
sub-links='{ "Social media": "#", "About Fisheries and Oceans": "#", "Terms and conditions": "https://www.canada.ca/en/transparency/terms.html", "Privacy": "/en/privacy-notice" }'
></gcds-footer>
</body>
</html>