Component

Govspeak content

To display long form text which has been converted from Govspeak

Govspeak is GOV.UK’s extension of Markdown.

This component has no control over markup, which is passed in to the component pre-generated. It only applies CSS/JS.

It applies styling to standard Markdown content, eg; paragraphs, headings and lists. It also applies styling to Govspeak specific markup, like callouts, contacts and highlights.

Some JavaScript behaviours are applied to this component:

  • Progressively enhanced, accessible charts (using Magna Charta, derived from tabular data (see example)
  • Progressively enhanced, accessible embedded YouTube player (see example)

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

This is a title

This is some body text with a link.

How to call this component

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h2>This is a title</h2>
  <p>This is some body text with <a href="https://example.com">a link</a>.</p>
<% end %>

Accessibility acceptance criteria

  • headings must be part of a correct heading structure for the page
  • text should have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Links in the component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • indicate when they have focus
  • change in appearance when touched (in the touch-down state)
  • change in appearance when hovered
  • be usable with touch
  • be usable with voice commands
  • have visible text
  • have meaningful text

Other examples

Inverted (preview)

This option currently supports basic inversion of only headings, paragraphs and links.

This is a title

This is some body text with a link.

<%= render "govuk_publishing_components/components/govspeak", {
  inverse: true
} do %>
  <h2>This is a title</h2>
<p>This is some body text with <a href="https://example.com">a link</a>.</p>
<% end %>

Heading levels (preview)

This is a h2 title

This is a h3 title

This is a h4 title

This is a h5 title
This is a h6 title
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h2>This is a h2 title</h2>
<h3>This is a h3 title</h3>
<h4>This is a h4 title</h4>
<h5>This is a h5 title</h5>
<h6>This is a h6 title</h6>
<% end %>

Lists (preview)

ordered list:

  1. one
  2. two
  3. three

unordered list:

  • one
  • two
  • three
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h2>ordered list:</h2>
<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>
<h2>unordered list:</h2>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<% end %>

Nested lists (preview)

ordered list:

    • one
    • two
  2. three

unordered list:

    • one
    • two
  • three
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h2>ordered list:</h2>
<ol>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
    </ul>
  </li>
  <li>three</li>
</ol>
<h2>unordered list:</h2>
<ul>
  <li>
    <ul>
      <li>one</li>
      <li>two</li>
    </ul>
  </li>
  <li>three</li>
</ul>
<% end %>

Ordered lists types (preview)

Govspeak/markdown does not generate HTML with type and start attributes, however we still provide support for them as some advanced users write HTML directly to achieve the list formatting.

Lowercase alphabetical list

  1. one
  2. two

Uppercase alphabetical list

  1. one
  2. two

Lowercase Roman numeral list

  1. one
  2. two

Uppercase Roman numberal list

  1. one
  2. two

Numerical list starting at 3

  1. three
  2. four

Lowercase alphabetical list, starting at 3

  1. three
  2. four
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h2>Lowercase alphabetical list</h2>
<ol type="a">
  <li>one</li>
  <li>two</li>
</ol>

<h2>Uppercase alphabetical list</h2>
<ol type="A">
  <li>one</li>
  <li>two</li>
</ol>

<h2>Lowercase Roman numeral list</h2>
<ol type="i">
  <li>one</li>
  <li>two</li>
</ol>

<h2>Uppercase Roman numberal list</h2>
<ol type="I">
  <li>one</li>
  <li>two</li>
</ol>

<h2>Numerical list starting at 3</h2>
<ol start="3">
  <li>three</li>
  <li>four</li>
</ol>

<h2>Lowercase alphabetical list, starting at 3</h2>
<ol type="a" start="3">
  <li>three</li>
  <li>four</li>
</ol>
<% end %>

Legislative lists (preview)

ordered list:

  1. one
  2. two
  3. three
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h2>ordered list:</h2>
<ol class="legislative-list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ol>
<% end %>

Image fractions (preview)

Number - fractions

Pupils should be taught to:

  • recognise, find, name and write fractions 1/3 , 1/4 , 2/4 and 3/4 of a length, shape, set of objects or quantity
  • write simple fractions, for example 1/2 of 6 = 3 and recognise the equivalence of 2/4 and 1/2

Notes and guidance (non-statutory)

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 3/4 as the first example of a non-unit fraction.

Pupils should count in fractions up to 10, starting from any number and using the 1/2 and 2/4 equivalence on the number line (for example, 1 1/4 , 1 2/4 (or 1 1/2 ), 1 3/4 , 2). This reinforces the concept of fractions as numbers and that they can add up to more than 1. 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h3 id="number---fractions-1">Number - fractions</h3>

<p>Pupils should be taught to:</p>

<ul>
<li>recognise, find, name and write fractions <span class="fraction">
  <img alt="1/3" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_3-9003d7f3d7cd4433647a5f6525aa7eda.png"></span>
, <span class="fraction">
  <img alt="1/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_4-b6128849c8da3b46b9cb5a6918cfe084.png"></span>
, <span class="fraction">
  <img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
 and <span class="fraction">
  <img alt="3/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/3_4-cded12d0389211f864dcb27e640c64d4.png"></span>
 of a length, shape, set of objects or quantity</li>
  <li>write simple fractions, for example <span class="fraction">
  <img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
 of 6 = 3 and recognise the equivalence of <span class="fraction">
  <img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
and <span class="fraction">
  <img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
</li>
</ul>
<div class="call-to-action">
  <h4>Notes and guidance (non-statutory)</h4>

  <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">
    <img alt="3/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/3_4-cded12d0389211f864dcb27e640c64d4.png"></span>
   as the first example of a non-unit fraction.<br><br>
  Pupils should count in fractions up to 10, starting from any number and using the <span class="fraction">
      <img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
   and <span class="fraction">
      <img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
    equivalence on the number line (for example, 1<span class="fraction">
      <img alt="1/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_4-b6128849c8da3b46b9cb5a6918cfe084.png"></span>
  , 1<span class="fraction">
      <img alt="2/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/2_4-e071530a44f0d7980f3442c23e3edd3b.png"></span>
   (or 1<span class="fraction">
      <img alt="1/2" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/1_2-6e6f542bec97cb8ea3acf39cd25690ee.png"></span>
  ), 1<span class="fraction">
      <img alt="3/4" height="27" src="https://assets.digital.cabinet-office.gov.uk/government/assets/fractions/3_4-cded12d0389211f864dcb27e640c64d4.png"></span>
  , 2). This reinforces the concept of fractions as numbers and that they can add up to more than 1.
  </p>
</div>
<% end %>

Text fractions (preview)

If an image is not available for a particular fraction, then we'll fallback to text based fraction using sup/sub, like this 1⁄100 example.

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <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>&frasl;<sub>100</sub></span> example.</p>
<% end %>

Blockquote (preview)

My quote

about things

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <blockquote>
  <p>My quote</p>
  <p class="last-child">about things</p>
</blockquote>
<% end %>

Tables (preview)

A table with data
Group Explanation Current and continuing guidance Government support
Clinically extremely vulnerable people (all people in this cohort will have received communication from the NHS) 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. 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. 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.
Clinically vulnerable people 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. Stay at home as much as possible. If you do go out, take particular care to minimise contact with others outside your household. 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.
Vulnerable people (non-clinical) 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. 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. 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. 
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <table>
  <caption>A table with data</caption>
  <thead>
    <tr>
      <th>Group</th>
      <th>Explanation</th>
      <th>Current and continuing guidance</th>
      <th>Government support</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Clinically extremely vulnerable people (all people in this cohort will have received communication from the NHS)</th>
      <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>
      <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>
      <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>
    </tr>
    <tr>
      <th>Clinically vulnerable people</th>
      <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>
      <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>
      <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>
    </tr>
    <tr>
      <th>Vulnerable people (non-clinical)</th>
      <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>
      <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>
      <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>
    </tr>
  </tbody>
</table>
<% end %>

Tables with alignments (preview)

Default aligned Left aligned Center aligned Right aligned
First body part Second cell Third cell fourth cell 
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <table>
  <thead>
    <tr>
      <th scope="col">Default aligned</th>
      <th class="cell-text-left" scope="col">Left aligned</th>
      <th class="cell-text-center" scope="col">Center aligned</th>
      <th class="cell-text-right" scope="col">Right aligned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First body part</td>
      <td class="cell-text-left">Second cell</td>
      <td class="cell-text-center">Third cell</td>
      <td class="cell-text-right">fourth cell</td>
    </tr>
  </tbody>
</table>
<% end %>

Charts (preview)

The Government Statistical Service (GSS) guidance recommends a limit of four categories as best practice for basic data visualisations.

Note that charts which have up to 7 categories, chart with colours, 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. 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.

A table with numerical data
row 110
row 215
row 32
row 448 
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <table class='js-barchart-table mc-auto-outdent'>
  <caption>A table with numerical data</caption>
  <tbody>
    <tr>
      <td>row 1</td><td>10</td>
    </tr>
    <tr>
      <td>row 2</td><td>15</td>
    </tr>
    <tr>
      <td>row 3</td><td>2</td>
    </tr>
    <tr>
      <td>row 4</td><td>48</td>
    </tr>
  </tbody>
</table>
<% end %>

Chart with colours (preview)

Number position Apples Oranges Bananas Pears Grapes Strawberries Plums
Numbers inside bar 16 48 39 50 24 10 62
Numbers outside bar 2 1 2 1 1 2 1 
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <table class="js-barchart-table mc-auto-outdent">
  <thead>
    <tr>
      <th scope="col">Number position</th>
      <th scope="col">Apples</th>
      <th scope="col">Oranges</th>
      <th scope="col">Bananas</th>
      <th scope="col">Pears</th>
      <th scope="col">Grapes</th>
      <th scope="col">Strawberries</th>
      <th scope="col">Plums</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Numbers inside bar</td>
      <td>16</td>
      <td>48</td>
      <td>39</td>
      <td>50</td>
      <td>24</td>
      <td>10</td>
      <td>62</td>
    </tr>
    <tr>
      <td>Numbers outside bar</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
      <td>1</td>
      <td>1</td>
      <td>2</td>
      <td>1</td>
    </tr>
  </tbody>
</table>
<% end %>

Stacked chart (preview)

Colours Fruits Vegetables Beans Nuts Total
Red 23 9 2 1 35
Green 5 33 8 0 46
Yellow 2 10 0 15 27 
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <table class="js-barchart-table mc-stacked mc-auto-outdent">
  <thead>
    <tr>
      <th scope="col">Colours</th>
      <th scope="col">Fruits</th>
      <th scope="col">Vegetables</th>
      <th scope="col">Beans</th>
      <th scope="col">Nuts</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Red</td>
      <td>23</td>
      <td>9</td>
      <td>2</td>
      <td>1</td>
      <td>35</td>
    </tr>
    <tr>
      <td>Green</td>
      <td>5</td>
      <td>33</td>
      <td>8</td>
      <td>0</td>
      <td>46</td>
    </tr>
    <tr>
      <td>Yellow</td>
      <td>2</td>
      <td>10</td>
      <td>0</td>
      <td>15</td>
      <td>27</td>
    </tr>
  </tbody>
</table>
<% end %>

Chart with multiple headings (preview)

Multiple Table
Some DataYESNOMAYBE
Testing One5611
Testing Two628
Testing Three3912
 
<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <table id="multiple-table-chart" class="js-barchart-table mc-multiple">
  <caption>Multiple Table</caption>
  <thead>
    <tr><th>Some Data</th><th>YES</th><th>NO</th><th>MAYBE</th></tr>
  </thead>
  <tbody>
    <tr><th>Testing One</th><td>5</td><td>6</td><td>11</td></tr>
    <tr><th>Testing Two</th><td>6</td><td>2</td><td>8</td></tr>
    <tr><th>Testing Three</th><td>3</td><td>9</td><td>12</td></tr>
  </tbody>
</table>
<% end %>

Address (preview)

First line of address
Second line of address
75 This street
United Kindom
Phone: 07123456789

Addresses are generated when using the `$A` markdown pattern.

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="address">
  <div class="adr org fn">
    <p>
      First line of address
      <br>Second line of address
      <br>75 This street
      <br>United Kindom
      <br>Phone: 07123456789
      <br>
    </p>
  </div>
</div>
<p>Addresses are generated when using the `$A` markdown pattern.</p>
<% end %>

Contact (preview)

Media enquiries

2 Marsham Street
London
SW1P 4DF

A comment about the contact

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="contact" id="contact_1017">
  <div class="content">
    <div class="vcard contact-inner">
      <p>Media enquiries</p>
      <p class="adr">
        <span class="street-address">2 Marsham Street<br>London</span><br>
        <span class="postal-code">SW1P 4DF</span>
      </p>
      <div class="email-url-number">
        <p class="tel"><span class="type">Press enquiries</span> 020 7XXX XXXX</p>
        <p class="tel"><span class="type">Out of hours</span> 020 7XXX XXXX</p>
      </div>
      <p class="comments">A comment about the contact</p>
    </div>
  </div>
</div>
<% end %>

Contact with surrounding text (preview)

This is a title

Media enquiries

2 Marsham Street
London
SW1P 4DF

A comment about the contact

This is a paragraph.

Media enquiries

2 Marsham Street
London
SW1P 4DF

A comment about the contact

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h2>This is a title</h2>
<div class="contact" id="contact_1018">
  <div class="content">
    <div class="vcard contact-inner">
      <p>Media enquiries</p>
      <p class="adr">
        <span class="street-address">2 Marsham Street<br>London</span><br>
        <span class="postal-code">SW1P 4DF</span>
      </p>
      <div class="email-url-number">
        <p class="tel"><span class="type">Press enquiries</span> 020 7XXX XXXX</p>
        <p class="tel"><span class="type">Out of hours</span> 020 7XXX XXXX</p>
      </div>
      <p class="comments">A comment about the contact</p>
    </div>
  </div>
</div>
<p>This is a paragraph.</p>
<div class="contact" id="contact_1019">
  <div class="content">
    <div class="vcard contact-inner">
      <p>Media enquiries</p>
      <p class="adr">
        <span class="street-address">2 Marsham Street<br>London</span><br>
        <span class="postal-code">SW1P 4DF</span>
      </p>
      <div class="email-url-number">
        <p class="tel"><span class="type">Press enquiries</span> 020 7XXX XXXX</p>
        <p class="tel"><span class="type">Out of hours</span> 020 7XXX XXXX</p>
      </div>
      <p class="comments">A comment about the contact</p>
    </div>
  </div>
</div>
<% end %>

Footnotes (preview) 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <p>This is a text with a footnote<sup id="fnref:1a"><a href="#fn:1a" class="footnote">1</a></sup>.</p>

<div class="footnotes">
  <ol>
    <li id="fn:1a">
      <p>And here is the definition. <a href="#fnref:1a" class="reversefootnote">&#8617;</a></p>
    </li>
    <li id="fn:2">
      <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>
      <a href="#fnref:2" class="govuk-link">↩</a>
    </li>
  </ol>
</div>
<% end %>

Rtl block (preview)

قال وزير الخارجية، ويليام هيغ:

مع بدء هذا الشهر الفضيل أتمنى للمسلمين في أنحاء العالم - في آسيا وأفريقيا والشرق الأوسط وأوروبا وغيرها من مناطق العالم - شهر رمضان مبارك.

في المملكة المتحدة يُحتفل بشهر رمضان منذ أجيال عديدة، ونفتخر بروابطنا القوية مع العالم الإسلامي، سواء مع شركائنا المعهودين في الشرق الأوسط أو روابطنا التاريخية المتينة في آسيا وأفريقيا أو مواطنينا المسلمين البريطانيين المفعمين بالحيوية والنشاط.

ordered list

  1. تابع الوزير أليستر بيرت عبر تويتر
  2. تابعنا باللغة العربية عبر
  3. تابعنا باللغة العربية عبر تويتر

unordered list

  • تابع الوزير أليستر بيرت عبر تويتر
  • تابعنا باللغة العربية عبر
  • تابعنا باللغة العربية عبر تويتر
السنة الدور
2020 - 2022 وزارة الخارجية والتنمية البريطانية
2016 - 2020 القنصل العام البريطاني في القنصلية البريطانية العامة في شونغشينغ
2012 - 2015 الدوحة، نائب رئيس البعثة 
<%= render "govuk_publishing_components/components/govspeak", {
  direction: "rtl"
} do %>
  <p>قال وزير الخارجية، ويليام هيغ:</p>
<blockquote>
  <p>مع بدء هذا الشهر الفضيل أتمنى للمسلمين في أنحاء العالم - في آسيا وأفريقيا والشرق الأوسط وأوروبا وغيرها من مناطق العالم - شهر رمضان مبارك.</p>
  <p class="last-child">في المملكة المتحدة يُحتفل بشهر رمضان منذ أجيال عديدة، ونفتخر بروابطنا القوية مع العالم الإسلامي، سواء مع شركائنا المعهودين في الشرق الأوسط أو روابطنا التاريخية المتينة في آسيا وأفريقيا أو مواطنينا المسلمين البريطانيين المفعمين بالحيوية والنشاط.</p>
</blockquote>
<h2>ordered list</h2>
<ol>
  <li>تابع الوزير أليستر بيرت عبر تويتر </li>
  <li>تابعنا باللغة العربية عبر</li>
  <li>تابعنا باللغة العربية عبر تويتر </li>
</ol>
<h2>unordered list</h2>
<ul>
  <li>تابع الوزير أليستر بيرت عبر تويتر </li>
  <li>تابعنا باللغة العربية عبر</li>
  <li>تابعنا باللغة العربية عبر تويتر </li>
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">السنة</th>
      <th scope="col">الدور</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2020 - 2022</td>
      <td>وزارة الخارجية والتنمية البريطانية</td>
    </tr>
    <tr>
      <td>2016 - 2020</td>
      <td>القنصل العام البريطاني في القنصلية البريطانية العامة في شونغشينغ</td>
    </tr>
    <tr>
      <td>2012 - 2015</td>
      <td>الدوحة، نائب رئيس البعثة</td>
    </tr>
  </tbody>
</table>
<% end %>

With youtube embed (preview)

This content has a YouTube video link, converted to an accessible embedded player by component JavaScript.

Operations: a developer's guide, by Anna Shipman

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <p>This content has a YouTube video link, converted to an accessible embedded player by component JavaScript.</p>
<p><a href="https://www.youtube.com/watch?v=y6hbrS3DheU">Operations: a developer's guide, by Anna Shipman</a></p>
<% end %>

With youtube livestream (preview)

This content has a YouTube livestream link, converted to an accessible embedded player by component JavaScript.

Livestream video

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <p>This content has a YouTube livestream link, converted to an accessible embedded player by component JavaScript.</p>
<p><a href="https://www.youtube.com/embed/live_stream?channel=UCoMdktPbSTixAyNGwb-UYkQ">Livestream video</a></p>
<% end %>

With youtube embed disabled (preview)

This content has a YouTube video link, where the govspeak expansion has been disabled

Operations: a developer's guide, by Anna Shipman

<%= render "govuk_publishing_components/components/govspeak", {
  disable_youtube_expansions: true
} do %>
  <p>This content has a YouTube video link, where the govspeak expansion has been disabled</p>
<p><a href="https://www.youtube.com/watch?v=y6hbrS3DheU">Operations: a developer's guide, by Anna Shipman</a></p>
<% end %>

Statistic headlines (preview)

£6bn Total Departmental Expenditure Limit (DEL) in financial year 2015 to 2016

This includes £5.8 billion Resource DEL and £0.2 billion Capital DEL. In addition, DWP Annually Managed Expenditure (AME) in financial year 2015 to 2016 is £170.5 billion, as forecast by the Office for Budget Responsibility.

UK employment rate 74.1% between October and December 2015

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="stat-headline">
  <p><em>£6bn</em>
  Total Departmental Expenditure Limit (<abbr title="Departmental Expenditure Limit">DEL</abbr>) in financial year 2015 to 2016</p>
</div>
<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>
<div class="stat-headline">
  <p>UK employment rate
  <em>74.1%</em>
  between October and December 2015</p>
</div>
<% end %>

Specialist content (preview)

Bisphosphonates

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 Characteristics1). The following bisphosphonates are available in the UK:

  • Alendronic acid
  • Ibandronic acid
  • Pamidronate disodium
  • Risedronate sodium
  • Sodium clodronate
  • Zoledronic acid

