Media enquiries
2 Marsham Street
London
SW1P 4DF
Press enquiries 020 7XXX XXXX
Out of hours 020 7XXX XXXX
A comment about the contact
Govspeak content example
Common elements
An example of many of the elements in the next sections shown together to demonstrate their spacing.
How it looks (preview)
Heading 2
Paragraph of text, containing some words, such as the word 'words'. I know all the words.
Heading 3
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.
- An unordered list item.
- Another unordered list item.
- Yet another unordered list item.
A paragraph of text following the list. I'm not going to talk about the words anymore.
This text is inside a blockquote.
Yet another paragraph of text. This is starting to sound familiar.
-
An ordered list, this time containing paragraphs in the list items.
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.
-
Still an ordered list, also containing a paragraph.
Another heading 3
And another paragraph.
-
This is known as steps.
-
And this too.
And another paragraph.
This is a warning callout box.
And another paragraph.
This is a warning callout box inside a call to action.
Heading 3
And another paragraph.
| Animal | Size | Legs | Rhymes with | Special abilities |
|---|---|---|---|---|
| Sheep | Medium | Four | Jeep, heap, deep, sleep, keep. | Growing wool on itself that can be harvested and used for clothing. |
| Cow | Large | Four | Now, how, bow, wow. | Has four stomachs. |
This is a paragraph, and now for an address.
First line of address
Second line of address
75 This street
United Kingdom
Phone: 07123456789
This is a paragraph, and now for a contact.
An attachment as a block
Example
This is an indented example block.
It may span multiple lines, contain links.
It may even span multiple paragraphs.
This is another paragraph.
This is an information callout.
This is a warning callout.
This is a text with a footnote1.
How to call this example
<%= render "govuk_publishing_components/components/govspeak", {} do %>
<h2>Heading 2</h2>
<p>Paragraph of text, containing some words, such as the word 'words'. I know all the words.</p>
<h3>Heading 3</h3>
<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>
<ul>
<li>An unordered list item.</li>
<li>Another unordered list item.</li>
<li>Yet another unordered list item.</li>
</ul>
<p>A paragraph of text following the list. I'm not going to talk about the words anymore.</p>
<blockquote>
<p>This text is inside a blockquote.</p>
</blockquote>
<p>Yet another paragraph of text. This is starting to sound familiar.</p>
<ol>
<li>
<p>An ordered list, this time containing paragraphs in the list items.</p>
<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>
</li>
<li>
<p>Still an ordered list, also containing a paragraph.</p>
</li>
</ol>
<h3>Another heading 3</h3>
<p>And another paragraph.</p>
<ol class="steps">
<li>
<p>This is known as steps.</p>
</li>
<li>
<p>And this too.</p>
</li>
</ol>
<p>And another paragraph.</p>
<div class="application-notice help-notice">
<p>
This is a warning callout box.
</p>
</div>
<div class="call-to-action">
<p>And another paragraph.</p>
<div class="application-notice help-notice">
<p>
This is a warning callout box inside a call to action.
</p>
</div>
</div>
<h3>Heading 3</h3>
<p>And another paragraph.</p>
<table>
<caption>This is a table with data</caption>
<thead>
<tr>
<th>Animal</th>
<th>Size</th>
<th>Legs</th>
<th>Rhymes with</th>
<th>Special abilities</th>
</tr>
</thead>
<tbody>
<tr>
<th>Sheep</th>
<td>Medium</td>
<td>Four</td>
<td>Jeep, heap, deep, sleep, keep.</td>
<td>Growing wool on itself that can be harvested and used for clothing.</td>
</tr>
<tr>
<th>Cow</th>
<td>Large</td>
<td>Four</td>
<td>Now, how, bow, wow.</td>
<td>Has four stomachs.</td>
</tr>
</tbody>
</table>
<p>This is a paragraph, and now for an address.</p>
<div class="address">
<div class="adr org fn">
<p>
First line of address
<br>Second line of address
<br>75 This street
<br>United Kingdom
<br>Phone: 07123456789
<br>
</p>
</div>
</div>
<p>This is a paragraph, and now for a contact.</p>
<div class="contact" id="contact_1016">
<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>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",
alternative_format_contact_email: "defra.helpline@defra.gsi.gov.uk" }
%>
<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>
<p>This is another paragraph.</p>
<div class="application-notice info-notice">
<p>
This is an information callout.
</p>
</div>
<div class="application-notice help-notice">
<p>
This is a warning callout.
</p>
</div>
<div class="form-download">
<p><a href="http://example.com/" title="Example form" rel="external">An example form download link.</a></p>
</div>
<p>This is a text with a footnote<sup id="fnref:1b"><a href="#fn:1b" class="footnote">1</a></sup>.</p>
<div class="footnotes">
<ol>
<li id="fn:1b">
<p>And here is the definition. <a href="#fnref:1b" class="reversefootnote">↩</a></p>
</li>
<li id="fn:2b">
<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:2b" class="govuk-link">↩</a>
</li>
</ol>
</div>
<% end %>