Alpha

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

Targeted content

On this page

The targeted content component allows users to show and hide sections of related content on a page. It can help users scan and process content on a page more effectively.

However, it does hide content from users and it can be easy for users to miss. When using it, you should aim to use no more than 6 and you shouldn’t have a targeted content on its own.

Because targeted contents hide content, they should always have a clear label/title that helps users understand what is in the section. You can use h3 within them to break up the content.

When to use

When content is only relevant to some particular users visiting the page.

When not to use

They shouldn’t be used to make a page seem shorter, for example: using them to hide large chunks of content. If you find yourself using targeted content to do this, think about:

  • If you’re repeating content on the page and could consolidate it.
  • Using headings on the page instead.
  • If you need to move some of the content onto another page.

Examples

Default variant

Open example in a new tab

If you are a citizen of a country outside the EU, EEA or Switzerland

You should apply to the EU Settlement Scheme if both:

  • you’re in the UK by 31 December 2020
  • you have family in the UK from the EU, EEA or Switzerland

You need to apply to the scheme even if you have a permanent residence card as it will not be valid after 31 December 2020

<div class="cads-targeted-content js-cads-targeted-content" data-descriptive-label-show="show this section, If you are a citizen of a country outside the EU, EEA or Switzerland" data-descriptive-label-hide="close this section, If you are a citizen of a country outside the EU, EEA or Switzerland" data-close-label="Close">
  <h2 class="cads-targeted-content__title js-cads-targeted-content__title" id="h-targeted-content-123" data-testid="targeted-content-title">
    <span class="cads-targeted-content__title-text">
      If you are a citizen of a country outside the EU, EEA or Switzerland
    </span>
  </h2>
  
  <div class="cads-targeted-content__content cads-prose js-cads-targeted-content__content" id="targeted-content-123-content">
    <p>You should apply to the EU Settlement Scheme if both:</p>
    <ul>
      <li>you’re in the UK by 31 December 2020</li>
      <li>you have family in the UK from the EU, EEA or Switzerland</li>
    </ul>
    <p>You need to apply to the scheme even if you have a permanent residence card as it will not be valid after 31 December 2020</p>
  </div>
</div>
<%= render(CitizensAdviceComponents::TargetedContent.new(
  title: "If you are a citizen of a country outside the EU, EEA or Switzerland",
  id: "targeted-content-123"
)) do %>
  <p>You should apply to the EU Settlement Scheme if both:</p>
  <ul>
    <li>you’re in the UK by 31 December 2020</li>
    <li>you have family in the UK from the EU, EEA or Switzerland</li>
  </ul>
  <p>You need to apply to the scheme even if you have a permanent residence card as it will not be valid after 31 December 2020</p>
<% end %>

Adviser variant

Open example in a new tab

Adviser Students or self-sufficient people

You should apply to the EU Settlement Scheme if both:

  • you’re in the UK by 31 December 2020
  • you have family in the UK from the EU, EEA or Switzerland

You need to apply to the scheme even if you have a permanent residence card as it will not be valid after 31 December 2020

<div class="cads-targeted-content js-cads-targeted-content cads-targeted-content--adviser" data-descriptive-label-show="show this section, Students or self-sufficient people" data-descriptive-label-hide="close this section, Students or self-sufficient people" data-close-label="Close">
  <h2 class="cads-targeted-content__title js-cads-targeted-content__title" id="h-targeted-content-adviser" data-testid="targeted-content-title">
    <span class="cads-targeted-content__title-text">
      <span class="cads-targeted-content__badge">
        <span class="cads-badge cads-badge--adviser">Adviser</span>
      </span>
      Students or self-sufficient people
    </span>
  </h2>
  
  <div class="cads-targeted-content__content cads-prose js-cads-targeted-content__content" id="targeted-content-adviser-content">
    <p>You should apply to the EU Settlement Scheme if both:</p>
    <ul>
      <li>you’re in the UK by 31 December 2020</li>
      <li>you have family in the UK from the EU, EEA or Switzerland</li>
    </ul>
    <p>You need to apply to the scheme even if you have a permanent residence card as it will not be valid after 31 December 2020</p>
  </div>
</div>
<%= render(CitizensAdviceComponents::TargetedContent.new(type: :adviser,
  title: "Students or self-sufficient people",
  id: "targeted-content-adviser")) do %>
  <p>You should apply to the EU Settlement Scheme if both:</p>
  <ul>
    <li>you’re in the UK by 31 December 2020</li>
    <li>you have family in the UK from the EU, EEA or Switzerland</li>
  </ul>
  <p>You need to apply to the scheme even if you have a permanent residence card as it will not be valid after 31 December 2020</p>
<% end %>

JavaScript behaviour

Targeted content requires some additional JavaScript behaviour which can be initialised with:

import { initTargetedContent } from '@citizensadvice/design-system';
initTargetedContent();

Note: If you are supporting IE 11 or earlier make sure you include an Element.prototype.closest polyfill.

Fallback behaviour

If JavaScript either fails or is disabled in the users browser the fallback is to show the content as open. Disable JavaScript for this page to see the fallback behaviour in action.

Using with Rails

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

<%= render(CitizensAdviceComponents::TargetedContent.new(
  title: "If you are a citizen of a country outside the EU, EEA or Switzerland",
  id: "targeted-content-123"
)) do %>
  <p>You should apply to the EU Settlement Scheme if both:</p>
  <ul>
    <li>you’re in the UK by 31 December 2020</li>
    <li>you have family in the UK from the EU, EEA or Switzerland</li>
  </ul>
  <p>You need to apply to the scheme even if you have a permanent residence card as it will not be valid after 31 December 2020</p>
<% end %>

Component arguments

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

Argument Description
Argument id Description Required, unique ID
Argument title Description Required, title string
Argument type Description Optional, one of public or adviser. Defaults to public
Argument heading_level Description Optional, sets the heading level of the title. Defaults to 2
Argument close_button Description Optional, include close button at the end of content. Defaults to true