Osteonecrosis of the external auditory canal

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.

Advice for healthcare professionals:

  • 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
  • Possible risk factors include steroid use and chemotherapy, with or without local risk factors such as infection or trauma
  • Patients should be advised to report any ear pain, discharge from the ear, or an ear infection during bisphosphonate treatment
  • Report any cases of osteonecrosis of the external auditory canal suspected to be associated with bisphosphonates or any other medicines, including denosumab, on a Yellow Card

Evidence for an association with bisphosphonate treatment

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.

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.2 3 4 5 6 7 8 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.

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 well-established side effect of bisphosphonates.9

Evidence for an association with denosumab treatment

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 known to be associated with osteonecrosis of the jaw.

Article citation: Drug Safety Update volume 9 issue 5 December 2015: 3.

  1. Summaries of Product Characteristics can be found here on the MHRA website or on the website of the European Medicines Agency, depending whether the medicine has a national or European licence, respectively. ↩

  2. Bast F, et al. Bilateral bisphosphonate-associated osteonecrosis of the external ear canal: a rare case. HNO. 2012; 60: 1127–29 [in German]. ↩

  3. Froelich K, et al. Bisphosphonate-induced osteonecrosis of the external ear canal: a retrospective study. Eur Arch Otorhinolaryngol 2011; 268: 1219–25. ↩

  4. Kharazmi M, et al. Bisphosphonate-associated osteonecrosis of the auditory canal. Br J Oral Maxillofac Surg 2013; 51: e285–87. ↩

  5. Polizzotto MN, et al. Bisphosphonate-associated osteonecrosis of the auditory canal. Br J Haematol 2006; 132: 114. ↩

  6. Salzman R, et al. Osteonecrosis of the external auditory canal associated with oral bisphosphonate therapy: case report and literature review. Otol Neurotol 2013; 34: 209–13. ↩

  7. Thorsteinsson AL, et al. Bisphosphonate-induced osteonecrosis of the external auditory canal: a case report. J Clin Med Case Reports 2015; 2: 3. ↩

  8. Wickham N, et al. Bisphosphonate-associated osteonecrosis of the external auditory canal. J Laryngol Otol 2013; 127 (suppl 2): S51–53. ↩

  9. 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 here. ↩

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h2 id="bisphosphonates">Bisphosphonates</h2>
<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>

