COVID-19: Staging environment

No Results Found 0/0

Functional overview

Text with Icon block

We use the “text with icon” field to quickly orient the user with the type of information/content to expect in the inline copy by using common and easy to understand visual cues/icons.

Used when providing guidance/best practice/recommendations re delivering care/permission to do something. 

For example:

Used when providing external links to recommendations/further information. 

For example:

Used when conveying REALLY important information that applies to the whole population, high risks, red flags, gov’t requirements, etc.  The point of use is to make the user STOP and read.  So we tended to use it sparingly otherwise the impact of the icon will be diluted.

For example:

  • Any persons experiencing one of the following should be told to self-isolate and tested as soon as possible:
    • Fever (temperature of 37.8°C or greater)
    • New/worsening cough
    • Shortness of breath (dyspnea)
    • Sore throat
    • Difficulty swallowing
    • New olfactory or taste disorder(s)
    • Nausea/vomiting, diarrhea, abdominal pain
    • Runny nose, or nasal congestion (in absence of underlying reason for these symptoms such as seasonal allergies, post nasal drip, etc.)
  • There is only low-quality evidence available on COVID-19, as it is an emerging virus. Many studies being released have not been peer-reviewed. Among those that have been peer-reviewed, many are small, retrospective observational studies and thus have serious limitations and risks of bias. While the findings of emerging COVID-19 studies can be useful in helping to broaden our understanding about how the virus might operate, the results of COVID-19 studies should not be considered validated.
  • As reports of children experiencing a multi-system inflammatory syndrome multiply, the Canadian Paediatric Surveillance Program issued a Public Health Alert (CPSP, May 12, 2020) encouraging those providing paediatric care to familiarize themselves with the presentations of this emerging syndrome. It has now been included in the case definition and is reportable to public health.

Generally used when conveying information that applies to the part of the population, things that are “strongly recommended” but maybe not yet mandated, cautions, etc. Similar criteria as the (!) icon, but with a content that isn’t quite as MUST READ. The point of use is to make the user PAUSE and read.  Used more frequently.

For example:

  • OCFP and CFPC suggest strongly considering PPE use for all patient encounters that involve less than 6 feet of separation due to the possibility of asymptomatic and pre-symptomatic transmission. For more information on PPE, see Infection prevention and control: PPE, HCW infection control, cleaning.
  • While rare, clinicians should be aware of this potential syndrome and maintain a high index of suspicion to identify cases. Some patients have deteriorated quickly and have required intensive care unit admission for vasopressors and mechanical ventilation.
  • Caution should be taken when using NSAIDs in the context of acute respiratory infections (ARI) and patients with the following conditions.

Commonly used and understood icon that conveys “geolocate”. Used when linking out to regional/local resources.  

For example:

Used for when we provide talking tips.

For example:

  • Responding to questions about unproven therapies for COVID-19: “Though research is underway, there are currently no medications recommended for preventing or treating COVID-19 because there is not enough evidence to make any conclusions yet” (CMAJ, 2020).
  • “This is your home and we will make every effort to make you comfortable in your new room with all of your belongings.”
  • “In-room dining is important for you and other residents so that we can protect everyone, including yourself.”
Table block options
Table

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

  • Mostly commonly used “table”. “cleanest” in look and feel.  Allows for a maximum of 3 columns, infinite rows.
  • For example, used consistently throughout the tool in a section’s “Top resources”.
  • Inner border can be grey or blue.
Table with Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

FAQ/info block

Answer 1

Answer 2

Answer 3

Another “click to reveal” block. commonly used for FAQs, chronic diseasae mgmt, special pops, etc. For example:

Please note the content contained within the answer is NOT searchable using the search function.

Stack of papers. Multiple Choice
Option 1
can have multiple rows within section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

can have multiple rows within section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

can have multiple rows within section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

Option 2
can have multiple rows within section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

can have multiple rows within section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non maximus tellus, at tristique velit. Aliquam interdum arcu orci, id congue lacus elementum ac. Phasellus congue aliquam lectus sed porta. Morbi turpis tellus, pharetra fermentum consectetur sollicitudin, viverra pretium ex. Quisque consectetur faucibus felis et varius. Nulla mattis maximus dolor, in consequat est pulvinar ac. Pellentesque eleifend eu tortor et cursus. Integer iaculis quis sapien congue commodo. Proin ullamcorper posuere eros, nec ultrices odio elementum aliquam. Aliquam erat volutpat.

Takes up a lot of page “real estate”. We tend to NOT use unless there are multiple Y/N questions/use of block consistently. For example, see: COVID-19: Social Care Guidance. Please note the content contained within the answer is NOT searchable using the search function.

Card block

We use this block when displaying similar information that has consistent headings/categories. It was originally developed to contain rx info. Allows us to use horizontal real estate and not overload the vertical/infinite scroll issue. Also gives provides opportunity to add additional information with each card that pops out for more details. Mobile friendly. Searchable in search function. For example:

Pop-out block

Designed for talking tips, etc. Generally used to contain information that is not necessarily immediately relevant for all users. But, for those that are interested, they can click to “opt-in” to view the content. Content is NOT searchable using the search function. For example:

Image block

Used for images of diagrams, static flow charts, evidence tables that go beyond three columns, etc. Please note, if we can we try NOT to use images for evidence tables are they do not render well in mobile. Where possible, consider how the content can be summarized differently/more succiently before going down the image route. For example:

Red Flags

adfafdasf

adsfasfa

["Fingerprint"]
["Fingerprint"]
['50074653']
['50074653']
["Fingerprint"]
["Fingerprint"]
['50074699']
['50074699']
['50074653']
['50074653']
["Fingerprint"]
["Fingerprint"]
['50074653']
['50074653']
["Fingerprint"]
["Fingerprint"]
['50074653']
['50074653']