bootstrap-templates/pressroom/article.html at main · ColorlibHQ/bootstrap-templates · GitHub

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
<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The town that bought its own high street — Pressroom</title>
<meta name="description" content="Long-form article layout built with Bootstrap 6 — .prose typography, a sticky ScrollSpy table of contents, author byline and related stories.">
<link rel="stylesheet" href="assets/vendor/bootstrap6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body data-bs-spy="scroll" data-bs-target="#tocNav" data-bs-top-margin="120px" data-bs-smooth-scroll="true">

<a class="visually-hidden-focusable btn-solid theme-primary m-2" href="#main">Skip to main content</a>

<div class="masthead-top">
  <div class="container d-flex flex-wrap justify-content-between align-items-center gap-2">
    <span class="fg-2">Monday, 27 July 2026</span>
    <span class="fg-3 d-none md:d-inline">Independent since 2009 · No paywall</span>
    <a class="fg-2" href="index.html#newsletter">Subscribe</a>
  </div>
</div>

<header class="site-header">
  <div class="container py-4 text-center">
    <a class="masthead-title" href="index.html">Pressroom</a>
  </div>
  <nav class="navbar lg:navbar-expand py-0" aria-label="Sections">
    <div class="container justify-content-center">
      <dialog class="drawer drawer-end" tabindex="-1" id="navDrawer" aria-labelledby="navDrawerLabel">
        <div class="drawer-header">
          <h5 class="drawer-title" id="navDrawerLabel">Sections</h5>
          <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
        </div>
        <div class="drawer-body mb-2 lg:mb-0">
          <ul class="nav navbar-nav" data-bs-toggle="nav-overflow">
            <li class="nav-item"><a class="nav-link " href="index.html">Front page</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#cities">Cities</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#culture">Culture</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#making">Making</a></li>
            <li class="nav-item"><a class="nav-link" href="article.html">Long reads</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#newsletter">Newsletter</a></li>
          </ul>
        </div>
      </dialog>
      <div class="d-flex align-items-center gap-2 ms-auto lg:ms-0 py-2">
        <button class="btn-icon btn-sm" type="button" data-bs-toggle="drawer" data-bs-target="#searchDrawer" aria-label="Search">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 4 4" stroke-linecap="round"/></svg>
        </button>
        <button class="btn-icon btn-sm" type="button" id="themeToggle" aria-label="Toggle color mode">
          <svg class="theme-icon-light" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="3.25"/><path d="M8 1v1.5M8 13.5V15M15 8h-1.5M2.5 8H1m11-4-1 1M5 11l-1 1m0-8 1 1m6 6 1 1"/></svg>
          <svg class="theme-icon-dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/></svg>
        </button>
        <button class="btn-icon btn-sm navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navDrawer" aria-controls="navDrawer" aria-label="Open sections">
          <span class="navbar-toggler-icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </nav>
</header>

