Alpha

This is an alpha release of our documentation site. View the roadmap.

Contact details

Contact details - such as an address. Paragraphs inside of .contact-details have their vertical margins removed to allow for information to appear visually grouped.

The business name should be marked up as bold (b).

Open example in a new tab

Example organisation

Telephone: 0300 555 5555

Monday to Friday, 8am to 5pm

Saturday, 8am to 4pm

Link to the website

<div class="cads-contact-details">
  <p><b>Example organisation</b></p>
  <p>Telephone: 0300 555 5555</p>
  <p>Monday to Friday, 8am to 5pm</p>
  <p>Saturday, 8am to 4pm</p>
  <p><a href="http://example.com">Link to the website</a></p>
</div>
<%= render(CitizensAdviceComponents::ContactDetails.new) do %>
  <p><b>Example organisation</b></p>
  <p>Telephone: 0300 555 5555</p>
  <p>Monday to Friday, 8am to 5pm</p>
  <p>Saturday, 8am to 4pm</p>
  <p><a href="http://example.com">Link to the website</a></p>
<% end %>

Using with Rails

If you are using the citizens_advice_components gem, you can call the component from within a template following the example below.

<%= render(CitizensAdviceComponents::ContactDetails.new) do %>
  <p><b>Example organisation</b></p>
  <p>Telephone: 0300 555 5555</p>
  <p>Monday to Friday, 8am to 5pm</p>
  <p>Saturday, 8am to 4pm</p>
  <p><a href="http://example.com">Link to the website</a></p>
<% end %>

The component accepts a single content block as shown above.