The example paragraph component displays a text-based sample scenario. Example paragraphs give users relatable samples that illustrate complex concepts. They can accommodate complex styling, like lists and headers.

Example components are stylistically similar to the blockquote typography style, since both indicate a small pause in the main content for an illustrative sample or quotation.

When to use

  • Users need a short, specific scenario to help them understand a concept

When to consider something else

  • If a longer, more detailed scenario is required, consider creating a full example scenario page using the Reporting example page template in Wagtail

GitHub issues

<div class="container" style="padding: 2rem">
    <p class="t-sans t-upper">Example</p>
    <div class="example">
        <p>
            If a candidate makes a noncampaign speech at a civic association luncheon and, on the way out, chats with a few attendees about his campaign in response to their questions, the conversation does not convert the appearance into a campaign-related event. On the other hand, if a candidate flew into a city for a trip that involved both personal vacation days and days spent campaigning, an incremental approach to paying for the trip would be required, to avoid the campaign paying the lodging, subsistence and sightseeing expenses on the vacation days — an expense that would be considered an <a href="#">impermissible personal use of campaign funds</a>. Because of the non-incidental nature of the campaign days, the airfare would be considered a campaign-related expense.
        </p>
    </div>
</div>
<div class="container" style="padding: 2rem">
  <p class="t-sans t-upper">Example</p>
  <div class="example">
    <p>
      If a candidate makes a noncampaign speech at a civic association luncheon and, on the way out, chats with a few attendees about his campaign in response to their questions, the conversation does not convert the appearance into a campaign-related event. On the other hand, if a candidate flew into a city for a trip that involved both personal vacation days and days spent campaigning, an incremental approach to paying for the trip would be required, to avoid the campaign paying the lodging, subsistence and sightseeing expenses on the vacation days — an expense that would be considered an <a href="#">impermissible personal use of campaign funds</a>. Because of the non-incidental nature of the campaign days, the airfare would be considered a campaign-related expense.
    </p>
  </div>
</div>
/* No context defined. */
  • Handle: @example-paragraph
  • Preview:
  • Filesystem Path: components/02-components/examples/example-paragraph/example-paragraph.html