The example image component displays a short, specific visual example, often part of a form. Example images give users helpful samples that illustrate complex instructions.
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.
<div class="container" style="padding: 2rem">
<p class="t-sans t-upper">Example</p>
<div class="example_image">
<div class="row example">
<img class="example__image" src="/components/example-image.png" alt="Example image of completed FEC form 3">
<div class="example__caption">
<p>The committee reports the contribution from an individual, in this case from Nellie Custis, on Schedule A, supporting Line 11(a)(i). It includes the name, mailing address, employer, and occupation of the individual. It also includes the date of receipt, amount of receipt, election designation, and aggregate election cycle-to-date total for the contributor.</p>
</div>
</div>
</div>
</div>
<div class="container" style="padding: 2rem">
<p class="t-sans t-upper">Example</p>
<div class="example_image">
<div class="row example">
<img class="example__image" src="/components/example-image.png" alt="Example image of completed FEC form 3">
<div class="example__caption">
<p>The committee reports the contribution from an individual, in this case from Nellie Custis, on Schedule A, supporting Line 11(a)(i). It includes the name, mailing address, employer, and occupation of the individual. It also includes the date of receipt, amount of receipt, election designation, and aggregate election cycle-to-date total for the contributor.</p>
</div>
</div>
</div>
</div>
/* No context defined. */