Explanation

A titled content block with horizontal rules above and below its body. Used to introduce a section of a page or to fill an empty state — for example the “Your forms” and “Letters” lists in the patient portal when there is nothing to show yet.

          
<section class="explanation">
  <h2 class="explanation__title">Your forms</h2>
  <div class="explanation__content">
    <p>This is where you’ll find forms your care team has shared with you.</p>
  </div>
</section>

Live example:

Your forms

This is where you’ll find forms your care team has shared with you.

Accessibility

Use a real heading element for explanation__title at the level that fits the page outline (h2, h3, …) — do not pick the level for its size. The borders are decorative and need no markup.

Classes

explanation: The wrapper. Apply to the containing element, typically a section.
explanation__title: The heading row above the body.
explanation__content: The body, bordered top and bottom. Paragraphs inside it are spaced automatically.

Consuming apps sometimes add their own state hook (e.g. class="explanation empty" in the patient portal). empty is an application-level marker, not a design-system style.