govuk_publishing_components 51.2.1 → 52.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +0 -7
- data/app/views/govuk_publishing_components/components/_add_another.html.erb +10 -6
- data/app/views/govuk_publishing_components/components/_copy_to_clipboard.html.erb +6 -2
- data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +1 -5
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +0 -2
- data/app/views/govuk_publishing_components/components/docs/add_another.yml +1 -1
- data/app/views/govuk_publishing_components/components/docs/copy_to_clipboard.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/govspeak.yml +685 -566
- data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml +0 -16
- data/app/views/govuk_publishing_components/components/docs/layout_super_navigation_header.yml +1 -7
- data/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb +6 -2
- data/app/views/govuk_publishing_components/components/layout_for_public/_layout_super_navigation_header_homepage.html.erb +0 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +3 -3
|
@@ -21,7 +21,7 @@ accessibility_excluded_rules:
|
|
|
21
21
|
- landmark-complementary-is-top-level # Statistic headlines are generating an aside element which can not be a top level in the examples
|
|
22
22
|
uses_component_wrapper_helper: true
|
|
23
23
|
examples:
|
|
24
|
-
|
|
24
|
+
default:
|
|
25
25
|
data:
|
|
26
26
|
block: |
|
|
27
27
|
<h2>This is a title</h2>
|
|
@@ -35,433 +35,164 @@ examples:
|
|
|
35
35
|
<p>This is some body text with <a href="https://example.com">a link</a>.</p>
|
|
36
36
|
context:
|
|
37
37
|
dark_background: true
|
|
38
|
-
|
|
39
|
-
description:
|
|
38
|
+
common_elements:
|
|
39
|
+
description: An example of many of the elements in the next sections shown together to demonstrate their spacing.
|
|
40
40
|
data:
|
|
41
|
-
margin_bottom: 9
|
|
42
41
|
block: |
|
|
43
|
-
<h2>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
block: |
|
|
48
|
-
<h2>This is a h2 title</h2>
|
|
49
|
-
<h3>This is a h3 title</h3>
|
|
50
|
-
<h4>This is a h4 title</h4>
|
|
51
|
-
<h5>This is a h5 title</h5>
|
|
52
|
-
<h6>This is a h6 title</h6>
|
|
53
|
-
lists:
|
|
54
|
-
data:
|
|
55
|
-
block: |
|
|
56
|
-
<h2>ordered list:</h2>
|
|
57
|
-
<ol>
|
|
58
|
-
<li>one</li>
|
|
59
|
-
<li>two</li>
|
|
60
|
-
<li>three</li>
|
|
61
|
-
</ol>
|
|
62
|
-
<h2>unordered list:</h2>
|
|
42
|
+
<h2>Heading 2</h2>
|
|
43
|
+
<p>Paragraph of text, containing some words, such as the word 'words'. I know all the words.</p>
|
|
44
|
+
<h3>Heading 3</h3>
|
|
45
|
+
<p>Another paragraph of text, containing some more words, now including 'including'. These words are longer and more exciting, particularly 'exciting', which is genuinely a thrill to see on such a page as this.</p>
|
|
63
46
|
<ul>
|
|
64
|
-
<li>
|
|
65
|
-
<li>
|
|
66
|
-
<li>
|
|
47
|
+
<li>An unordered list item.</li>
|
|
48
|
+
<li>Another unordered list item.</li>
|
|
49
|
+
<li>Yet another unordered list item.</li>
|
|
67
50
|
</ul>
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
51
|
+
<p>A paragraph of text following the list. I'm not going to talk about the words anymore.</p>
|
|
52
|
+
<blockquote>
|
|
53
|
+
<p>This text is inside a blockquote.</p>
|
|
54
|
+
</blockquote>
|
|
55
|
+
<p>Yet another paragraph of text. This is starting to sound familiar.</p>
|
|
72
56
|
<ol>
|
|
73
57
|
<li>
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
<li>two</li>
|
|
77
|
-
</ul>
|
|
58
|
+
<p>An ordered list, this time containing paragraphs in the list items.</p>
|
|
59
|
+
<p>It's not common that this happens, but it does occur and we need to be aware of it and make sure the layout works consistently.</p>
|
|
78
60
|
</li>
|
|
79
|
-
<li>three</li>
|
|
80
|
-
</ol>
|
|
81
|
-
<h2>unordered list:</h2>
|
|
82
|
-
<ul>
|
|
83
61
|
<li>
|
|
84
|
-
<
|
|
85
|
-
<li>one</li>
|
|
86
|
-
<li>two</li>
|
|
87
|
-
</ul>
|
|
62
|
+
<p>Still an ordered list, also containing a paragraph.</p>
|
|
88
63
|
</li>
|
|
89
|
-
<li>three</li>
|
|
90
|
-
</ul>
|
|
91
|
-
ordered_lists_types:
|
|
92
|
-
description: |
|
|
93
|
-
Govspeak/markdown does not generate HTML with type and start attributes,
|
|
94
|
-
however we still provide support for them as some advanced users write
|
|
95
|
-
HTML directly to achieve the list formatting.
|
|
96
|
-
data:
|
|
97
|
-
block: |
|
|
98
|
-
<h2>Lowercase alphabetical list</h2>
|
|
99
|
-
<ol type="a">
|
|
100
|
-
<li>one</li>
|
|
101
|
-
<li>two</li>
|
|
102
|
-
</ol>
|
|
103
|
-
|
|
104
|
-
<h2>Uppercase alphabetical list</h2>
|
|
105
|
-
<ol type="A">
|
|
106
|
-
<li>one</li>
|
|
107
|
-
<li>two</li>
|
|
108
|
-
</ol>
|
|
109
|
-
|
|
110
|
-
<h2>Lowercase Roman numeral list</h2>
|
|
111
|
-
<ol type="i">
|
|
112
|
-
<li>one</li>
|
|
113
|
-
<li>two</li>
|
|
114
|
-
</ol>
|
|
115
|
-
|
|
116
|
-
<h2>Uppercase Roman numberal list</h2>
|
|
117
|
-
<ol type="I">
|
|
118
|
-
<li>one</li>
|
|
119
|
-
<li>two</li>
|
|
120
|
-
</ol>
|
|
121
|
-
|
|
122
|
-
<h2>Numerical list starting at 3</h2>
|
|
123
|
-
<ol start="3">
|
|
124
|
-
<li>three</li>
|
|
125
|
-
<li>four</li>
|
|
126
|
-
</ol>
|
|
127
|
-
|
|
128
|
-
<h2>Lowercase alphabetical list, starting at 3</h2>
|
|
129
|
-
<ol type="a" start="3">
|
|
130
|
-
<li>three</li>
|
|
131
|
-
<li>four</li>
|
|
132
64
|
</ol>
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
<li>
|
|
140
|
-
|
|
141
|
-
|
|
65
|
+
<h3>Another heading 3</h3>
|
|
66
|
+
<p>And another paragraph.</p>
|
|
67
|
+
<ol class="steps">
|
|
68
|
+
<li>
|
|
69
|
+
<p>This is known as steps.</p>
|
|
70
|
+
</li>
|
|
71
|
+
<li>
|
|
72
|
+
<p>And this too.</p>
|
|
73
|
+
</li>
|
|
142
74
|
</ol>
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
<p>Pupils should be taught to:</p>
|
|
149
|
-
|
|
150
|
-
<ul>
|
|
151
|
-
<li>recognise, find, name and write fractions <span class="fraction">
|
|
152
|
-
<img alt="1/3" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_3-9003d7f3d7cd4433647a5f6525aa7eda.png"></span>
|
|
153
|
-
, <span class="fraction">
|
|
154
|
-
<img alt="1/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_4-b6128849c8da3b46b9cb5a6918cfe084.png"></span>
|
|
155
|
-
, <span class="fraction">
|
|
156
|
-
<img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
|
|
157
|
-
and <span class="fraction">
|
|
158
|
-
<img alt="3/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/3_4-cded12d0389211f864dcb27e640c64d4.png"></span>
|
|
159
|
-
of a length, shape, set of objects or quantity</li>
|
|
160
|
-
<li>write simple fractions, for example <span class="fraction">
|
|
161
|
-
<img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
|
|
162
|
-
of 6 = 3 and recognise the equivalence of <span class="fraction">
|
|
163
|
-
<img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
|
|
164
|
-
and <span class="fraction">
|
|
165
|
-
<img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
|
|
166
|
-
</li>
|
|
167
|
-
</ul>
|
|
168
|
-
<div class="call-to-action">
|
|
169
|
-
<h4>Notes and guidance (non-statutory)</h4>
|
|
170
|
-
|
|
171
|
-
<p>Pupils use fractions as ‘fractions of’ discrete and continuous quantities by solving problems using shapes, objects and quantities. They connect unit fractions to equal sharing and grouping, to numbers when they can be calculated, and to measures, finding fractions of lengths, quantities, sets of objects or shapes. They meet <span class="fraction">
|
|
172
|
-
<img alt="3/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/3_4-cded12d0389211f864dcb27e640c64d4.png"></span>
|
|
173
|
-
as the first example of a non-unit fraction.<br><br>
|
|
174
|
-
Pupils should count in fractions up to 10, starting from any number and using the <span class="fraction">
|
|
175
|
-
<img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
|
|
176
|
-
and <span class="fraction">
|
|
177
|
-
<img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
|
|
178
|
-
equivalence on the number line (for example, 1<span class="fraction">
|
|
179
|
-
<img alt="1/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_4-b6128849c8da3b46b9cb5a6918cfe084.png"></span>
|
|
180
|
-
, 1<span class="fraction">
|
|
181
|
-
<img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
|
|
182
|
-
(or 1<span class="fraction">
|
|
183
|
-
<img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
|
|
184
|
-
), 1<span class="fraction">
|
|
185
|
-
<img alt="3/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/3_4-cded12d0389211f864dcb27e640c64d4.png"></span>
|
|
186
|
-
, 2). This reinforces the concept of fractions as numbers and that they can add up to more than 1.
|
|
75
|
+
<p>And another paragraph.</p>
|
|
76
|
+
<div class="application-notice help-notice">
|
|
77
|
+
<p>
|
|
78
|
+
This is a warning callout box.
|
|
187
79
|
</p>
|
|
188
80
|
</div>
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
</blockquote>
|
|
200
|
-
tables:
|
|
201
|
-
data:
|
|
202
|
-
block: |
|
|
81
|
+
<div class="call-to-action">
|
|
82
|
+
<p>And another paragraph.</p>
|
|
83
|
+
<div class="application-notice help-notice">
|
|
84
|
+
<p>
|
|
85
|
+
This is a warning callout box inside a call to action.
|
|
86
|
+
</p>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
<h3>Heading 3</h3>
|
|
90
|
+
<p>And another paragraph.</p>
|
|
203
91
|
<table>
|
|
204
|
-
<caption>
|
|
92
|
+
<caption>This is a table with data</caption>
|
|
205
93
|
<thead>
|
|
206
94
|
<tr>
|
|
207
|
-
<th>
|
|
208
|
-
<th>
|
|
209
|
-
<th>
|
|
210
|
-
<th>
|
|
95
|
+
<th>Animal</th>
|
|
96
|
+
<th>Size</th>
|
|
97
|
+
<th>Legs</th>
|
|
98
|
+
<th>Rhymes with</th>
|
|
99
|
+
<th>Special abilities</th>
|
|
211
100
|
</tr>
|
|
212
101
|
</thead>
|
|
213
102
|
<tbody>
|
|
214
103
|
<tr>
|
|
215
|
-
<th>
|
|
216
|
-
<td>
|
|
217
|
-
<td>
|
|
218
|
-
<td>
|
|
219
|
-
|
|
220
|
-
<tr>
|
|
221
|
-
<th>Clinically vulnerable people</th>
|
|
222
|
-
<td>People considered to be at higher risk of severe illness from COVID-19. Clinically vulnerable people include the following: people aged 70 or older, people with liver disease, people with diabetes, pregnant women and others.</td>
|
|
223
|
-
<td>Stay at home as much as possible. If you do go out, take particular care to minimise contact with others outside your household.</td>
|
|
224
|
-
<td>Range of support available while measures in place, including by local authorities and through voluntary and community groups. Support is available via the NHS Volunteer Responders app.</td>
|
|
104
|
+
<th>Sheep</th>
|
|
105
|
+
<td>Medium</td>
|
|
106
|
+
<td>Four</td>
|
|
107
|
+
<td>Jeep, heap, deep, sleep, keep.</td>
|
|
108
|
+
<td>Growing wool on itself that can be harvested and used for clothing.</td>
|
|
225
109
|
</tr>
|
|
226
110
|
<tr>
|
|
227
|
-
<th>
|
|
228
|
-
<td>
|
|
229
|
-
<td>
|
|
230
|
-
<td>
|
|
111
|
+
<th>Cow</th>
|
|
112
|
+
<td>Large</td>
|
|
113
|
+
<td>Four</td>
|
|
114
|
+
<td>Now, how, bow, wow.</td>
|
|
115
|
+
<td>Has four stomachs.</td>
|
|
231
116
|
</tr>
|
|
232
117
|
</tbody>
|
|
233
118
|
</table>
|
|
234
|
-
|
|
119
|
+
<p>This is a paragraph, and now for an address.</p>
|
|
120
|
+
<div class="address">
|
|
121
|
+
<div class="adr org fn">
|
|
122
|
+
<p>
|
|
123
|
+
First line of address
|
|
124
|
+
<br>Second line of address
|
|
125
|
+
<br>75 This street
|
|
126
|
+
<br>United Kingdom
|
|
127
|
+
<br>Phone: 07123456789
|
|
128
|
+
<br>
|
|
129
|
+
</p>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
<p>This is a paragraph, and now for a contact.</p>
|
|
133
|
+
<div class="contact" id="contact_1016">
|
|
134
|
+
<div class="content">
|
|
135
|
+
<div class="vcard contact-inner">
|
|
136
|
+
<p>Media enquiries</p>
|
|
137
|
+
<p class="adr">
|
|
138
|
+
<span class="street-address">2 Marsham Street<br>London</span><br>
|
|
139
|
+
<span class="postal-code">SW1P 4DF</span>
|
|
140
|
+
</p>
|
|
141
|
+
<div class="email-url-number">
|
|
142
|
+
<p class="tel"><span class="type">Press enquiries</span> 020 7XXX XXXX</p>
|
|
143
|
+
<p class="tel"><span class="type">Out of hours</span> 020 7XXX XXXX</p>
|
|
144
|
+
</div>
|
|
145
|
+
<p class="comments">A comment about the contact</p>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
<p>An attachment as a block</p>
|
|
150
|
+
<%= render "govuk_publishing_components/components/attachment",
|
|
151
|
+
attachment: { url: "https://example.com/file.odt",
|
|
152
|
+
title: "Attachment",
|
|
153
|
+
file_size: 1024,
|
|
154
|
+
content_type: "application/vnd.oasis.opendocument.text",
|
|
155
|
+
alternative_format_contact_email: "defra.helpline@defra.gsi.gov.uk" }
|
|
156
|
+
%>
|
|
157
|
+
<div class="example">
|
|
158
|
+
<p>
|
|
159
|
+
<strong>Example</strong>
|
|
160
|
+
This is an indented example block.<br/>
|
|
161
|
+
It may span multiple lines, <a href="#">contain links</a>.
|
|
162
|
+
</p>
|
|
163
|
+
<p>
|
|
164
|
+
It may even span multiple paragraphs.
|
|
165
|
+
</p>
|
|
166
|
+
</div>
|
|
167
|
+
<p>This is another paragraph.</p>
|
|
168
|
+
<div class="application-notice info-notice">
|
|
169
|
+
<p>
|
|
170
|
+
This is an information callout.
|
|
171
|
+
</p>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="application-notice help-notice">
|
|
174
|
+
<p>
|
|
175
|
+
This is a warning callout.
|
|
176
|
+
</p>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="form-download">
|
|
179
|
+
<p><a href="http://example.com/" title="Example form" rel="external">An example form download link.</a></p>
|
|
180
|
+
</div>
|
|
181
|
+
<p>This is a text with a footnote<sup id="fnref:1b"><a href="#fn:1b" class="footnote">1</a></sup>.</p>
|
|
182
|
+
<div class="footnotes">
|
|
183
|
+
<ol>
|
|
184
|
+
<li id="fn:1b">
|
|
185
|
+
<p>And here is the definition. <a href="#fnref:1b" class="reversefootnote">↩</a></p>
|
|
186
|
+
</li>
|
|
187
|
+
<li id="fn:2b">
|
|
188
|
+
<a href="https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/deaths/datasets/weeklyprovisionalfiguresondeathsregisteredinenglandandwales" class="govuk-link">https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/deaths/datasets/weeklyprovisionalfiguresondeathsregisteredinenglandandwales</a>
|
|
189
|
+
<a href="#fnref:2b" class="govuk-link">↩</a>
|
|
190
|
+
</li>
|
|
191
|
+
</ol>
|
|
192
|
+
</div>
|
|
193
|
+
rtl_block:
|
|
235
194
|
data:
|
|
236
|
-
|
|
237
|
-
<table>
|
|
238
|
-
<thead>
|
|
239
|
-
<tr>
|
|
240
|
-
<th scope="col">Default aligned</th>
|
|
241
|
-
<th class="cell-text-left" scope="col">Left aligned</th>
|
|
242
|
-
<th class="cell-text-center" scope="col">Center aligned</th>
|
|
243
|
-
<th class="cell-text-right" scope="col">Right aligned</th>
|
|
244
|
-
</tr>
|
|
245
|
-
</thead>
|
|
246
|
-
<tbody>
|
|
247
|
-
<tr>
|
|
248
|
-
<td>First body part</td>
|
|
249
|
-
<td class="cell-text-left">Second cell</td>
|
|
250
|
-
<td class="cell-text-center">Third cell</td>
|
|
251
|
-
<td class="cell-text-right">fourth cell</td>
|
|
252
|
-
</tr>
|
|
253
|
-
</tbody>
|
|
254
|
-
</table>
|
|
255
|
-
charts:
|
|
256
|
-
description: |
|
|
257
|
-
The Government Statistical Service (GSS) guidance recommends [a limit of four categories as best practice for basic data visualisations](https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5).
|
|
258
|
-
|
|
259
|
-
Note that charts which have up to 7 categories, [chart with colours](http://govuk-publishing-components.dev.gov.uk/component-guide/govspeak/chart_with_colours/preview), for example, will display subsequent bars in `#3d3d3d`, `#a285d1` and the 7th bar in the default colour of `#0b0c0c` and will still meet the colour contrast requirements for adjacent colours.
|
|
260
|
-
Charts that have 8 or more categories will display additional bars in the default colour and will not meet colour contrast requirements for adjacent colours.
|
|
261
|
-
data:
|
|
262
|
-
block: |
|
|
263
|
-
<table class='js-barchart-table mc-auto-outdent'>
|
|
264
|
-
<caption>A table with numerical data</caption>
|
|
265
|
-
<tbody>
|
|
266
|
-
<tr>
|
|
267
|
-
<td>row 1</td><td>10</td>
|
|
268
|
-
</tr>
|
|
269
|
-
<tr>
|
|
270
|
-
<td>row 2</td><td>15</td>
|
|
271
|
-
</tr>
|
|
272
|
-
<tr>
|
|
273
|
-
<td>row 3</td><td>2</td>
|
|
274
|
-
</tr>
|
|
275
|
-
<tr>
|
|
276
|
-
<td>row 4</td><td>48</td>
|
|
277
|
-
</tr>
|
|
278
|
-
</tbody>
|
|
279
|
-
</table>
|
|
280
|
-
chart_with_colours:
|
|
281
|
-
data:
|
|
282
|
-
block: |
|
|
283
|
-
<table class="js-barchart-table mc-auto-outdent">
|
|
284
|
-
<thead>
|
|
285
|
-
<tr>
|
|
286
|
-
<th scope="col">Number position</th>
|
|
287
|
-
<th scope="col">Apples</th>
|
|
288
|
-
<th scope="col">Oranges</th>
|
|
289
|
-
<th scope="col">Bananas</th>
|
|
290
|
-
<th scope="col">Pears</th>
|
|
291
|
-
<th scope="col">Grapes</th>
|
|
292
|
-
<th scope="col">Strawberries</th>
|
|
293
|
-
<th scope="col">Plums</th>
|
|
294
|
-
</tr>
|
|
295
|
-
</thead>
|
|
296
|
-
<tbody>
|
|
297
|
-
<tr>
|
|
298
|
-
<td>Numbers inside bar</td>
|
|
299
|
-
<td>16</td>
|
|
300
|
-
<td>48</td>
|
|
301
|
-
<td>39</td>
|
|
302
|
-
<td>50</td>
|
|
303
|
-
<td>24</td>
|
|
304
|
-
<td>10</td>
|
|
305
|
-
<td>62</td>
|
|
306
|
-
</tr>
|
|
307
|
-
<tr>
|
|
308
|
-
<td>Numbers outside bar</td>
|
|
309
|
-
<td>2</td>
|
|
310
|
-
<td>1</td>
|
|
311
|
-
<td>2</td>
|
|
312
|
-
<td>1</td>
|
|
313
|
-
<td>1</td>
|
|
314
|
-
<td>2</td>
|
|
315
|
-
<td>1</td>
|
|
316
|
-
</tr>
|
|
317
|
-
</tbody>
|
|
318
|
-
</table>
|
|
319
|
-
stacked_chart:
|
|
320
|
-
data:
|
|
321
|
-
block: |
|
|
322
|
-
<table class="js-barchart-table mc-stacked mc-auto-outdent">
|
|
323
|
-
<thead>
|
|
324
|
-
<tr>
|
|
325
|
-
<th scope="col">Colours</th>
|
|
326
|
-
<th scope="col">Fruits</th>
|
|
327
|
-
<th scope="col">Vegetables</th>
|
|
328
|
-
<th scope="col">Beans</th>
|
|
329
|
-
<th scope="col">Nuts</th>
|
|
330
|
-
<th scope="col">Total</th>
|
|
331
|
-
</tr>
|
|
332
|
-
</thead>
|
|
333
|
-
<tbody>
|
|
334
|
-
<tr>
|
|
335
|
-
<td>Red</td>
|
|
336
|
-
<td>23</td>
|
|
337
|
-
<td>9</td>
|
|
338
|
-
<td>2</td>
|
|
339
|
-
<td>1</td>
|
|
340
|
-
<td>35</td>
|
|
341
|
-
</tr>
|
|
342
|
-
<tr>
|
|
343
|
-
<td>Green</td>
|
|
344
|
-
<td>5</td>
|
|
345
|
-
<td>33</td>
|
|
346
|
-
<td>8</td>
|
|
347
|
-
<td>0</td>
|
|
348
|
-
<td>46</td>
|
|
349
|
-
</tr>
|
|
350
|
-
<tr>
|
|
351
|
-
<td>Yellow</td>
|
|
352
|
-
<td>2</td>
|
|
353
|
-
<td>10</td>
|
|
354
|
-
<td>0</td>
|
|
355
|
-
<td>15</td>
|
|
356
|
-
<td>27</td>
|
|
357
|
-
</tr>
|
|
358
|
-
</tbody>
|
|
359
|
-
</table>
|
|
360
|
-
chart_with_multiple_headings:
|
|
361
|
-
data:
|
|
362
|
-
block: |
|
|
363
|
-
<table id="multiple-table-chart" class="js-barchart-table mc-multiple">
|
|
364
|
-
<caption>Multiple Table</caption>
|
|
365
|
-
<thead>
|
|
366
|
-
<tr><th>Some Data</th><th>YES</th><th>NO</th><th>MAYBE</th></tr>
|
|
367
|
-
</thead>
|
|
368
|
-
<tbody>
|
|
369
|
-
<tr><th>Testing One</th><td>5</td><td>6</td><td>11</td></tr>
|
|
370
|
-
<tr><th>Testing Two</th><td>6</td><td>2</td><td>8</td></tr>
|
|
371
|
-
<tr><th>Testing Three</th><td>3</td><td>9</td><td>12</td></tr>
|
|
372
|
-
</tbody>
|
|
373
|
-
</table>
|
|
374
|
-
address:
|
|
375
|
-
data:
|
|
376
|
-
block: |
|
|
377
|
-
<div class="address">
|
|
378
|
-
<div class="adr org fn">
|
|
379
|
-
<p>
|
|
380
|
-
First line of address
|
|
381
|
-
<br>Second line of address
|
|
382
|
-
<br>75 This street
|
|
383
|
-
<br>United Kindom
|
|
384
|
-
<br>Phone: 07123456789
|
|
385
|
-
<br>
|
|
386
|
-
</p>
|
|
387
|
-
</div>
|
|
388
|
-
</div>
|
|
389
|
-
<p>Addresses are generated when using the `$A` markdown pattern.</p>
|
|
390
|
-
contact:
|
|
391
|
-
data:
|
|
392
|
-
block: |
|
|
393
|
-
<div class="contact" id="contact_1017">
|
|
394
|
-
<div class="content">
|
|
395
|
-
<div class="vcard contact-inner">
|
|
396
|
-
<p>Media enquiries</p>
|
|
397
|
-
<p class="adr">
|
|
398
|
-
<span class="street-address">2 Marsham Street<br>London</span><br>
|
|
399
|
-
<span class="postal-code">SW1P 4DF</span>
|
|
400
|
-
</p>
|
|
401
|
-
<div class="email-url-number">
|
|
402
|
-
<p class="tel"><span class="type">Press enquiries</span> 020 7XXX XXXX</p>
|
|
403
|
-
<p class="tel"><span class="type">Out of hours</span> 020 7XXX XXXX</p>
|
|
404
|
-
</div>
|
|
405
|
-
<p class="comments">A comment about the contact</p>
|
|
406
|
-
</div>
|
|
407
|
-
</div>
|
|
408
|
-
</div>
|
|
409
|
-
contact_with_surrounding_text:
|
|
410
|
-
data:
|
|
411
|
-
block: |
|
|
412
|
-
<h2>This is a title</h2>
|
|
413
|
-
<div class="contact" id="contact_1018">
|
|
414
|
-
<div class="content">
|
|
415
|
-
<div class="vcard contact-inner">
|
|
416
|
-
<p>Media enquiries</p>
|
|
417
|
-
<p class="adr">
|
|
418
|
-
<span class="street-address">2 Marsham Street<br>London</span><br>
|
|
419
|
-
<span class="postal-code">SW1P 4DF</span>
|
|
420
|
-
</p>
|
|
421
|
-
<div class="email-url-number">
|
|
422
|
-
<p class="tel"><span class="type">Press enquiries</span> 020 7XXX XXXX</p>
|
|
423
|
-
<p class="tel"><span class="type">Out of hours</span> 020 7XXX XXXX</p>
|
|
424
|
-
</div>
|
|
425
|
-
<p class="comments">A comment about the contact</p>
|
|
426
|
-
</div>
|
|
427
|
-
</div>
|
|
428
|
-
</div>
|
|
429
|
-
<p>This is a paragraph.</p>
|
|
430
|
-
<div class="contact" id="contact_1019">
|
|
431
|
-
<div class="content">
|
|
432
|
-
<div class="vcard contact-inner">
|
|
433
|
-
<p>Media enquiries</p>
|
|
434
|
-
<p class="adr">
|
|
435
|
-
<span class="street-address">2 Marsham Street<br>London</span><br>
|
|
436
|
-
<span class="postal-code">SW1P 4DF</span>
|
|
437
|
-
</p>
|
|
438
|
-
<div class="email-url-number">
|
|
439
|
-
<p class="tel"><span class="type">Press enquiries</span> 020 7XXX XXXX</p>
|
|
440
|
-
<p class="tel"><span class="type">Out of hours</span> 020 7XXX XXXX</p>
|
|
441
|
-
</div>
|
|
442
|
-
<p class="comments">A comment about the contact</p>
|
|
443
|
-
</div>
|
|
444
|
-
</div>
|
|
445
|
-
</div>
|
|
446
|
-
footnotes:
|
|
447
|
-
data:
|
|
448
|
-
block: |
|
|
449
|
-
<p>This is a text with a footnote<sup id="fnref:1a"><a href="#fn:1a" class="footnote">1</a></sup>.</p>
|
|
450
|
-
|
|
451
|
-
<div class="footnotes">
|
|
452
|
-
<ol>
|
|
453
|
-
<li id="fn:1a">
|
|
454
|
-
<p>And here is the definition. <a href="#fnref:1a" class="reversefootnote">↩</a></p>
|
|
455
|
-
</li>
|
|
456
|
-
<li id="fn:2">
|
|
457
|
-
<a href="https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/deaths/datasets/weeklyprovisionalfiguresondeathsregisteredinenglandandwales" class="govuk-link">https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/deaths/datasets/weeklyprovisionalfiguresondeathsregisteredinenglandandwales</a>
|
|
458
|
-
<a href="#fnref:2" class="govuk-link">↩</a>
|
|
459
|
-
</li>
|
|
460
|
-
</ol>
|
|
461
|
-
</div>
|
|
462
|
-
rtl_block:
|
|
463
|
-
data:
|
|
464
|
-
direction: rtl
|
|
195
|
+
direction: rtl
|
|
465
196
|
block: |
|
|
466
197
|
<p>قال وزير الخارجية، ويليام هيغ:</p>
|
|
467
198
|
<blockquote>
|
|
@@ -502,124 +233,39 @@ examples:
|
|
|
502
233
|
</tr>
|
|
503
234
|
</tbody>
|
|
504
235
|
</table>
|
|
505
|
-
|
|
506
|
-
data:
|
|
507
|
-
block: |
|
|
508
|
-
<p>This content has a YouTube video link, converted to an accessible embedded player by component JavaScript.</p>
|
|
509
|
-
<p><a href="https://www.youtube.com/watch?v=y6hbrS3DheU">Operations: a developer's guide, by Anna Shipman</a></p>
|
|
510
|
-
with_youtube_livestream:
|
|
236
|
+
address:
|
|
511
237
|
data:
|
|
512
238
|
block: |
|
|
513
|
-
<
|
|
514
|
-
|
|
515
|
-
|
|
239
|
+
<div class="address">
|
|
240
|
+
<div class="adr org fn">
|
|
241
|
+
<p>
|
|
242
|
+
First line of address
|
|
243
|
+
<br>Second line of address
|
|
244
|
+
<br>75 This street
|
|
245
|
+
<br>United Kingdom
|
|
246
|
+
<br>Phone: 07123456789
|
|
247
|
+
<br>
|
|
248
|
+
</p>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
<p>Addresses are generated when using the `$A` markdown pattern.</p>
|
|
252
|
+
attachment_link:
|
|
253
|
+
description: Attachment link component rendered within Govspeak
|
|
516
254
|
data:
|
|
517
|
-
disable_youtube_expansions: true
|
|
518
255
|
block: |
|
|
519
|
-
<p>
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
between October and December 2015</p>
|
|
533
|
-
</div>
|
|
534
|
-
specialist_content:
|
|
535
|
-
data:
|
|
536
|
-
block: |
|
|
537
|
-
<h2 id="bisphosphonates">Bisphosphonates</h2>
|
|
538
|
-
<p>Bisphosphonates are used to treat osteoporosis, Paget’s disease, and as part of some cancer regimens, particularly for metastatic bone cancer and multiple myeloma. Individual bisphosphonates have different indications (see individual Summaries of Product Characteristics<sup id="fnref:1"><a href="#fn:1" class="footnote">1</a></sup>). The following bisphosphonates are available in the UK:</p>
|
|
539
|
-
|
|
540
|
-
<ul>
|
|
541
|
-
<li>Alendronic acid</li>
|
|
542
|
-
<li>Ibandronic acid</li>
|
|
543
|
-
<li>Pamidronate disodium</li>
|
|
544
|
-
<li>Risedronate sodium</li>
|
|
545
|
-
<li>Sodium clodronate</li>
|
|
546
|
-
<li>Zoledronic acid</li>
|
|
547
|
-
</ul>
|
|
548
|
-
|
|
549
|
-
<h2 id="osteonecrosis-of-the-external-auditory-canal">Osteonecrosis of the external auditory canal</h2>
|
|
550
|
-
<p>Benign idiopathic osteonecrosis of the external auditory canal is a rare condition that can occur in the absence of antiresorptive therapy and is sometimes associated with local trauma.</p>
|
|
551
|
-
|
|
552
|
-
<div class="call-to-action">
|
|
553
|
-
<p>Advice for healthcare professionals:</p>
|
|
554
|
-
<ul>
|
|
555
|
-
<li>The possibility of osteonecrosis of the external auditory canal should be considered in patients receiving bisphosphonates who present with ear symptoms, including chronic ear infections, or in patients with suspected cholesteatoma</li>
|
|
556
|
-
<li>Possible risk factors include steroid use and chemotherapy, with or without local risk factors such as infection or trauma</li>
|
|
557
|
-
<li>Patients should be advised to report any ear pain, discharge from the ear, or an ear infection during bisphosphonate treatment</li>
|
|
558
|
-
<li>Report any cases of osteonecrosis of the external auditory canal suspected to be associated with bisphosphonates or any other medicines, including denosumab, on a <a rel="external" href="http://www.mhra.gov.uk/yellowcard">Yellow Card</a>
|
|
559
|
-
</li>
|
|
560
|
-
</ul>
|
|
561
|
-
</div>
|
|
562
|
-
|
|
563
|
-
<h2 id="evidence-for-an-association-with-bisphosphonate-treatment">Evidence for an association with bisphosphonate treatment</h2>
|
|
564
|
-
<p>Evidence from the clinical literature and from cases reported to medicines regulators, including one report received via the UK Yellow Card scheme, supports a causal association between bisphosphonates and osteonecrosis of the external auditory canal. Product information is being updated to include advice for healthcare professionals and patients.</p>
|
|
565
|
-
|
|
566
|
-
<p>A total of 29 reports indicative of osteonecrosis of the external auditory canal in association with bisphosphonates have been identified worldwide, including 11 cases reported in the clinical literature.<sup id="fnref:2"><a href="#fn:2" class="footnote">2</a></sup> <sup id="fnref:3"><a href="#fn:3" class="footnote">3</a></sup> <sup id="fnref:4"><a href="#fn:4" class="footnote">4</a></sup> <sup id="fnref:5"><a href="#fn:5" class="footnote">5</a></sup> <sup id="fnref:6"><a href="#fn:6" class="footnote">6</a></sup> <sup id="fnref:7"><a href="#fn:7" class="footnote">7</a></sup> <sup id="fnref:8"><a href="#fn:8" class="footnote">8</a></sup> Cases have been reported with use of both intravenous or oral bisphosphonates for both cancer-related or osteoporosis indications; there is currently insufficient evidence to determine whether there is any increased risk with higher doses used for cancer-related conditions. Most cases were associated with long-term bisphosphonate therapy for 2 years or longer, and most cases had possible risk factors including: steroid use; chemotherapy; and possible local risk factors such as infection, an ear operation, or cotton-bud use. Bilateral osteonecrosis of the external ear canal was reported in some patients, as was osteonecrosis of the jaw.</p>
|
|
567
|
-
|
|
568
|
-
<p>The number of cases of osteonecrosis of the external auditory canal reported in association with bisphosphonates is low compared with the number of cases reported of bisphosphonate-related osteonecrosis of the jaw, a <a href="https://www.gov.uk/drug-safety-update/denosumab-xgeva-prolia-intravenous-bisphosphonates-osteonecrosis-of-the-jaw-further-measures-to-minimise-risk">well-established side effect of bisphosphonates</a>.<sup id="fnref:9"><a href="#fn:9" class="footnote">9</a></sup></p>
|
|
569
|
-
|
|
570
|
-
<h2 id="evidence-for-an-association-with-denosumab-treatment">Evidence for an association with denosumab treatment</h2>
|
|
571
|
-
<p>The available data do not support a causal relation between osteonecrosis of the external auditory canal and denosumab. However, this possible risk is being kept under close review, given that denosumab is <a href="https://www.gov.uk/drug-safety-update/denosumab-xgeva-prolia-intravenous-bisphosphonates-osteonecrosis-of-the-jaw-further-measures-to-minimise-risk">known to be associated with osteonecrosis of the jaw</a>.</p>
|
|
572
|
-
|
|
573
|
-
<p>Article citation: Drug Safety Update volume 9 issue 5 December 2015: 3.</p>
|
|
574
|
-
|
|
575
|
-
<div class="footnotes">
|
|
576
|
-
<ol>
|
|
577
|
-
<li id="fn:1">
|
|
578
|
-
<p>Summaries of Product Characteristics can be found <a rel="external" href="http://www.mhra.gov.uk/spc-pil/index.htm">here on the MHRA website</a> or on the <a rel="external" href="http://www.ema.europa.eu/ema/index.jsp?curl=pages/includes/medicines/medicines_landing_page.jsp">website of the European Medicines Agency</a>, depending whether the medicine has a national or European licence, respectively. <a href="#fnref:1" class="reversefootnote">↩</a></p>
|
|
579
|
-
</li>
|
|
580
|
-
<li id="fn:2">
|
|
581
|
-
<p>Bast F, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed/23202871">Bilateral bisphosphonate-associated osteonecrosis of the external ear canal: a rare case</a>. HNO. 2012; 60: 1127–29 [in German]. <a href="#fnref:2" class="reversefootnote">↩</a></p>
|
|
582
|
-
</li>
|
|
583
|
-
<li id="fn:3">
|
|
584
|
-
<p>Froelich K, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed?term=Froelich+K%5Bauthor%5D+AND+Bisphosphonate&TransSchema=title&cmd=detailssearch">Bisphosphonate-induced osteonecrosis of the external ear canal: a retrospective study</a>. Eur Arch Otorhinolaryngol 2011; 268: 1219–25. <a href="#fnref:3" class="reversefootnote">↩</a></p>
|
|
585
|
-
</li>
|
|
586
|
-
<li id="fn:4">
|
|
587
|
-
<p>Kharazmi M, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed/24220454">Bisphosphonate-associated osteonecrosis of the auditory canal</a>. Br J Oral Maxillofac Surg 2013; 51: e285–87. <a href="#fnref:4" class="reversefootnote">↩</a></p>
|
|
588
|
-
</li>
|
|
589
|
-
<li id="fn:5">
|
|
590
|
-
<p>Polizzotto MN, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed?term=Polizzotto+MN%5Bauthor%5D+AND+Bisphosphonate&TransSchema=title&cmd=detailssearch">Bisphosphonate-associated osteonecrosis of the auditory canal</a>. Br J Haematol 2006; 132: 114. <a href="#fnref:5" class="reversefootnote">↩</a></p>
|
|
591
|
-
</li>
|
|
592
|
-
<li id="fn:6">
|
|
593
|
-
<p>Salzman R, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed/23444468">Osteonecrosis of the external auditory canal associated with oral bisphosphonate therapy: case report and literature review</a>. Otol Neurotol 2013; 34: 209–13. <a href="#fnref:6" class="reversefootnote">↩</a></p>
|
|
594
|
-
</li>
|
|
595
|
-
<li id="fn:7">
|
|
596
|
-
<p>Thorsteinsson AL, et al. <a rel="external" href="http://www.avensonline.org/fulltextarticles/jcmcr-2332-4120-02-0007.html">Bisphosphonate-induced osteonecrosis of the external auditory canal: a case report</a>. J Clin Med Case Reports 2015; 2: 3. <a href="#fnref:7" class="reversefootnote">↩</a></p>
|
|
597
|
-
</li>
|
|
598
|
-
<li id="fn:8">
|
|
599
|
-
<p>Wickham N, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed?term=Wickham%5Bauthor%5D+AND+Bisphosphonate&TransSchema=title&cmd=detailssearch">Bisphosphonate-associated osteonecrosis of the external auditory canal</a>. J Laryngol Otol 2013; 127 (suppl 2): S51–53. <a href="#fnref:8" class="reversefootnote">↩</a></p>
|
|
600
|
-
</li>
|
|
601
|
-
<li id="fn:9">
|
|
602
|
-
<p>Patient reminder cards about the risk of osteonecrosis of the jaw are being introduced for intravenous bisphosphonates and denosumab. The cards will become available at different times for individual products. They are now available for the following products: Prolia (denosumab); Xgeva (denosumab); Aclasta (zoledronic acid); Zometa (zoledronic acid); zoledronic acid 5 mg generics and zoledronic acid 4 mg generics. The cards can be viewed <a href="https://www.gov.uk/drug-safety-update/denosumab-xgeva-prolia-intravenous-bisphosphonates-osteonecrosis-of-the-jaw-further-measures-to-minimise-risk">here</a>. <a href="#fnref:9" class="reversefootnote">↩</a></p>
|
|
603
|
-
</li>
|
|
604
|
-
</ol>
|
|
605
|
-
</div>
|
|
606
|
-
attachment_link:
|
|
607
|
-
description: Attachment link component rendered within Govspeak
|
|
608
|
-
data:
|
|
609
|
-
block: |
|
|
610
|
-
<p>
|
|
611
|
-
A reference to my
|
|
612
|
-
<%= render "govuk_publishing_components/components/attachment_link",
|
|
613
|
-
attachment: { url: "https://example.com/file.pdf",
|
|
614
|
-
title: "Attachment",
|
|
615
|
-
file_size: 1024,
|
|
616
|
-
content_type: "application/pdf",
|
|
617
|
-
number_of_pages: 2 }
|
|
618
|
-
%>
|
|
619
|
-
that is in my paragraph.
|
|
620
|
-
</p>
|
|
621
|
-
attachment:
|
|
622
|
-
description: Attachment component rendered within Govspeak
|
|
256
|
+
<p>
|
|
257
|
+
A reference to my
|
|
258
|
+
<%= render "govuk_publishing_components/components/attachment_link",
|
|
259
|
+
attachment: { url: "https://example.com/file.pdf",
|
|
260
|
+
title: "Attachment",
|
|
261
|
+
file_size: 1024,
|
|
262
|
+
content_type: "application/pdf",
|
|
263
|
+
number_of_pages: 2 }
|
|
264
|
+
%>
|
|
265
|
+
that is in my paragraph.
|
|
266
|
+
</p>
|
|
267
|
+
attachment:
|
|
268
|
+
description: Attachment component rendered within Govspeak
|
|
623
269
|
data:
|
|
624
270
|
block: |
|
|
625
271
|
<p>An attachment as a block</p>
|
|
@@ -630,7 +276,16 @@ examples:
|
|
|
630
276
|
file_size: 1024,
|
|
631
277
|
content_type: "application/vnd.oasis.opendocument.text" }
|
|
632
278
|
%>
|
|
633
|
-
|
|
279
|
+
<p>Another attachment as a block</p>
|
|
280
|
+
|
|
281
|
+
<%= render "govuk_publishing_components/components/attachment",
|
|
282
|
+
attachment: { url: "https://example.com/file.odt",
|
|
283
|
+
title: "Attachment",
|
|
284
|
+
file_size: 1024,
|
|
285
|
+
content_type: "application/vnd.oasis.opendocument.text",
|
|
286
|
+
alternative_format_contact_email: "defra.helpline@defra.gsi.gov.uk" }
|
|
287
|
+
%>
|
|
288
|
+
attachment_inline:
|
|
634
289
|
description: Legacy inline attachment embed used by Whitehall and Specialist Publisher
|
|
635
290
|
data:
|
|
636
291
|
block: |
|
|
@@ -806,6 +461,181 @@ examples:
|
|
|
806
461
|
</div>
|
|
807
462
|
</div>
|
|
808
463
|
</section>
|
|
464
|
+
blockquote:
|
|
465
|
+
data:
|
|
466
|
+
block: |
|
|
467
|
+
<blockquote>
|
|
468
|
+
<p>My quote</p>
|
|
469
|
+
<p class="last-child">about things</p>
|
|
470
|
+
</blockquote>
|
|
471
|
+
buttons:
|
|
472
|
+
data:
|
|
473
|
+
block: |
|
|
474
|
+
<p>
|
|
475
|
+
<a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">Button</a>
|
|
476
|
+
<a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
|
|
477
|
+
</p>
|
|
478
|
+
call_to_action:
|
|
479
|
+
data:
|
|
480
|
+
block: |
|
|
481
|
+
<div class="call-to-action">
|
|
482
|
+
<p>Call to action</p>
|
|
483
|
+
</div>
|
|
484
|
+
information_callout:
|
|
485
|
+
data:
|
|
486
|
+
block: |
|
|
487
|
+
<div class="application-notice info-notice">
|
|
488
|
+
<p>
|
|
489
|
+
If you drilled a tunnel straight through the Earth and jumped in, it would take
|
|
490
|
+
you exactly 42 minutes and 12 seconds to get to the other side.
|
|
491
|
+
</p>
|
|
492
|
+
</div>
|
|
493
|
+
warning_callout:
|
|
494
|
+
data:
|
|
495
|
+
block: |
|
|
496
|
+
<div class="application-notice help-notice">
|
|
497
|
+
<p>
|
|
498
|
+
The water in the mouth of a blue whale weighs more than its body.
|
|
499
|
+
</p>
|
|
500
|
+
</div>
|
|
501
|
+
contact:
|
|
502
|
+
data:
|
|
503
|
+
block: |
|
|
504
|
+
<div class="contact" id="contact_1017">
|
|
505
|
+
<div class="content">
|
|
506
|
+
<div class="vcard contact-inner">
|
|
507
|
+
<p>Media enquiries</p>
|
|
508
|
+
<p class="adr">
|
|
509
|
+
<span class="street-address">2 Marsham Street<br>London</span><br>
|
|
510
|
+
<span class="postal-code">SW1P 4DF</span>
|
|
511
|
+
</p>
|
|
512
|
+
<div class="email-url-number">
|
|
513
|
+
<p class="tel"><span class="type">Press enquiries</span> 020 7XXX XXXX</p>
|
|
514
|
+
<p class="tel"><span class="type">Out of hours</span> 020 7XXX XXXX</p>
|
|
515
|
+
</div>
|
|
516
|
+
<p class="comments">A comment about the contact</p>
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
charts:
|
|
521
|
+
description: |
|
|
522
|
+
The Government Statistical Service (GSS) guidance recommends [a limit of four categories as best practice for basic data visualisations](https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5).
|
|
523
|
+
|
|
524
|
+
Note that charts which have up to 7 categories, [chart with colours](http://govuk-publishing-components.dev.gov.uk/component-guide/govspeak/chart_with_colours/preview), for example, will display subsequent bars in `#3d3d3d`, `#a285d1` and the 7th bar in the default colour of `#0b0c0c` and will still meet the colour contrast requirements for adjacent colours.
|
|
525
|
+
Charts that have 8 or more categories will display additional bars in the default colour and will not meet colour contrast requirements for adjacent colours.
|
|
526
|
+
data:
|
|
527
|
+
block: |
|
|
528
|
+
<table class='js-barchart-table mc-auto-outdent'>
|
|
529
|
+
<caption>A table with numerical data</caption>
|
|
530
|
+
<tbody>
|
|
531
|
+
<tr>
|
|
532
|
+
<td>row 1</td><td>10</td>
|
|
533
|
+
</tr>
|
|
534
|
+
<tr>
|
|
535
|
+
<td>row 2</td><td>15</td>
|
|
536
|
+
</tr>
|
|
537
|
+
<tr>
|
|
538
|
+
<td>row 3</td><td>2</td>
|
|
539
|
+
</tr>
|
|
540
|
+
<tr>
|
|
541
|
+
<td>row 4</td><td>48</td>
|
|
542
|
+
</tr>
|
|
543
|
+
</tbody>
|
|
544
|
+
</table>
|
|
545
|
+
chart_with_colours:
|
|
546
|
+
data:
|
|
547
|
+
block: |
|
|
548
|
+
<table class="js-barchart-table mc-auto-outdent">
|
|
549
|
+
<thead>
|
|
550
|
+
<tr>
|
|
551
|
+
<th scope="col">Number position</th>
|
|
552
|
+
<th scope="col">Apples</th>
|
|
553
|
+
<th scope="col">Oranges</th>
|
|
554
|
+
<th scope="col">Bananas</th>
|
|
555
|
+
<th scope="col">Pears</th>
|
|
556
|
+
<th scope="col">Grapes</th>
|
|
557
|
+
<th scope="col">Strawberries</th>
|
|
558
|
+
<th scope="col">Plums</th>
|
|
559
|
+
</tr>
|
|
560
|
+
</thead>
|
|
561
|
+
<tbody>
|
|
562
|
+
<tr>
|
|
563
|
+
<td>Numbers inside bar</td>
|
|
564
|
+
<td>16</td>
|
|
565
|
+
<td>48</td>
|
|
566
|
+
<td>39</td>
|
|
567
|
+
<td>50</td>
|
|
568
|
+
<td>24</td>
|
|
569
|
+
<td>10</td>
|
|
570
|
+
<td>62</td>
|
|
571
|
+
</tr>
|
|
572
|
+
<tr>
|
|
573
|
+
<td>Numbers outside bar</td>
|
|
574
|
+
<td>2</td>
|
|
575
|
+
<td>1</td>
|
|
576
|
+
<td>2</td>
|
|
577
|
+
<td>1</td>
|
|
578
|
+
<td>1</td>
|
|
579
|
+
<td>2</td>
|
|
580
|
+
<td>1</td>
|
|
581
|
+
</tr>
|
|
582
|
+
</tbody>
|
|
583
|
+
</table>
|
|
584
|
+
chart_with_multiple_headings:
|
|
585
|
+
data:
|
|
586
|
+
block: |
|
|
587
|
+
<table id="multiple-table-chart" class="js-barchart-table mc-multiple">
|
|
588
|
+
<caption>Multiple Table</caption>
|
|
589
|
+
<thead>
|
|
590
|
+
<tr><th>Some Data</th><th>YES</th><th>NO</th><th>MAYBE</th></tr>
|
|
591
|
+
</thead>
|
|
592
|
+
<tbody>
|
|
593
|
+
<tr><th>Testing One</th><td>5</td><td>6</td><td>11</td></tr>
|
|
594
|
+
<tr><th>Testing Two</th><td>6</td><td>2</td><td>8</td></tr>
|
|
595
|
+
<tr><th>Testing Three</th><td>3</td><td>9</td><td>12</td></tr>
|
|
596
|
+
</tbody>
|
|
597
|
+
</table>
|
|
598
|
+
chart_stacked:
|
|
599
|
+
data:
|
|
600
|
+
block: |
|
|
601
|
+
<table class="js-barchart-table mc-stacked mc-auto-outdent">
|
|
602
|
+
<thead>
|
|
603
|
+
<tr>
|
|
604
|
+
<th scope="col">Colours</th>
|
|
605
|
+
<th scope="col">Fruits</th>
|
|
606
|
+
<th scope="col">Vegetables</th>
|
|
607
|
+
<th scope="col">Beans</th>
|
|
608
|
+
<th scope="col">Nuts</th>
|
|
609
|
+
<th scope="col">Total</th>
|
|
610
|
+
</tr>
|
|
611
|
+
</thead>
|
|
612
|
+
<tbody>
|
|
613
|
+
<tr>
|
|
614
|
+
<td>Red</td>
|
|
615
|
+
<td>23</td>
|
|
616
|
+
<td>9</td>
|
|
617
|
+
<td>2</td>
|
|
618
|
+
<td>1</td>
|
|
619
|
+
<td>35</td>
|
|
620
|
+
</tr>
|
|
621
|
+
<tr>
|
|
622
|
+
<td>Green</td>
|
|
623
|
+
<td>5</td>
|
|
624
|
+
<td>33</td>
|
|
625
|
+
<td>8</td>
|
|
626
|
+
<td>0</td>
|
|
627
|
+
<td>46</td>
|
|
628
|
+
</tr>
|
|
629
|
+
<tr>
|
|
630
|
+
<td>Yellow</td>
|
|
631
|
+
<td>2</td>
|
|
632
|
+
<td>10</td>
|
|
633
|
+
<td>0</td>
|
|
634
|
+
<td>15</td>
|
|
635
|
+
<td>27</td>
|
|
636
|
+
</tr>
|
|
637
|
+
</tbody>
|
|
638
|
+
</table>
|
|
809
639
|
example:
|
|
810
640
|
data:
|
|
811
641
|
block: |
|
|
@@ -819,35 +649,205 @@ examples:
|
|
|
819
649
|
It may even span multiple paragraphs.
|
|
820
650
|
</p>
|
|
821
651
|
</div>
|
|
822
|
-
|
|
652
|
+
footnotes:
|
|
823
653
|
data:
|
|
824
654
|
block: |
|
|
825
|
-
<
|
|
826
|
-
|
|
655
|
+
<p>This is a text with a footnote<sup id="fnref:1a"><a href="#fn:1a" class="footnote">1</a></sup>.</p>
|
|
656
|
+
|
|
657
|
+
<div class="footnotes">
|
|
658
|
+
<ol>
|
|
659
|
+
<li id="fn:1a">
|
|
660
|
+
<p>And here is the definition. <a href="#fnref:1a" class="reversefootnote">↩</a></p>
|
|
661
|
+
</li>
|
|
662
|
+
<li id="fn:2">
|
|
663
|
+
<a href="https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/deaths/datasets/weeklyprovisionalfiguresondeathsregisteredinenglandandwales" class="govuk-link">https://www.ons.gov.uk/peoplepopulationandcommunity/birthsdeathsandmarriages/deaths/datasets/weeklyprovisionalfiguresondeathsregisteredinenglandandwales</a>
|
|
664
|
+
<a href="#fnref:2" class="govuk-link">↩</a>
|
|
665
|
+
</li>
|
|
666
|
+
</ol>
|
|
827
667
|
</div>
|
|
828
|
-
|
|
668
|
+
form_download:
|
|
829
669
|
data:
|
|
830
670
|
block: |
|
|
831
|
-
<div class="
|
|
832
|
-
<p>
|
|
833
|
-
|
|
834
|
-
|
|
671
|
+
<div class="form-download">
|
|
672
|
+
<p><a href="http://example.com/" title="Example form" rel="external">An example form download link.</a></p>
|
|
673
|
+
</div>
|
|
674
|
+
image_fractions:
|
|
675
|
+
data:
|
|
676
|
+
block: |
|
|
677
|
+
<h3 id="number---fractions-1">Number - fractions</h3>
|
|
678
|
+
|
|
679
|
+
<p>Pupils should be taught to:</p>
|
|
680
|
+
|
|
681
|
+
<ul>
|
|
682
|
+
<li>recognise, find, name and write fractions <span class="fraction">
|
|
683
|
+
<img alt="1/3" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_3-9003d7f3d7cd4433647a5f6525aa7eda.png"></span>
|
|
684
|
+
, <span class="fraction">
|
|
685
|
+
<img alt="1/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_4-b6128849c8da3b46b9cb5a6918cfe084.png"></span>
|
|
686
|
+
, <span class="fraction">
|
|
687
|
+
<img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
|
|
688
|
+
and <span class="fraction">
|
|
689
|
+
<img alt="3/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/3_4-cded12d0389211f864dcb27e640c64d4.png"></span>
|
|
690
|
+
of a length, shape, set of objects or quantity</li>
|
|
691
|
+
<li>write simple fractions, for example <span class="fraction">
|
|
692
|
+
<img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
|
|
693
|
+
of 6 = 3 and recognise the equivalence of <span class="fraction">
|
|
694
|
+
<img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
|
|
695
|
+
and <span class="fraction">
|
|
696
|
+
<img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
|
|
697
|
+
</li>
|
|
698
|
+
</ul>
|
|
699
|
+
<div class="call-to-action">
|
|
700
|
+
<h4>Notes and guidance (non-statutory)</h4>
|
|
701
|
+
|
|
702
|
+
<p>Pupils use fractions as ‘fractions of’ discrete and continuous quantities by solving problems using shapes, objects and quantities. They connect unit fractions to equal sharing and grouping, to numbers when they can be calculated, and to measures, finding fractions of lengths, quantities, sets of objects or shapes. They meet <span class="fraction">
|
|
703
|
+
<img alt="3/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/3_4-cded12d0389211f864dcb27e640c64d4.png"></span>
|
|
704
|
+
as the first example of a non-unit fraction.<br><br>
|
|
705
|
+
Pupils should count in fractions up to 10, starting from any number and using the <span class="fraction">
|
|
706
|
+
<img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
|
|
707
|
+
and <span class="fraction">
|
|
708
|
+
<img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
|
|
709
|
+
equivalence on the number line (for example, 1<span class="fraction">
|
|
710
|
+
<img alt="1/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_4-b6128849c8da3b46b9cb5a6918cfe084.png"></span>
|
|
711
|
+
, 1<span class="fraction">
|
|
712
|
+
<img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
|
|
713
|
+
(or 1<span class="fraction">
|
|
714
|
+
<img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
|
|
715
|
+
), 1<span class="fraction">
|
|
716
|
+
<img alt="3/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/3_4-cded12d0389211f864dcb27e640c64d4.png"></span>
|
|
717
|
+
, 2). This reinforces the concept of fractions as numbers and that they can add up to more than 1.
|
|
835
718
|
</p>
|
|
836
719
|
</div>
|
|
837
|
-
|
|
720
|
+
text_fractions:
|
|
721
|
+
data:
|
|
722
|
+
block: |
|
|
723
|
+
<p>If an image is not available for a particular fraction, then we'll fallback to text based fraction using <code>sup</code>/<code>sub</code>, like this <span class="fraction"><sup>1</sup>⁄<sub>100</sub></span> example.</p>
|
|
724
|
+
highlight_answer:
|
|
725
|
+
description: |
|
|
726
|
+
Used on:
|
|
727
|
+
|
|
728
|
+
* [https://gov.uk/vat-rates](https://gov.uk/vat-rates)
|
|
729
|
+
* [https://gov.uk/junior-individual-savings-accounts](https://gov.uk/junior-individual-savings-accounts)
|
|
730
|
+
* [https://gov.uk/individual-savings-accounts](https://gov.uk/individual-savings-accounts)
|
|
731
|
+
* [https://gov.uk/corporation-tax-rates](https://gov.uk/corporation-tax-rates)
|
|
732
|
+
data:
|
|
733
|
+
block: |
|
|
734
|
+
<div class="highlight-answer">
|
|
735
|
+
<p>The VAT rate is <em>20%</em></p>
|
|
736
|
+
</div>
|
|
737
|
+
<div class="highlight-answer">
|
|
738
|
+
<p>In the 2017 to 2018 tax year, the savings limit for Junior <abbr title="Individual Savings Accounts">ISAs</abbr> is <em>£4,128</em></p>
|
|
739
|
+
</div>
|
|
740
|
+
<div class="highlight-answer">
|
|
741
|
+
<p>In the 2017 to 2018 tax year, the maximum you can save in <abbr title="Individual Savings Accounts">ISAs</abbr> is <em>£20,000</em></p>
|
|
742
|
+
</div>
|
|
743
|
+
heading_levels:
|
|
744
|
+
data:
|
|
745
|
+
block: |
|
|
746
|
+
<h2>This is a h2 title</h2>
|
|
747
|
+
<h3>This is a h3 title</h3>
|
|
748
|
+
<h4>This is a h4 title</h4>
|
|
749
|
+
<h5>This is a h5 title</h5>
|
|
750
|
+
<h6>This is a h6 title</h6>
|
|
751
|
+
image:
|
|
752
|
+
data:
|
|
753
|
+
block: |
|
|
754
|
+
<figure class="image embedded">
|
|
755
|
+
<div class="img">
|
|
756
|
+
<img src="https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/40160/Picture2.jpg" alt="Open water with only mangrove stumps showing above the water. Credit: Blue Ventures-Garth Cripps">
|
|
757
|
+
</div>
|
|
758
|
+
<figcaption>
|
|
759
|
+
<p>Deforested area. Credit: Blue Ventures-Garth Cripps</p>
|
|
760
|
+
</figcaption>
|
|
761
|
+
</figure>
|
|
762
|
+
lists:
|
|
763
|
+
data:
|
|
764
|
+
block: |
|
|
765
|
+
<h2>ordered list:</h2>
|
|
766
|
+
<ol>
|
|
767
|
+
<li>one</li>
|
|
768
|
+
<li>two</li>
|
|
769
|
+
<li>three</li>
|
|
770
|
+
</ol>
|
|
771
|
+
<h2>unordered list:</h2>
|
|
772
|
+
<ul>
|
|
773
|
+
<li>one</li>
|
|
774
|
+
<li>two</li>
|
|
775
|
+
<li>three</li>
|
|
776
|
+
</ul>
|
|
777
|
+
legislative_lists:
|
|
838
778
|
data:
|
|
839
779
|
block: |
|
|
840
|
-
<
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
</
|
|
844
|
-
|
|
845
|
-
|
|
780
|
+
<h2>ordered list:</h2>
|
|
781
|
+
<ol class="legislative-list">
|
|
782
|
+
<li>one</li>
|
|
783
|
+
<li>two</li>
|
|
784
|
+
<li>three</li>
|
|
785
|
+
</ol>
|
|
786
|
+
nested_lists:
|
|
846
787
|
data:
|
|
847
788
|
block: |
|
|
848
|
-
<
|
|
849
|
-
|
|
850
|
-
|
|
789
|
+
<h2>ordered list:</h2>
|
|
790
|
+
<ol>
|
|
791
|
+
<li>
|
|
792
|
+
<ul>
|
|
793
|
+
<li>one</li>
|
|
794
|
+
<li>two</li>
|
|
795
|
+
</ul>
|
|
796
|
+
</li>
|
|
797
|
+
<li>three</li>
|
|
798
|
+
</ol>
|
|
799
|
+
<h2>unordered list:</h2>
|
|
800
|
+
<ul>
|
|
801
|
+
<li>
|
|
802
|
+
<ul>
|
|
803
|
+
<li>one</li>
|
|
804
|
+
<li>two</li>
|
|
805
|
+
</ul>
|
|
806
|
+
</li>
|
|
807
|
+
<li>three</li>
|
|
808
|
+
</ul>
|
|
809
|
+
ordered_lists_types:
|
|
810
|
+
description: |
|
|
811
|
+
Govspeak/markdown does not generate HTML with type and start attributes,
|
|
812
|
+
however we still provide support for them as some advanced users write
|
|
813
|
+
HTML directly to achieve the list formatting.
|
|
814
|
+
data:
|
|
815
|
+
block: |
|
|
816
|
+
<h2>Lowercase alphabetical list</h2>
|
|
817
|
+
<ol type="a">
|
|
818
|
+
<li>one</li>
|
|
819
|
+
<li>two</li>
|
|
820
|
+
</ol>
|
|
821
|
+
|
|
822
|
+
<h2>Uppercase alphabetical list</h2>
|
|
823
|
+
<ol type="A">
|
|
824
|
+
<li>one</li>
|
|
825
|
+
<li>two</li>
|
|
826
|
+
</ol>
|
|
827
|
+
|
|
828
|
+
<h2>Lowercase Roman numeral list</h2>
|
|
829
|
+
<ol type="i">
|
|
830
|
+
<li>one</li>
|
|
831
|
+
<li>two</li>
|
|
832
|
+
</ol>
|
|
833
|
+
|
|
834
|
+
<h2>Uppercase Roman numberal list</h2>
|
|
835
|
+
<ol type="I">
|
|
836
|
+
<li>one</li>
|
|
837
|
+
<li>two</li>
|
|
838
|
+
</ol>
|
|
839
|
+
|
|
840
|
+
<h2>Numerical list starting at 3</h2>
|
|
841
|
+
<ol start="3">
|
|
842
|
+
<li>three</li>
|
|
843
|
+
<li>four</li>
|
|
844
|
+
</ol>
|
|
845
|
+
|
|
846
|
+
<h2>Lowercase alphabetical list, starting at 3</h2>
|
|
847
|
+
<ol type="a" start="3">
|
|
848
|
+
<li>three</li>
|
|
849
|
+
<li>four</li>
|
|
850
|
+
</ol>
|
|
851
851
|
steps:
|
|
852
852
|
data:
|
|
853
853
|
block:
|
|
@@ -862,46 +862,165 @@ examples:
|
|
|
862
862
|
<p>Love numbers.</p>
|
|
863
863
|
</li>
|
|
864
864
|
</ol>
|
|
865
|
-
|
|
866
|
-
description: |
|
|
867
|
-
Used on:
|
|
868
|
-
|
|
869
|
-
* [https://gov.uk/vat-rates](https://gov.uk/vat-rates)
|
|
870
|
-
* [https://gov.uk/junior-individual-savings-accounts](https://gov.uk/junior-individual-savings-accounts)
|
|
871
|
-
* [https://gov.uk/individual-savings-accounts](https://gov.uk/individual-savings-accounts)
|
|
872
|
-
* [https://gov.uk/corporation-tax-rates](https://gov.uk/corporation-tax-rates)
|
|
865
|
+
place:
|
|
873
866
|
data:
|
|
874
867
|
block: |
|
|
875
|
-
<div class="
|
|
876
|
-
<p>
|
|
868
|
+
<div class="place">
|
|
869
|
+
<p>This is a place</p>
|
|
877
870
|
</div>
|
|
878
|
-
|
|
879
|
-
|
|
871
|
+
statistic_headlines:
|
|
872
|
+
data:
|
|
873
|
+
block: |
|
|
874
|
+
<div class="stat-headline">
|
|
875
|
+
<p><em>£6bn</em>
|
|
876
|
+
Total Departmental Expenditure Limit (<abbr title="Departmental Expenditure Limit">DEL</abbr>) in financial year 2015 to 2016</p>
|
|
880
877
|
</div>
|
|
881
|
-
<
|
|
882
|
-
|
|
878
|
+
<p>This includes £5.8 billion Resource <abbr title="Departmental Expenditure Limit">DEL</abbr> and £0.2 billion Capital <abbr title="Departmental Expenditure Limit">DEL</abbr>. In addition, <abbr title="Department for Work and Pensions">DWP</abbr> Annually Managed Expenditure (<abbr title="Annually Managed Expenditure">AME</abbr>) in financial year 2015 to 2016 is £170.5 billion, as forecast by the Office for Budget Responsibility.</p>
|
|
879
|
+
<div class="stat-headline">
|
|
880
|
+
<p>UK employment rate
|
|
881
|
+
<em>74.1%</em>
|
|
882
|
+
between October and December 2015</p>
|
|
883
883
|
</div>
|
|
884
|
-
|
|
884
|
+
specialist_content:
|
|
885
885
|
data:
|
|
886
886
|
block: |
|
|
887
|
-
<
|
|
888
|
-
|
|
887
|
+
<h2 id="bisphosphonates">Bisphosphonates</h2>
|
|
888
|
+
<p>Bisphosphonates are used to treat osteoporosis, Paget’s disease, and as part of some cancer regimens, particularly for metastatic bone cancer and multiple myeloma. Individual bisphosphonates have different indications (see individual Summaries of Product Characteristics<sup id="fnref:1"><a href="#fn:1" class="footnote">1</a></sup>). The following bisphosphonates are available in the UK:</p>
|
|
889
|
+
|
|
890
|
+
<ul>
|
|
891
|
+
<li>Alendronic acid</li>
|
|
892
|
+
<li>Ibandronic acid</li>
|
|
893
|
+
<li>Pamidronate disodium</li>
|
|
894
|
+
<li>Risedronate sodium</li>
|
|
895
|
+
<li>Sodium clodronate</li>
|
|
896
|
+
<li>Zoledronic acid</li>
|
|
897
|
+
</ul>
|
|
898
|
+
|
|
899
|
+
<h2 id="osteonecrosis-of-the-external-auditory-canal">Osteonecrosis of the external auditory canal</h2>
|
|
900
|
+
<p>Benign idiopathic osteonecrosis of the external auditory canal is a rare condition that can occur in the absence of antiresorptive therapy and is sometimes associated with local trauma.</p>
|
|
901
|
+
|
|
902
|
+
<div class="call-to-action">
|
|
903
|
+
<p>Advice for healthcare professionals:</p>
|
|
904
|
+
<ul>
|
|
905
|
+
<li>The possibility of osteonecrosis of the external auditory canal should be considered in patients receiving bisphosphonates who present with ear symptoms, including chronic ear infections, or in patients with suspected cholesteatoma</li>
|
|
906
|
+
<li>Possible risk factors include steroid use and chemotherapy, with or without local risk factors such as infection or trauma</li>
|
|
907
|
+
<li>Patients should be advised to report any ear pain, discharge from the ear, or an ear infection during bisphosphonate treatment</li>
|
|
908
|
+
<li>Report any cases of osteonecrosis of the external auditory canal suspected to be associated with bisphosphonates or any other medicines, including denosumab, on a <a rel="external" href="http://www.mhra.gov.uk/yellowcard">Yellow Card</a>
|
|
909
|
+
</li>
|
|
910
|
+
</ul>
|
|
889
911
|
</div>
|
|
890
|
-
|
|
912
|
+
|
|
913
|
+
<h2 id="evidence-for-an-association-with-bisphosphonate-treatment">Evidence for an association with bisphosphonate treatment</h2>
|
|
914
|
+
<p>Evidence from the clinical literature and from cases reported to medicines regulators, including one report received via the UK Yellow Card scheme, supports a causal association between bisphosphonates and osteonecrosis of the external auditory canal. Product information is being updated to include advice for healthcare professionals and patients.</p>
|
|
915
|
+
|
|
916
|
+
<p>A total of 29 reports indicative of osteonecrosis of the external auditory canal in association with bisphosphonates have been identified worldwide, including 11 cases reported in the clinical literature.<sup id="fnref:2"><a href="#fn:2" class="footnote">2</a></sup> <sup id="fnref:3"><a href="#fn:3" class="footnote">3</a></sup> <sup id="fnref:4"><a href="#fn:4" class="footnote">4</a></sup> <sup id="fnref:5"><a href="#fn:5" class="footnote">5</a></sup> <sup id="fnref:6"><a href="#fn:6" class="footnote">6</a></sup> <sup id="fnref:7"><a href="#fn:7" class="footnote">7</a></sup> <sup id="fnref:8"><a href="#fn:8" class="footnote">8</a></sup> Cases have been reported with use of both intravenous or oral bisphosphonates for both cancer-related or osteoporosis indications; there is currently insufficient evidence to determine whether there is any increased risk with higher doses used for cancer-related conditions. Most cases were associated with long-term bisphosphonate therapy for 2 years or longer, and most cases had possible risk factors including: steroid use; chemotherapy; and possible local risk factors such as infection, an ear operation, or cotton-bud use. Bilateral osteonecrosis of the external ear canal was reported in some patients, as was osteonecrosis of the jaw.</p>
|
|
917
|
+
|
|
918
|
+
<p>The number of cases of osteonecrosis of the external auditory canal reported in association with bisphosphonates is low compared with the number of cases reported of bisphosphonate-related osteonecrosis of the jaw, a <a href="https://www.gov.uk/drug-safety-update/denosumab-xgeva-prolia-intravenous-bisphosphonates-osteonecrosis-of-the-jaw-further-measures-to-minimise-risk">well-established side effect of bisphosphonates</a>.<sup id="fnref:9"><a href="#fn:9" class="footnote">9</a></sup></p>
|
|
919
|
+
|
|
920
|
+
<h2 id="evidence-for-an-association-with-denosumab-treatment">Evidence for an association with denosumab treatment</h2>
|
|
921
|
+
<p>The available data do not support a causal relation between osteonecrosis of the external auditory canal and denosumab. However, this possible risk is being kept under close review, given that denosumab is <a href="https://www.gov.uk/drug-safety-update/denosumab-xgeva-prolia-intravenous-bisphosphonates-osteonecrosis-of-the-jaw-further-measures-to-minimise-risk">known to be associated with osteonecrosis of the jaw</a>.</p>
|
|
922
|
+
|
|
923
|
+
<p>Article citation: Drug Safety Update volume 9 issue 5 December 2015: 3.</p>
|
|
924
|
+
|
|
925
|
+
<div class="footnotes">
|
|
926
|
+
<ol>
|
|
927
|
+
<li id="fn:1">
|
|
928
|
+
<p>Summaries of Product Characteristics can be found <a rel="external" href="http://www.mhra.gov.uk/spc-pil/index.htm">here on the MHRA website</a> or on the <a rel="external" href="http://www.ema.europa.eu/ema/index.jsp?curl=pages/includes/medicines/medicines_landing_page.jsp">website of the European Medicines Agency</a>, depending whether the medicine has a national or European licence, respectively. <a href="#fnref:1" class="reversefootnote">↩</a></p>
|
|
929
|
+
</li>
|
|
930
|
+
<li id="fn:2">
|
|
931
|
+
<p>Bast F, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed/23202871">Bilateral bisphosphonate-associated osteonecrosis of the external ear canal: a rare case</a>. HNO. 2012; 60: 1127–29 [in German]. <a href="#fnref:2" class="reversefootnote">↩</a></p>
|
|
932
|
+
</li>
|
|
933
|
+
<li id="fn:3">
|
|
934
|
+
<p>Froelich K, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed?term=Froelich+K%5Bauthor%5D+AND+Bisphosphonate&TransSchema=title&cmd=detailssearch">Bisphosphonate-induced osteonecrosis of the external ear canal: a retrospective study</a>. Eur Arch Otorhinolaryngol 2011; 268: 1219–25. <a href="#fnref:3" class="reversefootnote">↩</a></p>
|
|
935
|
+
</li>
|
|
936
|
+
<li id="fn:4">
|
|
937
|
+
<p>Kharazmi M, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed/24220454">Bisphosphonate-associated osteonecrosis of the auditory canal</a>. Br J Oral Maxillofac Surg 2013; 51: e285–87. <a href="#fnref:4" class="reversefootnote">↩</a></p>
|
|
938
|
+
</li>
|
|
939
|
+
<li id="fn:5">
|
|
940
|
+
<p>Polizzotto MN, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed?term=Polizzotto+MN%5Bauthor%5D+AND+Bisphosphonate&TransSchema=title&cmd=detailssearch">Bisphosphonate-associated osteonecrosis of the auditory canal</a>. Br J Haematol 2006; 132: 114. <a href="#fnref:5" class="reversefootnote">↩</a></p>
|
|
941
|
+
</li>
|
|
942
|
+
<li id="fn:6">
|
|
943
|
+
<p>Salzman R, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed/23444468">Osteonecrosis of the external auditory canal associated with oral bisphosphonate therapy: case report and literature review</a>. Otol Neurotol 2013; 34: 209–13. <a href="#fnref:6" class="reversefootnote">↩</a></p>
|
|
944
|
+
</li>
|
|
945
|
+
<li id="fn:7">
|
|
946
|
+
<p>Thorsteinsson AL, et al. <a rel="external" href="http://www.avensonline.org/fulltextarticles/jcmcr-2332-4120-02-0007.html">Bisphosphonate-induced osteonecrosis of the external auditory canal: a case report</a>. J Clin Med Case Reports 2015; 2: 3. <a href="#fnref:7" class="reversefootnote">↩</a></p>
|
|
947
|
+
</li>
|
|
948
|
+
<li id="fn:8">
|
|
949
|
+
<p>Wickham N, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed?term=Wickham%5Bauthor%5D+AND+Bisphosphonate&TransSchema=title&cmd=detailssearch">Bisphosphonate-associated osteonecrosis of the external auditory canal</a>. J Laryngol Otol 2013; 127 (suppl 2): S51–53. <a href="#fnref:8" class="reversefootnote">↩</a></p>
|
|
950
|
+
</li>
|
|
951
|
+
<li id="fn:9">
|
|
952
|
+
<p>Patient reminder cards about the risk of osteonecrosis of the jaw are being introduced for intravenous bisphosphonates and denosumab. The cards will become available at different times for individual products. They are now available for the following products: Prolia (denosumab); Xgeva (denosumab); Aclasta (zoledronic acid); Zometa (zoledronic acid); zoledronic acid 5 mg generics and zoledronic acid 4 mg generics. The cards can be viewed <a href="https://www.gov.uk/drug-safety-update/denosumab-xgeva-prolia-intravenous-bisphosphonates-osteonecrosis-of-the-jaw-further-measures-to-minimise-risk">here</a>. <a href="#fnref:9" class="reversefootnote">↩</a></p>
|
|
953
|
+
</li>
|
|
954
|
+
</ol>
|
|
955
|
+
</div>
|
|
956
|
+
tables:
|
|
891
957
|
data:
|
|
892
958
|
block: |
|
|
893
|
-
<
|
|
894
|
-
<
|
|
895
|
-
<
|
|
896
|
-
|
|
897
|
-
|
|
959
|
+
<table>
|
|
960
|
+
<caption>A table with data</caption>
|
|
961
|
+
<thead>
|
|
962
|
+
<tr>
|
|
963
|
+
<th>Group</th>
|
|
964
|
+
<th>Explanation</th>
|
|
965
|
+
<th>Current and continuing guidance</th>
|
|
966
|
+
<th>Government support</th>
|
|
967
|
+
</tr>
|
|
968
|
+
</thead>
|
|
969
|
+
<tbody>
|
|
970
|
+
<tr>
|
|
971
|
+
<th>Clinically extremely vulnerable people (all people in this cohort will have received communication from the NHS)</th>
|
|
972
|
+
<td>People defined on medical grounds a clinically extremely vulnerable, meaning they are at the greatest risk of severe illness. This group includes solid organ transplant recipients, people receiving chemotherapy, renal dialysis patients and others.</td>
|
|
973
|
+
<td>Follow shielding guidance by staying at home at all times and avoiding all non-essential face-to-face contact. This guidance is in place until end June.</td>
|
|
974
|
+
<td>Support available from the National Shielding Programme, which includes food supplies (through food boxes and priority supermarket deliveries), pharmacy deliveries and care. Support is available via the NHS Volunteer Responders app.</td>
|
|
975
|
+
</tr>
|
|
976
|
+
<tr>
|
|
977
|
+
<th>Clinically vulnerable people</th>
|
|
978
|
+
<td>People considered to be at higher risk of severe illness from COVID-19. Clinically vulnerable people include the following: people aged 70 or older, people with liver disease, people with diabetes, pregnant women and others.</td>
|
|
979
|
+
<td>Stay at home as much as possible. If you do go out, take particular care to minimise contact with others outside your household.</td>
|
|
980
|
+
<td>Range of support available while measures in place, including by local authorities and through voluntary and community groups. Support is available via the NHS Volunteer Responders app.</td>
|
|
981
|
+
</tr>
|
|
982
|
+
<tr>
|
|
983
|
+
<th>Vulnerable people (non-clinical)</th>
|
|
984
|
+
<td>There are a range of people who can be classified as ‘vulnerable’ due to non-clinical factors, such as children at risk of violence or with special education needs, victims of domestic abuse, rough sleepers and others.</td>
|
|
985
|
+
<td>People in this group will need to follow general guidance except where they are also clinically vulnerable or clinically extremely vulnerable, where they should follow guidance as set out above.</td>
|
|
986
|
+
<td>For those who need it, a range of support and guidance across public services and the benefits system, including by central and local government and the voluntary and community sector.</td>
|
|
987
|
+
</tr>
|
|
988
|
+
</tbody>
|
|
989
|
+
</table>
|
|
990
|
+
tables_with_alignments:
|
|
898
991
|
data:
|
|
899
992
|
block: |
|
|
900
|
-
<
|
|
901
|
-
<
|
|
902
|
-
<
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
993
|
+
<table>
|
|
994
|
+
<thead>
|
|
995
|
+
<tr>
|
|
996
|
+
<th scope="col">Default aligned</th>
|
|
997
|
+
<th class="cell-text-left" scope="col">Left aligned</th>
|
|
998
|
+
<th class="cell-text-center" scope="col">Center aligned</th>
|
|
999
|
+
<th class="cell-text-right" scope="col">Right aligned</th>
|
|
1000
|
+
</tr>
|
|
1001
|
+
</thead>
|
|
1002
|
+
<tbody>
|
|
1003
|
+
<tr>
|
|
1004
|
+
<td>First body part</td>
|
|
1005
|
+
<td class="cell-text-left">Second cell</td>
|
|
1006
|
+
<td class="cell-text-center">Third cell</td>
|
|
1007
|
+
<td class="cell-text-right">fourth cell</td>
|
|
1008
|
+
</tr>
|
|
1009
|
+
</tbody>
|
|
1010
|
+
</table>
|
|
1011
|
+
youtube_embed:
|
|
1012
|
+
data:
|
|
1013
|
+
block: |
|
|
1014
|
+
<p>This content has a YouTube video link, converted to an accessible embedded player by component JavaScript.</p>
|
|
1015
|
+
<p><a href="https://www.youtube.com/watch?v=y6hbrS3DheU">Operations: a developer's guide, by Anna Shipman</a></p>
|
|
1016
|
+
youtube_embed_disabled:
|
|
1017
|
+
data:
|
|
1018
|
+
disable_youtube_expansions: true
|
|
1019
|
+
block: |
|
|
1020
|
+
<p>This content has a YouTube video link, where the govspeak expansion has been disabled</p>
|
|
1021
|
+
<p><a href="https://www.youtube.com/watch?v=y6hbrS3DheU">Operations: a developer's guide, by Anna Shipman</a></p>
|
|
1022
|
+
youtube_livestream:
|
|
1023
|
+
data:
|
|
1024
|
+
block: |
|
|
1025
|
+
<p>This content has a YouTube livestream link, converted to an accessible embedded player by component JavaScript.</p>
|
|
1026
|
+
<p><a href="https://www.youtube.com/embed/live_stream?channel=UCoMdktPbSTixAyNGwb-UYkQ">Livestream video</a></p>
|