<ul>
  <li>Alendronic acid</li>
  <li>Ibandronic acid</li>
  <li>Pamidronate disodium</li>
  <li>Risedronate sodium</li>
  <li>Sodium clodronate</li>
  <li>Zoledronic acid</li>
</ul>

<h2 id="osteonecrosis-of-the-external-auditory-canal">Osteonecrosis of the external auditory canal</h2>
<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>

<div class="call-to-action">
  <p>Advice for healthcare professionals:</p>
  <ul>
    <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>
    <li>Possible risk factors include steroid use and chemotherapy, with or without local risk factors such as infection or trauma</li>
    <li>Patients should be advised to report any ear pain, discharge from the ear, or an ear infection during bisphosphonate treatment</li>
    <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>
  </li>
  </ul>
</div>

<h2 id="evidence-for-an-association-with-bisphosphonate-treatment">Evidence for an association with bisphosphonate treatment</h2>
<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>

<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>

<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>

<h2 id="evidence-for-an-association-with-denosumab-treatment">Evidence for an association with denosumab treatment</h2>
<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>

<p>Article citation: Drug Safety Update volume 9 issue 5 December 2015: 3.</p>

<div class="footnotes">
  <ol>
    <li id="fn:1">
      <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>
    </li>
    <li id="fn:2">
      <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>
    </li>
    <li id="fn:3">
      <p>Froelich K, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed?term=Froelich+K%5Bauthor%5D+AND+Bisphosphonate&amp;TransSchema=title&amp;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>
    </li>
    <li id="fn:4">
      <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>
    </li>
    <li id="fn:5">
      <p>Polizzotto MN, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed?term=Polizzotto+MN%5Bauthor%5D+AND+Bisphosphonate&amp;TransSchema=title&amp;cmd=detailssearch">Bisphosphonate-associated osteonecrosis of the auditory canal</a>. Br J Haematol 2006; 132: 114. <a href="#fnref:5" class="reversefootnote">↩</a></p>
    </li>
    <li id="fn:6">
      <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>
    </li>
    <li id="fn:7">
      <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>
    </li>
    <li id="fn:8">
      <p>Wickham N, et al. <a rel="external" href="http://www.ncbi.nlm.nih.gov/pubmed?term=Wickham%5Bauthor%5D+AND+Bisphosphonate&amp;TransSchema=title&amp;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>
    </li>
    <li id="fn:9">
      <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>
    </li>
  </ol>
