[Design Issue] Create Example Boxes Design Patterns for Directives, Policy Information, and Examples

[akuas]

This ticket stemmed from the work done in issue 4050: Content Review of the Example Box Text. We use the same custom example box patten even when the information is not an example, but some important policy or help text we want to call out. It may be helpful to keep the alert boxes blue like other information boxes to indicate that they are supplementary information not a warning or error. We may also want to use headers with icons to distinguish an example from relevant policy information. Keep in mind, that for long policy information that is not absolutely critical to answering a field, we should put them in a help drawer not an alert box.

Current list of example boxes

This task is done when…

• [ ] Create a directive alert
• [ ] Create a policy information alert
• [ ] Decide if we want to keep the existing example box design or CMS's information alert
• [ ] designs are shared
• [ ] designs are approved by product
• [ ] if there is a long discussion, a summary of changes for dev will be added to the last comment before transfer
• [ ] a list of changes to be made if this is improving an existing feature

---

Add additional labels (design, dev, compliance, BUG, etc) and size before submitting.

If the issue is needed to complete prioritized work for the CURRENT SPRINT, add it to the "This Sprint" pipeline. Otherwise, all other issues will be automatically added to the unprioritized pipeline for prioritization in backlog refinement or sprint planning with Product.