Alpha

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

Callout

On this page

There are 4 main callout styles in our Design System:

Info callout

This callout style should be used on important, non-mandatory advice for users that don’t have any serious or legal implications. There might be other implications.

Open example in a new tab

Callout title

Some example text

<section class="cads-callout cads-callout--standard">
  <h3>Callout title</h3>
  <p>Some example text</p>
</section>
<%= render(CitizensAdviceComponents::Callout.new(type: :standard)) do %>
  <h3>Callout title</h3>
  <p>Some example text</p>
<% end%>

Example callout

This style is when an example needs to be displayed. Also, use it for quotes.

Open example in a new tab
Example

Callout title

Some example text

<section class="cads-callout cads-callout--example">
  <span class="cads-badge cads-badge--example">Example</span>
  <h3>Callout title</h3>
  <p>Some example text</p>
</section>
<%= render(CitizensAdviceComponents::Callout.new(type: :example)) do %>
  <h3>Callout title</h3>
  <p>Some example text</p>
<% end %>

Important callout

The important callout should be used for any important snippet of text that has serious and/or legal implications if the user does not follow the advice.

Open example in a new tab
Important

Callout title

Some example text

<section class="cads-callout cads-callout--important">
  <span class="cads-badge cads-badge--important">Important</span>
  <h3>Callout title</h3>
  <p>Some example text</p>
</section>
<%= render(CitizensAdviceComponents::Callout.new(type: :important)) do %>
  <h3>Callout title</h3>
  <p>Some example text</p>
<% end %>

Adviser callout

Content that is for advisers. This should not be shown to the public and you should only show this when an adviser is logged in.

Open example in a new tab
Adviser

Callout title

Some example text

<section class="cads-callout cads-callout--adviser">
  <span class="cads-badge cads-badge--adviser">Adviser</span>
  <h3>Callout title</h3>
  <p>Some example text</p>
</section>
<%= render(CitizensAdviceComponents::Callout.new(type: :adviser)) do %>
  <h3>Callout title</h3>
  <p>Some example text</p>
<% end %>

Nested callouts

Callouts can be nested inside of other callouts.

Open example in a new tab

This a nested callout title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque. Vestibulum laoreet magna sagittis felis pellentesque semper. Nullam porta, arcu rhoncus euismod porttitor, risus augue bibendum ipsum, eget tincidunt mi lectus eget eros. Donec nisl ipsum, facilisis vitae tortor maximus, venenatis mattis purus. Quisque fringilla gravida arcu, ut bibendum nibh malesuada at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Adviser

This a callout title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque. Vestibulum laoreet magna sagittis felis pellentesque semper. Nullam porta, arcu rhoncus euismod porttitor, risus augue bibendum ipsum, eget tincidunt mi lectus eget eros. Donec nisl ipsum, facilisis vitae tortor maximus, venenatis mattis purus. Quisque fringilla gravida arcu, ut bibendum nibh malesuada at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<section class="cads-callout cads-callout--standard">
  <h3>This a nested callout title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque. Vestibulum laoreet magna sagittis felis pellentesque semper. Nullam porta, arcu rhoncus euismod porttitor, risus augue bibendum ipsum, eget tincidunt mi lectus eget eros. Donec nisl ipsum, facilisis vitae tortor maximus, venenatis mattis purus. Quisque fringilla gravida arcu, ut bibendum nibh malesuada at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  <section class="cads-callout cads-callout--adviser">
    <span class="cads-badge cads-badge--adviser">Adviser</span>
    <h4>This a callout title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque. Vestibulum laoreet magna sagittis felis pellentesque semper. Nullam porta, arcu rhoncus euismod porttitor, risus augue bibendum ipsum, eget tincidunt mi lectus eget eros. Donec nisl ipsum, facilisis vitae tortor maximus, venenatis mattis purus. Quisque fringilla gravida arcu, ut bibendum nibh malesuada at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </section>
</section>
<% lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque. Vestibulum laoreet magna sagittis felis pellentesque semper. Nullam porta, arcu rhoncus euismod porttitor, risus augue bibendum ipsum, eget tincidunt mi lectus eget eros. Donec nisl ipsum, facilisis vitae tortor maximus, venenatis mattis purus. Quisque fringilla gravida arcu, ut bibendum nibh malesuada at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." %>

<%= render(CitizensAdviceComponents::Callout.new(type: :standard)) do %>
  <h3>This a nested callout title</h3>
  <p><%= lorem %></p>
  <%= render(CitizensAdviceComponents::Callout.new(type: :adviser)) do %>
    <h4>This a callout title</h4>
    <p><%= lorem %></p>
  <% end %>
<% end %>

When to use

Callouts can be used to highlight information within content, for example:

  • Important information
  • Adviser-only information
  • Examples
  • Quotes

Before using a callout, make sure you really need it. Fewer callouts have more of an impact on a piece of content. Too many callouts can confuse and distract users from other important content on a page.

Usage

Callouts should come with a title that explains the subject of the information when possible. This will give the users an idea of what the information is about.

In the Content Platform Rails app

Note that there is code in the Content Platform app that ensure headings inside callouts are rendered with the correct heading level in order to comply with WCAG accessibility standards. This code will not demote a heading past an h4 (ie no h5 etc). No h4 headings should be used in Contentful.

Open example in a new tab

This a nested callout title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque.

Adviser

This a callout title

Its heading has been automatically demoted to an h4 to comply with WCAG.

Another h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque.

Example organisation

Telephone: 0300 555 5555

Monday to Friday, 8am to 5pm

Saturday, 8am to 4pm

Link to the website

<section class="cads-callout cads-callout--standard">
  <h3>This a nested callout title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque.</p>
  <section class="cads-callout cads-callout--adviser">
    <span class="cads-badge cads-badge--adviser">Adviser</span>
    <h4>This a callout title</h4>
    <p>Its heading has been automatically demoted to an h4 to comply with WCAG.</p>
    <h4>Another h4</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque.</p>
    <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>
  </section>
</section>
<% lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a urna nisl. Aenean euismod purus a magna vulputate, eget volutpat neque volutpat. Donec dapibus scelerisque diam eu scelerisque." %>

<%= render(CitizensAdviceComponents::Callout.new(type: :standard)) do %>
  <h3>This a nested callout title</h3>
  <p><%= lorem %></p>
  <%= render(CitizensAdviceComponents::Callout.new(type: :adviser)) do %>
    <h4>This a callout title</h4>
    <p>Its heading has been automatically demoted to an h4 to comply with WCAG.</p>
    <h4>Another h4</h4>
    <p><%= lorem %></p>
    <%= 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 %>
  <% end %>
<% end %>

Using with Rails

If you are using the citizens_advice_components gem you call the component from within a template using:

<%= render(CitizensAdviceComponents::Callout.new(type: :example)) do %>
  <h3> Callout title </h3>
  <p> Some example text</p>
<% end %>

Component arguments

The component accepts a content block for the main contents along with the following arguments:

Argument Description
Argument type Description Optional type. One of :standard, :example, :important, or :adviser. Defaults to :standard.
Argument attributes Description Optional, attributes passed on to callout container element