</div>
<% end %>

Attachment (preview)

Attachment component rendered within Govspeak

An attachment as a block

Attachment

ODT, 1 KB

This file is in an OpenDocument format 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <p>An attachment as a block</p>

<%= render "govuk_publishing_components/components/attachment",
    attachment: { url: "https://example.com/file.odt",
                  title: "Attachment",
                  file_size: 1024,
                  content_type: "application/vnd.oasis.opendocument.text" }
%>
<% end %>

Inline attachment (preview)

Legacy inline attachment embed used by Whitehall and Specialist Publisher

testing my attachment testing (CSV, 65.4KB) works in the middle of copy. 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <p>testing my attachment <span class="inline-attachment" id="attachment_1399340">
  <a href="/government/uploads/system/uploads/attachment_data/file/498071/PHE_Payments_over__25k_Jun_15.csv">testing</a>
  (<span class="type"><abbr title="Comma-separated Values">CSV</abbr></span>, <span class="file-size">65.4KB</span>)</span> works in the middle of copy.
</p>
<% end %>

Whitehall block attachments (preview)

Attachments rendered by govspeak extensions within Whitehall

PDF Attachment

PDF, 198KB, 2 pages

Document attachment

MS Word Document, 24.2KB

File attachment with additional metadata

Ref: ISBN 9781474121767, CM 9101 PDF, 2.02MB, 86 pages

