-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathstyles.html
71 lines (55 loc) · 2 KB
/
styles.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
<head>
<link rel="stylesheet" type="text/css" href="elements/css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet">
<style>
.side-nav {
postion: fixed;
margin-top: 60px;
}
.side-nav li {
padding: 10px 0px 10px 0px;
margin-left: -5px;
text-decoration: none;
list-style-type: none;
}
</style>
</head>
<body>
<header>
<div class="banner purple-bkg">
<div class="wrapper">
<img src="https://thepensionsregulator.github.io/user-research/elements/imgs/TPR_logo_strap.png">
</div>
</div>
</header>
<nav>
<div class="wrapper">
<ul>
<li><a href="home.html">Getting started</a></li>
<li><a href="styles.html">Styles</a></li>
<li><a href="components.html">Components</a></li>
<li><a href="research.html">Research</a></li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="col-4">
<div class="grid-item">
<ul class="side-nav" >
<li><a href="../user-research/styles/colour.html">Colour</a></li>
<li><a href="../user-research/styles/typography.html">Typography</a></li>
<li><a href="../user-research/styles/grid.html">Grid</a></li>
</ul>
</div>
</div>
<div class="col-2-3rds">
<div class="grid-item">
<h1>Styles<h1>
<h2>SSRA Portals products follow The Pensions Regulators styles</h2>
<p>The Pensions Regulator is currently in the process of building a digital design system but in the mean time you can find styles for SSRA Portals here</p>
<p>You should make your service look and feel like The Pensions Regulator. If you need to apply styles manually, you should still follow existing TPR conventions.
For example, do not assign new meanings to colours, do not change the style of buttons or adjust the thickness of borders on form inputs.</p>
</div>
</div>
</body>