-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathone-per-page.html
More file actions
230 lines (225 loc) · 14.3 KB
/
one-per-page.html
File metadata and controls
230 lines (225 loc) · 14.3 KB
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en" style="background:#f3f2f1; color:#0b0c0c">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light">
<title>Article 4 Directions — West Brackenfield District Council</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #f3f2f1; color: #0b0c0c; -webkit-text-size-adjust: 100%; }
body { font-family: "GDS Transport", Arial, sans-serif; font-size: 16px; background: #f3f2f1; color: #0b0c0c; }
a { color: #1d70b8; }
.skip-link { position: absolute; top: -40px; left: 0; background: #fd0; padding: 8px 12px; font-weight: 700; font-size: 14px; z-index: 100; text-decoration: none; color: #0b0c0c; }
.skip-link:focus { top: 0; }
.site-header { background: #004b87; color: #fff; }
.header-top { display: flex; align-items: center; padding: 0 20px; max-width: 1200px; margin: 0 auto; height: 68px; }
.council-logo { display: flex; align-items: center; color: #fff; text-decoration: none; }
.main-nav { background: #003770; }
.nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; flex-wrap: wrap; }
.nav-inner a { color: #fff; text-decoration: none; padding: 12px 14px; font-size: 14px; display: block; border-bottom: 3px solid transparent; }
.nav-inner a:hover { background: rgba(255,255,255,0.1); }
.nav-inner a.active { border-bottom-color: #fd0; font-weight: 700; }
.breadcrumb { background: #fff; border-bottom: 1px solid #b1b4b6; padding: 10px 20px; font-size: 14px; }
.breadcrumb-inner { max-width: 1200px; margin: 0 auto; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; }
.breadcrumb li { color: #505a5f; }
.breadcrumb li + li::before { content: " › "; color: #505a5f; padding: 0 6px; }
.breadcrumb a { color: #1d70b8; }
.page-wrap { max-width: 1200px; margin: 0 auto; padding: 30px 20px 60px; display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: start; }
.main-content { min-width: 0; }
.back-link { font-size: 14px; display: inline-block; margin-bottom: 20px; }
.back-link::before { content: "← "; }
.demo-tag { display: inline-block; background: #f47738; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.page-title { font-size: 32px; font-weight: 700; line-height: 1.1; margin-bottom: 6px; }
.page-meta { font-size: 14px; color: #505a5f; margin-bottom: 20px; }
p { line-height: 1.6; margin-bottom: 14px; }
.a4d-list { list-style: none; padding: 0; margin: 20px 0 32px; }
.a4d-list-item { background: #fff; border: 1px solid #b1b4b6; border-left: 5px solid #1d70b8; padding: 18px 20px; margin-bottom: 10px; border-radius: 2px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.a4d-list-item:hover { border-left-color: #003078; }
.a4d-item-body h2 { font-size: 18px; font-weight: 700; margin-bottom: 4px; border: none; padding: 0; }
.a4d-item-body h2 a { color: #1d70b8; text-decoration: none; }
.a4d-item-body h2 a:hover { text-decoration: underline; }
.a4d-item-meta { font-size: 13px; color: #505a5f; display: flex; gap: 16px; flex-wrap: wrap; }
.status-tag { display: inline-block; background: #00703c; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px; text-transform: uppercase; flex-shrink: 0; }
h2.section-heading { font-size: 20px; font-weight: 700; margin: 32px 0 10px; padding-bottom: 8px; border-bottom: 2px solid #1d70b8; }
.data-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.data-link { background: #f3f2f1; border: 1px solid #b1b4b6; padding: 8px 14px; font-size: 14px; color: #1d70b8; border-radius: 2px; text-decoration: none; }
.data-link:hover { background: #e8e8e8; }
.sidebar { min-width: 0; }
.sidebar-card { background: #fff; border: 1px solid #b1b4b6; padding: 16px; margin-bottom: 20px; border-radius: 2px; }
.sidebar-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #e8e8e8; }
.sidebar-card ul { list-style: none; padding: 0; }
.sidebar-card li { border-bottom: 1px solid #f3f2f1; padding: 6px 0; font-size: 14px; }
.sidebar-card li:last-child { border-bottom: none; }
.sidebar-card p { font-size: 14px; color: #505a5f; line-height: 1.5; }
.contact-label { font-weight: 700; font-size: 11px; color: #505a5f; text-transform: uppercase; letter-spacing: 0.6px; display: block; margin-top: 8px; }
.sidebar-card address { font-style: normal; font-size: 13px; color: #505a5f; line-height: 1.7; }
.site-footer { background: #0b0c0c; color: #fff; padding: 30px 20px; margin-top: 40px; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 5px; }
.footer-col a { color: #d2d2d2; font-size: 13px; text-decoration: none; }
.footer-bottom { text-align: center; font-size: 12px; color: #6f777b; border-top: 1px solid #333; padding-top: 16px; max-width: 1200px; margin: 20px auto 0; }
@media (max-width: 768px) { .page-wrap { grid-template-columns: 1fr; } .sidebar { display: none; } }
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header class="site-header" role="banner">
<div class="header-top">
<a href="index.html" class="council-logo" aria-label="West Brackenfield District Council home">
<svg width="300" height="64" viewBox="0 0 520 140" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M42 18 L118 18 L118 62 Q118 105 80 125 Q42 105 42 62 Z" fill="#1e4d3a"/>
<path d="M42 18 L118 18 L118 62 Q118 105 80 125 Q42 105 42 62 Z" fill="none" stroke="#c9a95c" stroke-width="2.5"/>
<path d="M48 24 L112 24 L112 62 Q112 100 80 118 Q48 100 48 62 Z" fill="none" stroke="#c9a95c" stroke-width="1" opacity="0.5"/>
<line x1="80" y1="38" x2="80" y2="106" stroke="#c9a95c" stroke-width="1.8" stroke-linecap="round"/>
<path d="M80 98 C66 93 62 85 68 82" stroke="#c9a95c" stroke-width="1.6" fill="none" stroke-linecap="round"/>
<path d="M80 98 C94 93 98 85 92 82" stroke="#c9a95c" stroke-width="1.6" fill="none" stroke-linecap="round"/>
<path d="M80 88 C67 83 63 75 69 73" stroke="#c9a95c" stroke-width="1.5" fill="none" stroke-linecap="round"/>
<path d="M80 88 C93 83 97 75 91 73" stroke="#c9a95c" stroke-width="1.5" fill="none" stroke-linecap="round"/>
<path d="M80 78 C68 73 65 66 70 64" stroke="#c9a95c" stroke-width="1.4" fill="none" stroke-linecap="round"/>
<path d="M80 78 C92 73 95 66 90 64" stroke="#c9a95c" stroke-width="1.4" fill="none" stroke-linecap="round"/>
<path d="M80 68 C69 63 67 57 72 56" stroke="#c9a95c" stroke-width="1.2" fill="none" stroke-linecap="round"/>
<path d="M80 68 C91 63 93 57 88 56" stroke="#c9a95c" stroke-width="1.2" fill="none" stroke-linecap="round"/>
<path d="M80 58 C73 54 71 49 75 48" stroke="#c9a95c" stroke-width="1" fill="none" stroke-linecap="round"/>
<path d="M80 58 C87 54 89 49 85 48" stroke="#c9a95c" stroke-width="1" fill="none" stroke-linecap="round"/>
<path d="M80 38 Q78 32 80 29 Q83 27 83 31" stroke="#c9a95c" stroke-width="1.2" fill="none" stroke-linecap="round"/>
<text x="148" y="58" font-family="Georgia, 'Times New Roman', serif" font-size="26" font-weight="bold" fill="#ffffff" letter-spacing="2">WEST BRACKENFIELD</text>
<text x="148" y="86" font-family="Georgia, 'Times New Roman', serif" font-size="17" fill="#ffffff" letter-spacing="3">DISTRICT COUNCIL</text>
<line x1="148" y1="93" x2="510" y2="93" stroke="#c9a95c" stroke-width="1"/>
<text x="148" y="112" font-family="Georgia, 'Times New Roman', serif" font-size="12" fill="rgba(255,255,255,0.7)" font-style="italic" letter-spacing="1">Growing together</text>
</svg>
</a>
</div>
<nav class="main-nav" aria-label="Main navigation">
<div class="nav-inner">
<a href="#">Home</a><a href="#">Residents</a><a href="#">Business</a>
<a href="#" class="active">Planning</a><a href="#">Environment</a><a href="#">Council</a><a href="#">Contact</a>
</div>
</nav>
</header>
<nav class="breadcrumb" aria-label="Breadcrumb">
<div class="breadcrumb-inner">
<ol>
<li><a href="#">Home</a></li><li><a href="#">Planning</a></li><li><a href="#">Planning policy</a></li>
<li aria-current="page">Article 4 Directions</li>
</ol>
</div>
</nav>
<div class="page-wrap" id="main-content">
<main class="main-content">
<a href="index.html" class="back-link">Back to planning data examples</a>
<span class="demo-tag">One per page — example</span>
<h1 class="page-title">Article 4 Directions</h1>
<p class="page-meta">Last updated: 18 March 2026</p>
<p>Under current planning legislation householders and businesses have the right to make certain alterations to their property without planning permission — these are called permitted development rights. An Article 4 Direction removes some or all of these rights, meaning that planning permission must be applied for before the works can be carried out.</p>
<p>West Brackenfield District Council has made 6 Article 4 Directions. Select an area below to view the full details.</p>
<ul class="a4d-list" aria-label="Article 4 Directions">
<li class="a4d-list-item">
<div class="a4d-item-body">
<h2><a href="a4d-001-brackenfield-old-town.html">Brackenfield Old Town</a></h2>
<div class="a4d-item-meta">
<span><strong>Ref:</strong> WBDC-A4D-001</span>
<span><strong>Confirmed:</strong> 14 March 2019</span>
<span>Changes of use; external alterations</span>
</div>
</div>
<span class="status-tag">Active</span>
</li>
<li class="a4d-list-item">
<div class="a4d-item-body">
<h2><a href="a4d-002-fenwick-road.html">Fenwick Road</a></h2>
<div class="a4d-item-meta">
<span><strong>Ref:</strong> WBDC-A4D-002</span>
<span><strong>Confirmed:</strong> 22 July 2021</span>
<span>Conversion to HMOs</span>
</div>
</div>
<span class="status-tag">Active</span>
</li>
<li class="a4d-list-item">
<div class="a4d-item-body">
<h2><a href="a4d-003-stonemoor-lane.html">Stonemoor Lane</a></h2>
<div class="a4d-item-meta">
<span><strong>Ref:</strong> WBDC-A4D-003</span>
<span><strong>Confirmed:</strong> 5 November 2018</span>
<span>Extensions and outbuildings</span>
</div>
</div>
<span class="status-tag">Active</span>
</li>
<li class="a4d-list-item">
<div class="a4d-item-body">
<h2><a href="a4d-004-holt-green.html">Holt Green</a></h2>
<div class="a4d-item-meta">
<span><strong>Ref:</strong> WBDC-A4D-004</span>
<span><strong>Confirmed:</strong> 9 February 2023</span>
<span>External alterations in conservation area</span>
</div>
</div>
<span class="status-tag">Active</span>
</li>
<li class="a4d-list-item">
<div class="a4d-item-body">
<h2><a href="a4d-005-thornwick-business-park.html">Thornwick Business Park</a></h2>
<div class="a4d-item-meta">
<span><strong>Ref:</strong> WBDC-A4D-005</span>
<span><strong>Confirmed:</strong> 17 September 2020</span>
<span>Change of use from employment</span>
</div>
</div>
<span class="status-tag">Active</span>
</li>
<li class="a4d-list-item">
<div class="a4d-item-body">
<h2><a href="a4d-006-millgate-riverside.html">Millgate Riverside</a></h2>
<div class="a4d-item-meta">
<span><strong>Ref:</strong> WBDC-A4D-006</span>
<span><strong>Confirmed:</strong> 30 May 2022</span>
<span>Demolition; change of use in regeneration area</span>
</div>
</div>
<span class="status-tag">Active</span>
</li>
</ul>
<h2 class="section-heading">Data and other resources</h2>
<p>This data is published in accordance with the Article 4 Direction data specification published by MHCLG and is available under the Open Government Licence.</p>
<div class="data-links">
<a href="#" class="data-link">⬇ Article 4 Direction areas (CSV)</a>
<a href="#" class="data-link">⬇ Article 4 Direction documents (CSV)</a>
<a href="https://www.planning.data.gov.uk/dataset/article-4-direction" target="_blank" rel="noopener" class="data-link">🔗 View on planning.data.gov.uk ↗</a>
</div>
<p style="font-size:13px; color:#505a5f; margin-top:14px">Data published under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/">Open Government Licence v3.0</a>.</p>
</main>
<aside class="sidebar">
<div class="sidebar-card">
<h3>See also</h3>
<ul>
<li><a href="all-on-one-page.html">All on one page example</a></li>
<li><a href="finder.html">Finder example</a></li>
<li><a href="index.html">Back to examples</a></li>
</ul>
</div>
<div class="sidebar-card">
<h3>Contact planning policy</h3>
<address>
<span class="contact-label">Email</span>
<a href="mailto:planningpolicy@westbrackenfield.gov.uk" style="color:#1d70b8; font-size:13px">planningpolicy@westbrackenfield.gov.uk</a>
<span class="contact-label">Telephone</span>
01234 567890
</address>
</div>
</aside>
</div>
<footer class="site-footer">
<div class="footer-inner">
<div class="footer-col"><h4>Council services</h4><ul><li><a href="#">Planning</a></li><li><a href="#">Housing</a></li></ul></div>
<div class="footer-col"><h4>About the council</h4><ul><li><a href="#">Accessibility</a></li><li><a href="#">Privacy</a></li></ul></div>
<div class="footer-col"><h4>Open data</h4><ul><li><a href="https://www.planning.data.gov.uk" target="_blank" rel="noopener">planning.data.gov.uk</a></li></ul></div>
</div>
<div class="footer-bottom">© West Brackenfield District Council 2026 · <a href="#">Accessibility</a> · <a href="#">Cookies</a></div>
</footer>
</body>
</html>