Global Core Electronic Medicinal Product Information (ePI)
1.1.0 - trial-use International flag

Global Core Electronic Medicinal Product Information (ePI), published by HL7 International / Biomedical Research and Regulation. This guide is not an authorized publication; it is the continuous build for version 1.1.0 built by the FHIR (HL7® FHIR® Standard) CI Build. This version is based on the current content of https://github.com/HL7/emedicinal-product-info/ and changes regularly. See the Directory of published versions

Style Sheets

Page standards status: Informative

Electronic Medicinal Product Information (ePI) documents and their associated tracking registries (ePI Tracking Lists) are structured as FHIR Bundle and List resources, respectively. Since raw XML or JSON code is not suitable for end-users (patients, healthcare professionals, or regulators), this data must be rendered into modern, human-readable interfaces.

This page provides guidance and standalone examples for transforming both individual ePI Bundles and ePI Tracking Lists into user-friendly HTML displays using CSS.

NOTE

Implementation Flexibility: The stylesheet and HTML renderings included in this IG are provided as best-practice examples. Implementers are free to reuse this stylesheet, modify it, or develop their own according to national regulatory rules.

Design Philosophy

It is best practice to follow WCAG principles (accessibility) and standard web-design principles (usability, responsiveness).

Critical Rule: The rendering process (HTML/CSS) should only change the visual appearance and add navigational aids (e.g., accordions, tables of contents). It should avoid altering the actual text or meaning of the content. This ensures that the style sheet and HTML rendering process does not compromise any national regulatory rules regarding the authorized content.

The example provided in this IG demonstrates a Card-based Layout with Accordion sections. This approach ensures:

  • Hierarchy: Clear distinction between the broad Product Details and specific strengths.
  • Readability: Clean, high-contrast content areas.
  • Responsiveness: A layout that adapts to desktop and mobile screens.

Example Stylesheets (CSS)

You can download the standalone stylesheets used in our examples here:

1. ePI Document Stylesheet

This stylesheet provides the "Modern Visual Grid" look for individual ePI documents, featuring rounded cards, collapsible accordions, and color-coded sections for Ingredients (Blue), Regulatory (Green), Packaging (Purple), Appearance (Orange), and Clinical Knowledge (Teal).

2. ePI Tracking List Stylesheet

This stylesheet provides a custom dark-mode, business-friendly interface specifically designed for rendering the List resource tracking showcases. It includes styling for status badges, grid-based entry cards, and modern UI tokens suitable for tracking multiple product registries.

Rendered Examples

View the fully rendered HTML examples below to see the stylesheets in action:

Individual Product ePIs:

ePI Tracking Lists (List resource):