Order a copy

Previewable online example

View online Download CSV 65.4KB

Fly-tipping incidents and actions reported by local authorities in 2014 to 2015

ODS, 173KB

This file is in an OpenDocument format

This file may not be suitable for users of assistive technology. Request an accessible format.

If you use assistive technology and need a version of this document in a more accessible format, please email defra.helpline@defra.gsi.gov.uk. Please tell us what format you need. It will help us if you say what assistive technology you use.

Summer Budget 2015

HTML

Track coronavirus cases

https://www.arcgis.com/apps/opsdashboard/index.html#/f94c3c90da5b4e9f9a0b19484dd4bb14

An external link (with all possible metadata)

Ref: ISBN 9780605039070, ABC-12345, Cmd.987654321, HC 0123456789 2015-16 http://example.com

Order a copy (£1.00)

Consultation outcome with published date

Published: PDF, 106KB, 7 pages 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <section class="attachment embedded" id="attachment_1399345">
  <div class="attachment-thumb">
    <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/minimum-wage-jobs-in-ashfield-local-authority-since-2009"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/496127/thumbnail_LPC_FoI_09.12.15_NMW_jobs_Ashfield_LA.pdf.png"></a>
  </div>
  <div class="attachment-details">
    <h2 class="title"><a href="https://www.gov.uk/government/publications/minimum-wage-jobs-in-ashfield-local-authority-since-2009">PDF Attachment</a></h2>
    <p class="metadata">
      <span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">198KB</span>, <span class="page-length">2 pages</span>
    </p>
  </div>
