-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.html
140 lines (132 loc) · 5.03 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Styles – Netpune</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" href="css/master.css" media="all">
</head>
<body>
<header>
<div class="navbar">
<div class="ds-hero" id="navbar">
<div class="container container--full-width">
<div class="grid">
<div class="grid__col col-3@m">
<a href="index.html"><img src="img/lexis-icon.svg" class="lexis-icon" alt="Neptune"></a>
</div>
<div class="grid__col col-9@m">
<div class="topnav">
<div class="topnav-right">
<a href="index.html">Home</a>
<a href="" class="active">Styles</a>
<a href="components.html">Components</a>
<a href="patterns.html">Patterns</a>
<a href="">Accessibility</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="main">
<div class="ds-hero-white content">
<h1 class="u-fs-xxxl u-ta-center u-mb-l u-mt-m u-fw-b u-dark">Styles</h1>
</div>
<div class="ds-hero-grey">
<div class="container container--wide">
<div class="grid grid--loose grid--gutterless grid--reverse u-mb-l u-ml-xl u-mr-xl">
<div class="grid__col col-6@m grid--center">
<div class="card_image">
<img src="img/typography.svg" class="type-image" alt="type image">
</div>
</div>
<div class="grid__col col-6@m">
<div class="card_content">
<p class="u-fs-xxl u-dark">Typography</p>
<p class="u-fs-body u-mb-xl">Neptunes’s type scale for headings, body copy, buttons and more</p>
<a href="styles/typography.html" role="button" class="btn btn--outlined btn--link-outlined">Typography guide</a>
</div>
</div>
</div>
<div class="grid grid--loose grid--gutterless u-mb-l u-ml-xl u-mr-xl">
<div class="grid__col col-6@m grid--center">
<div class="card_image_dark">
<img src="img/colour.svg" class="colour-image" alt="colour">
</div>
</div>
<div class="grid__col col-6@m">
<div class="card_content">
<p class="u-fs-xxl u-dark">Colour</p>
<p class="u-fs-body u-mb-xl">Colour palette with hexcodes and accessibility contrast ratios</p>
<a href="styles/colour.html" role="button" class="btn btn--outlined btn--link-outlined">Colour guide</a>
</div>
</div>
</div>
<div class="grid grid--loose grid--gutterless grid--reverse u-mb-l u-ml-xl u-mr-xl">
<div class="grid__col col-6@m grid--center">
<div class="card_image">
<img src="img/grid.svg" class="grid-image" alt="grid">
</div>
</div>
<div class="grid__col col-6@m">
<div class="card_content">
<p class="u-fs-xxl u-dark">Grid</p>
<p class="u-fs-body u-mb-xl">Breakpoints, margins, gutters and responsive behaviour</p>
<a href="styles/grid.html" role="button" class="btn btn--outlined btn--link-outlined">Grid guide</a>
</div>
</div>
</div>
<div class="grid grid--loose grid--gutterless u-mb-l u-ml-xl u-mr-xl">
<div class="grid__col col-6@m grid--center">
<div class="card_image_dark">
<img src="img/layout.svg" class="layout-image" alt="grid">
</div>
</div>
<div class="grid__col col-6@m">
<div class="card_content">
<p class="u-fs-xxl u-dark">Layout</p>
<p class="u-fs-body u-mb-xl">Colour palette with hexcodes and accessibility contrast ratios</p>
<a href="styles/layout.html" role="button" class="btn btn--outlined btn--link-outlined">Layout guide</a>
</div>
</div>
</div>
<div class="grid grid--loose grid--gutterless grid--reverse u-mb-l u-ml-xl u-mr-xl">
<div class="grid__col col-6@m grid--center">
<div class="card_image">
<img src="img/iconography.svg" class="icon-image" alt="type image">
</div>
</div>
<div class="grid__col col-6@m">
<div class="card_content">
<p class="u-fs-xxl u-dark">Iconography</p>
<p class="u-fs-body u-mb-xl">A consistent set of icons to use in out products</p>
<a href="styles/iconography.html" role="button" class="btn btn--outlined btn--link-outlined">Iconography guide</a>
</div>
</div>
</div>
<div class="grid grid--loose grid--gutterless u-ml-xl u-mr-xl">
<div class="grid__col col-6@m grid--center">
<div class="card_image_dark">
<img src="img/branding.svg" class="branding-image" alt="colour">
</div>
</div>
<div class="grid__col col-6@m">
<div class="card_content">
<p class="u-fs-xxl u-dark">Branding</p>
<p class="u-fs-body u-mb-xl">Guidance on using the Lexis Nexis Risk Solutions and RELX brands within products</p>
<a href="styles/branding.html" role="button" class="btn btn--outlined btn--link-outlined">Branding guide</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script type="text/javascript" src="js/focus.js"></script>
</body>
</html>