<main id="main" class="section">
  <div class="container">
    <nav aria-label="breadcrumb" class="mb-4">
      <ol class="breadcrumb fs-sm">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html">Front page</a></li>
        <li class="breadcrumb-divider">/</li>
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html#cities">Cities</a></li>
        <li class="breadcrumb-divider">/</li>
        <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-link active" href="article.html">High street</a></li>
      </ol>
    </nav>

    <div class="row justify-content-center mb-5">
      <div class="lg:col-8">
        <p class="kicker mb-2">Cities</p>
        <h1 class="headline fs-5xl mb-4">The town that bought its own high street</h1>
        <p class="fs-lg fg-2 mb-4">When the last two banks closed within a month of each other, a group of residents did something unusual: they stopped writing letters and started raising money.</p>
        <div class="d-flex flex-wrap align-items-center gap-3 pb-4 mb-0" style="border-bottom:1px solid var(--bs-border-color)">
          <img class="author-chip" style="width:2.5rem;height:2.5rem" src="img/author-1.jpg" alt="" width="200" height="200">
          <div><p class="fw-semibold fs-sm mb-0">Daniel Osei</p><p class="byline mb-0">27 July 2026 &#183; 14 min read</p></div>
          <div class="d-flex gap-2 ms-auto">
            <a class="btn-icon btn-sm" href="#" aria-label="Share on X"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12.6 1h2.3l-5 5.7L15.8 15h-4.6l-3.6-4.7L3.4 15H1.1l5.4-6.1L1 1h4.7l3.3 4.3zm-.8 12.6h1.3L5.2 2.3H3.8z"/></svg></a>
            <button class="btn-icon btn-sm" type="button" data-bs-toggle="tooltip" data-bs-title="Copy link" aria-label="Copy link"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M11 5V3.5A1.5 1.5 0 0 0 9.5 2h-6A1.5 1.5 0 0 0 2 3.5v6A1.5 1.5 0 0 0 3.5 11H5"/></svg></button>
          </div>
        </div>
      </div>
    </div>

    <div class="article-hero mb-6"><img src="img/article.jpg" alt="A railway platform on a grey morning" width="1400" height="840"></div>

    <div class="row g-6 justify-content-center">
      <aside class="lg:col-3 d-none lg:d-block">
        <div class="toc">
          <p class="kicker mb-3">In this piece</p>
          <nav id="tocNav" class="nav">
            <a class="nav-link" href="#s1">Two closures, one month</a>
            <a class="nav-link" href="#s2">Raising &#163;480,000</a>
            <a class="nav-link" href="#s3">What they bought</a>
            <a class="nav-link" href="#s4">Does it work?</a>
          </nav>
        </div>
      </aside>

      <div class="lg:col-7">
        <div class="article-body prose">
          <p>The Nationwide went first, in the February. The Halifax followed six weeks later, and with it the last cash machine on the north side of the river. What was left was a row of eleven units, four of them empty, and a landlord in Jersey who had never visited.</p>

          <h2 id="s1">Two closures, one month</h2>
          <p>Ellen Prideaux had run the hardware shop for nineteen years and had watched three consultations come and go. &#8220;Every time, someone from the council would come and take notes,&#8221; she said. &#8220;And every time, nothing.&#8221;</p>
          <p>What changed was not the politics but the arithmetic. With four units empty, the freehold came onto the market at a price that was, for the first time, conceivably raisable by a town of nine thousand people.</p>
          <blockquote><p>We stopped asking whether someone would save the high street and started asking what it would cost to buy it.</p></blockquote>

          <h2 id="s2">Raising &#163;480,000</h2>
          <p>The share offer opened in the May with a target of &#163;350,000 and a minimum stake of &#163;100. It closed eleven weeks later at &#163;480,000, from 1,140 shareholders. Roughly a third live outside the town &#8212; former residents, mostly, and a surprising number of people who had once had a holiday there.</p>
          <p>Shares pay no dividend. They carry one vote each regardless of how many you hold, which is the standard community-benefit-society structure and, according to the treasurer, the single most important decision they made.</p>

          <figure class="inset">
            <img src="img/post-2.jpg" alt="Interior of a small café with people at tables">
            <figcaption>The former Halifax branch reopened in November as a café and post office counter.</figcaption>
          </figure>

          <h2 id="s3">What they bought</h2>
          <p>Eleven units, two flats above, and a yard behind that had been used for parking since the sixties. Rents were set at what the society calls &#8220;the level a small business can actually pay&#8221; &#8212; roughly 30% below the previous asking rate, and index-linked rather than reviewed upwards every three years.</p>
          <ul>
            <li>Nine units now let, two held for seasonal traders</li>
            <li>Both flats let at local housing allowance rates</li>
            <li>The yard is a market on Saturdays and parking the rest of the week</li>
          </ul>

          <h2 id="s4">Does it work?</h2>
          <p>Financially, just about. The society broke even in its second year and expects a small surplus in its third, which goes back into the buildings rather than to shareholders. Nobody involved describes it as a business success, and several people were keen to stress that it is not a model that transfers everywhere.</p>
          <p>What it has changed is subtler. The empty units are the thing people mention, but the treasurer pointed at something else: &#8220;When the roof leaked last winter, four people rang me before it got as far as the shop floor. That never used to happen. It wasn&#8217;t theirs.&#8221;</p>
        </div>

        <hr class="my-6">

        <div class="d-flex flex-wrap align-items-center gap-3">
          <img class="author-chip" style="width:3rem;height:3rem" src="img/author-1.jpg" alt="" width="200" height="200">
          <div style="max-width:32rem">
            <p class="fw-semibold mb-1">Daniel Osei</p>
            <p class="fg-2 fs-sm mb-0">Writes about cities and infrastructure. Previously at the Yorkshire Post. Based in Leeds.</p>
          </div>
        </div>
      </div>
    </div>

    <section class="mt-9">
      <div class="section-rule"><h2>More from Cities</h2></div>
      <div class="row g-4">
        <div class="md:col-4"><article class="story"><div class="story-media"><img src="img/post-1.jpg" alt="Shelves of books" width="800" height="500" loading="lazy"></div><h3 class="headline fs-lg mb-2"><a href="article.html">What a library is for when nobody borrows books</a></h3><p class="byline mb-0">Priya Raman &#183; 8 min</p></article></div>
        <div class="md:col-4"><article class="story"><div class="story-media"><img src="img/post-6.jpg" alt="A bicycle against a wall" width="800" height="500" loading="lazy"></div><h3 class="headline fs-lg mb-2"><a href="article.html">Everyone wants the cycle lane</a></h3><p class="byline mb-0">Priya Raman &#183; 9 min</p></article></div>
        <div class="md:col-4"><article class="story"><div class="story-media"><img src="img/post-4.jpg" alt="Hand tools on a bench" width="800" height="500" loading="lazy"></div><h3 class="headline fs-lg mb-2"><a href="article.html">Repair caf&#233;s are fixing more than kettles</a></h3><p class="byline mb-0">Marta Kowalczyk &#183; 10 min</p></article></div>
      </div>
    </section>
  </div>
</main>

<footer class="site-footer bg-2 py-6 mt-9">
  <div class="container d-flex flex-wrap justify-content-between align-items-center gap-3">
    <p class="fg-3 fs-xs mb-0">&copy; <span data-year>2026</span> Pressroom. A free template for uicookies.</p>
    <p class="fg-3 fs-xs mb-0">Built with Bootstrap 6.0.0-alpha1</p>
  </div>
</footer>

<dialog class="drawer drawer-top" tabindex="-1" id="searchDrawer" aria-labelledby="searchDrawerLabel">
  <div class="drawer-header">
    <h5 class="drawer-title" id="searchDrawerLabel">Search the archive</h5>
    <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
  </div>
  <div class="drawer-body">
    <div class="form-control form-adorn mb-4">
      <div class="form-adorn-icon">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 4 4" stroke-linecap="round"/></svg>
      </div>
      <input type="search" class="form-ghost" placeholder="Search 4,200 articles…" aria-label="Search articles">
    </div>
    <p class="kicker mb-2">Recent searches</p>
    <div class="d-flex flex-wrap gap-2">
      <a class="chip" href="#cities">high street</a><a class="chip" href="#making">repair</a>
      <a class="chip" href="#cities">planning</a><a class="chip" href="#culture">heritage</a>
    </div>
  </div>
</dialog>

<script type="module" src="assets/js/main.js"></script>
</body>
</html>