</section>
<section class="attachment embedded" id="attachment_1399344">
  <div class="attachment-thumb">
    <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/world-location-news/294043.es-419"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-doc-afe3b0a8a9511beeca890340170aee8b5649413f948e512c9b8ce432d8513d32.png"></a>
  </div>
  <div class="attachment-details">
    <h2 class="title"><a href="https://www.gov.uk/government/world-location-news/294043.es-419">Document attachment</a></h2>
    <p class="metadata">
      <span class="type">MS Word Document</span>, <span class="file-size">24.2KB</span>
    </p>
  </div>
</section>
<section class="attachment embedded" id="attachment_1105176">
  <div class="attachment-thumb">
    <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/post-legislative-memorandum-the-equality-act-2010"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/441838/thumbnail_Memo_to_Women_Equalities.pdf.png"></a>
  </div>
  <div class="attachment-details">
    <h2 class="title"><a href="https://www.gov.uk/government/publications/post-legislative-memorandum-the-equality-act-2010">File attachment with additional metadata</a></h2>
    <p class="metadata">
      <span class="references">
      Ref: ISBN <span class="isbn">9781474121767</span>, <span class="command_paper_number">CM 9101</span>
      </span>
      <span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">2.02MB</span>, <span class="page-length">86 pages</span>
    </p>
    <p>
      <a class="order_url" title="Order a copy of the publication" href="https://www.gov.uk/how-to-buy-printed-copies-of-official-documents%20">Order a copy</a>
    </p>
  </div>
</section>
<section class="attachment embedded" id="attachment_1399348">
  <div class="attachment-thumb">
    <img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-spreadsheet-471052e0d03e940bbc62528a05ac204a884b553e4943e63c8bffa6b8baef8967.png">
  </div>
  <div class="attachment-details">
    <h2 class="title">Previewable online example</h2>
    <p class="metadata">
      <span class="preview">
      <strong>
      <a href="https://www.gov.uk/government/publications/phe-spend-over-25000-june-2015">View online</a>
      </strong>
      </span>
      <span class="download">
      <a href="https://www.gov.uk/government/publications/phe-spend-over-25000-june-2015">
      <strong>Download CSV</strong>
      65.4KB
      </a>
      </span>
    </p>
  </div>
</section>
<section class="attachment embedded" id="attachment_1243761">
  <div class="attachment-thumb">
    <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/statistical-data-sets/env24-fly-tipping-incidents-and-actions-taken-in-england"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-spreadsheet-471052e0d03e940bbc62528a05ac204a884b553e4943e63c8bffa6b8baef8967.png"></a>
  </div>
  <div class="attachment-details">
    <h2 class="title"><a aria-describedby="attachment-1243761-accessibility-help" href="https://www.gov.uk/government/statistical-data-sets/env24-fly-tipping-incidents-and-actions-taken-in-england">Fly-tipping incidents and actions reported by local authorities in 2014 to 2015</a></h2>
    <p class="metadata">
      <span class="type"><abbr title="OpenDocument Spreadsheet">ODS</abbr></span>, <span class="file-size">173KB</span>
    </p>
    <p class="opendocument-help">
      This file is in an <a rel="external" href="https://en.wikipedia.org/wiki/OpenDocument_software">OpenDocument</a> format
    </p>
    <div data-module="toggle" class="accessibility-warning" id="attachment-1243761-accessibility-help">
      <h2>This file may not be suitable for users of assistive technology.
        <a class="toggler" href="#attachment-1243761-accessibility-request" data-controls="attachment-1243761-accessibility-request" data-expanded="false">Request an accessible format.</a>
      </h2>
      <p id="attachment-1243761-accessibility-request" class="help-block js-hidden"><span class="arrow"></span>
        If you use assistive technology and need a version of this document
        in a more accessible format, please email
        <a href="mailto:defra.helpline@defra.gsi.gov.uk?body=Details%20of%20document%20required%3A%0A%0A%20%20Title%3A%20Fly-tipping%20incidents%20and%20actions%20reported%20by%20local%20authorities%20in%202014%20to%202015%0A%20%20Original%20format%3A%20ods%0A%0APlease%20tell%20us%3A%0A%0A%20%201.%20What%20makes%20this%20format%20unsuitable%20for%20you%3F%0A%20%202.%20What%20format%20you%20would%20prefer%3F%0A%20%20%20%20%20%20&amp;subject=Request%20for%20%27Fly-tipping%20incidents%20and%20actions%20reported%20by%20local%20authorities%20in%202014%20to%202015%27%20in%20an%20alternative%20format">defra.helpline@defra.gsi.gov.uk</a>.
        Please tell us what format you need. It will help us if you say what assistive technology you use.
      </p>
    </div>
  </div>
