Aios Design System

Call-to-Action (CTA) Banners

CTA banners are used to draw attention to a specific action the user can take, that will help them perform a task successfully.

CTA banners always display an action button.

In Aios (the application), CTA banners follow these guidelines:

Used sparingly
Positioned above the relevant content
Implemented as a sticky banner, meaning it remains fixed in relation to its relevant content when scrolling
The lightest Puerto Rico colour is used for the banner background
Has a drop-shadow for emphasis
The action button is a primary button

Notification Banners

Notification banners are used to convey important information, such as announcements or updates.

There are two types of notification banners used in Aios:

Standard notification banners – for general information that the user can dismiss
Critical Information banners – for important notices that must remain visible and cannot be dismissed

Both types of banners follow these guidelines:

Used to display temporary notifications that do not require an action from the user within Aios itself, as with CTA banners
Positioned above the relevant content
Implemented as a sticky banner, meaning it remains fixed in relation to its relevant content when scrolling
When both a standard and critical otification banner is present, the critical information banner should be displayed above the standard notification banner

Critical information Banners

The lightest Red is used for the banner background
The user should notbe able to close the banner

Standard Notification Banners

The lightest Grey is used for the banner background
The user should be able to close the banner

Patient & User Information Banner

The Patient & User Information Banner displays key details to help users quickly identify the active patient and practice they are working with.

In Aios (the application), Patient & User Information Banners follow these guidelines:

Positioned below the relevant top navigation bar, above any other content.
Implemented as a sticky banner, meaning it remains fixed in relation to its relevant content when scrolling
The user does not have the option to close this banner
The lightest shade of the Sea Blue colour is used for the banner background
Labels are black
Information relating to their labels are displayed in Prussian Blue, and Bolded

Aios Core: Displays the details of the active Electronic Health Record currently open in the Clinical System, and the current practice the user is logged into.

Edit Mode: Displays the details of the active Electronic Health Record currently open in the Clinical System, and the current practice the user is logged into.

The Search Results Banner displays the number of search results found.

Document (RDOC) Banners

Document banners are added by the Content Department, to provide information and context for forms and content.

There are three types of document banners: Instruction Banners, Content Advisory Banners, and Review Date Banners.

When multiple banners are present, they are stacked in the following order:

Review Date Banners
Content Advisory Banners
Instruction Banners

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Instruction banners provide guidance related to the content within forms.

These can be configured with either plain text or rich text for enhanced clarity and detail.

Content Advisory Banners convey a message relevant to all content associated with a specific Publisher.

Notifies users about the status of content that has passed or is nearing its review date, if the "Skip Review" checkbox is not selected during import.