</section>
<section class="attachment embedded" id="attachment_1112527">
  <div class="attachment-thumb">
    <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/summer-budget-2015/summer-budget-2015"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/assets/pub-cover-html-b0465911e56983d98c70f0e25fba24bc206d37e8c83d4addf6421dcf6022c6cd.png"></a>
  </div>
  <div class="attachment-details">
    <h2 class="title"><a href="https://www.gov.uk/government/publications/summer-budget-2015/summer-budget-2015">Summer Budget 2015</a></h2>
    <p class="metadata">
      <span class="type">HTML</span>
    </p>
  </div>
</section>
<section class="attachment hosted-externally" id="attachment_1425055">
  <div class="attachment-thumb">
    <a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="//www.gov.uk/government/assets/pub-cover-a380604bb953dc22ac9dcfbf3cc65598327f493c37b09ac497c45148cbaa21b1.png"></a>
  </div>
  <div class="attachment-details">
    <h2 class="title"><a rel="external" href="https://www.arcgis.com/apps/opsdashboard/index.html#/f94c3c90da5b4e9f9a0b19484dd4bb14">Track coronavirus cases</a></h2>
    <p class="metadata">
      <span class="url">https://www.arcgis.com/apps/opsdashboard/index.html#/f94c3c90da5b4e9f9a0b19484dd4bb14</span>
    </p>
  </div>
</section>
<section class="attachment hosted-externally" id="attachment_1425056">
  <div class="attachment-thumb">
    <a aria-hidden="true" class="thumbnail" href="http://example.com"><img alt="" src="//www.gov.uk/government/assets/pub-cover-a380604bb953dc22ac9dcfbf3cc65598327f493c37b09ac497c45148cbaa21b1.png"></a>
  </div>
  <div class="attachment-details">
    <h2 class="title"><a rel="external" href="http://example.com">An external link (with all possible metadata)</a></h2>
    <p class="metadata">
      <span class="references">
      Ref: ISBN <span class="isbn">9780605039070</span>, <span class="unique_reference">ABC-12345</span>, <span class="command_paper_number">Cmd.987654321</span>, <span class="house_of_commons_paper_number">HC 0123456789</span> <span class="parliamentary_session">2015-16</span>
      </span>
      <span class="url">http://example.com</span>
    </p>
    <p>
      <a class="order_url" title="Order a copy of the publication" href="http://www.example.com">Order a copy</a>
      (<span class="price">£1.00</span>)
    </p>
  </div>
</section>
<section class="attachment embedded" id="attachment_1398523">
  <div class="attachment-thumb">
    <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/consultations/environmental-permitting-updating-the-standards-for-petrol-vapour-recovery-at-service-stations"><img alt="" src="https://assets.digital.cabinet-office.gov.uk/government/uploads/system/uploads/attachment_data/file/498443/thumbnail_petrol-vapour-recovery-consult-sum-resp.pdf.png"></a>
  </div>
  <div class="attachment-details">
    <h2 class="title"><a href="https://www.gov.uk/government/consultations/environmental-permitting-updating-the-standards-for-petrol-vapour-recovery-at-service-stations">Consultation outcome with published date</a></h2>
    <p class="metadata">
      <span class="changed">Published: <time class="date" datetime="2016-02-08"> 8 February 2016</time></span>
      <span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">106KB</span>, <span class="page-length">7 pages</span>
    </p>
  </div>
</section>
<% end %>

Whitehall block attachment rtl (preview)

Attachments rendered by govspeak extensions within Whitehall

مستقبل الغذاء والزراعة: موجز تنفيذي

إشارة: BIS/11/924 PDF, 906KB, 44 pages

هذا المف قد لا يكون مناسبا لمستخدمي التكنولوجيا المساعدة على القراءة

لاستلام وثيقة مكتوبة بشكل آخر، كلغة بريل أو وثيقة صوتية أو أي نوع آخر من الوثائق، يرجى إرسال رسالة إلكترونية إلى enquiries@bis.gsi.gov.uk مع كتابة عنوانك ورقم هاتفك إلى جانب عنوان الوثيقة المطلوبة ("{title}"), and its reference (Unique reference: BIS/11/924) 

<%= render "govuk_publishing_components/components/govspeak", {
  direction: "rtl"
} do %>
  <section class="attachment embedded" id="attachment_514218">
  <div class="attachment-thumb">
    <a aria-hidden="true" class="thumbnail" href="https://www.gov.uk/government/publications/future-of-food-and-farming.ar"><img alt="" src="https://assets-origin.integration.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/288236/thumbnail_11-924-future-of-food-and-farming-summary-arabic.pdf.png"></a>
  </div>
  <div class="attachment-details">
    <h2 class="title"><a aria-describedby="attachment-514218-accessibility-help" href="https://www.gov.uk/government/publications/future-of-food-and-farming.ar">مستقبل الغذاء والزراعة: موجز تنفيذي</a></h2>
    <p class="metadata">
      <span class="references">
      إشارة: <span class="unique_reference">BIS/11/924</span>
      </span>
      <span class="type"><abbr title="Portable Document Format">PDF</abbr></span>, <span class="file-size">906KB</span>, <span class="page-length">44 pages</span>
    </p>
    <div data-module="toggle" class="accessibility-warning" id="attachment-514218-accessibility-help">
      <h2>هذا المف قد لا يكون مناسبا لمستخدمي التكنولوجيا المساعدة على القراءة
        <a class="toggler" href="#attachment-514218-accessibility-request" data-controls="attachment-514218-accessibility-request" data-expanded="false" role="button" aria-controls="attachment-514218-accessibility-request" aria-expanded="false">طلب الوثيقة بشكل آخر</a>
      </h2>
      <p id="attachment-514218-accessibility-request" class="js-hidden" aria-live="polite" role="region">
        لاستلام وثيقة مكتوبة بشكل آخر، كلغة بريل أو وثيقة صوتية أو أي نوع آخر من الوثائق، يرجى إرسال رسالة إلكترونية إلى <a href="mailto:enquiries@bis.gsi.gov.uk?body=Details%20of%20document%20required%3A%0A%0A%20%20Title%3A%20%D9%85%D8%B3%D8%AA%D9%82%D8%A8%D9%84%20%D8%A7%D9%84%D8%BA%D8%B0%D8%A7%D8%A1%20%D9%88%D8%A7%D9%84%D8%B2%D8%B1%D8%A7%D8%B9%D8%A9%3A%20%D9%85%D9%88%D8%AC%D8%B2%20%D8%AA%D9%86%D9%81%D9%8A%D8%B0%D9%8A%0A%20%20Original%20format%3A%20pdf%0A%20%20Unique%20reference%3A%20BIS%2F11%2F924%0A%0APlease%20tell%20us%3A%0A%0A%20%201.%20What%20makes%20this%20format%20unsuitable%20for%20you%3F%0A%20%202.%20What%20format%20you%20would%20prefer%3F%0A%20%20%20%20%20%20&amp;subject=Request%20for%20%27%D9%85%D8%B3%D8%AA%D9%82%D8%A8%D9%84%20%D8%A7%D9%84%D8%BA%D8%B0%D8%A7%D8%A1%20%D9%88%D8%A7%D9%84%D8%B2%D8%B1%D8%A7%D8%B9%D8%A9%3A%20%D9%85%D9%88%D8%AC%D8%B2%20%D8%AA%D9%86%D9%81%D9%8A%D8%B0%D9%8A%27%20in%20an%20alternative%20format">enquiries@bis.gsi.gov.uk</a> مع كتابة عنوانك ورقم هاتفك إلى جانب عنوان الوثيقة المطلوبة ("{title}"), and its reference (Unique reference: BIS/11/924)
      </p>
    </div>
  </div>
</section>
<% end %>

Example (preview)

Example This is an indented example block.
It may span multiple lines, contain links.

It may even span multiple paragraphs. 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="example">
  <p>
    <strong>Example</strong>
    This is an indented example block.<br/>
    It may span multiple lines, <a href="#">contain links</a>.
  </p>
  <p>
    It may even span multiple paragraphs.
  </p>
</div>
<% end %>

Call to action (preview)

Call to action

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="call-to-action">
  <p>Call to action</p>
</div>
<% end %>

Information callout (preview)

If you drilled a tunnel straight through the Earth and jumped in, it would take you exactly 42 minutes and 12 seconds to get to the other side. 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="application-notice info-notice">
  <p>
    If you drilled a tunnel straight through the Earth and jumped in, it would take
    you exactly 42 minutes and 12 seconds to get to the other side.
  </p>
</div>
<% end %>

Warning callout (preview)

The water in the mouth of a blue whale weighs more than its body. 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="application-notice help-notice">
  <p>
    The water in the mouth of a blue whale weighs more than its body.
  </p>
</div>
<% end %>

Advisory (preview)

This is a very important message or warning 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <h3 role="note" aria-label="Important" class="advisory">
  <span>This is a very important message or warning</span>
</h3>
<% end %>

Form download (preview) 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="form-download">
  <p><a href="http://example.com/" title="Example form" rel="external">An example form download link.</a></p>
</div>
<% end %>

Steps (preview)

  1. Add numbers.

  2. Check numbers.

  3. Love numbers.

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <ol class="steps"> <li> <p>Add numbers.</p> </li> <li> <p>Check numbers.</p> </li> <li> <p>Love numbers.</p> </li> </ol><% end %>

Highlight answer (preview)

Used on:

The VAT rate is 20%

In the 2017 to 2018 tax year, the savings limit for Junior ISAs is £4,128

In the 2017 to 2018 tax year, the maximum you can save in ISAs is £20,000

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="highlight-answer">
  <p>The VAT rate is <em>20%</em></p>
</div>
<div class="highlight-answer">
  <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>
</div>
<div class="highlight-answer">
  <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>
</div>
<% end %>

Place (preview)

This is a place

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <div class="place">
  <p>This is a place</p>
</div>
<% end %>

Buttons (preview) 

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <p>
  <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">Button</a>
  <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>
</p>
<% end %>

Image (preview)

Open water with only mangrove stumps showing above the water. Credit: Blue Ventures-Garth Cripps

Deforested area. Credit: Blue Ventures-Garth Cripps

<%= render "govuk_publishing_components/components/govspeak", {
} do %>
  <figure class="image embedded">
  <div class="img">
    <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">
  </div>
  <figcaption>
    <p>Deforested area. Credit: Blue Ventures-Garth Cripps</p>
  </figcaption>
</figure>
<% end %>