Canvas Common

---

Base CSS

include a link to caremetx.css to ensure that base styles are loaded immediately

example: <link rel="stylesheet" href="https://canvas.caremetx.com/brand/css/caremetx.css" />

base styles can be overridden by a canvas-theme tag

JavaScript takes a while to load in, so the goal here is to have some quick initial styling first
      

Canvas Theme

element name: canvas-theme

attributes:

  value?: string
    default: caremetx

  examples:
    <canvas-theme></canvas-theme>
    <canvas-theme value="caremetx"></canvas-theme>

  includes: canvas-brand styles and  FontAwesome
      

Styles example:

JavaScript example:

Tenant Mode

Deprecated. For canvas-logo and canvas-theme, prefer using "value" instead of "mode" and "tenant".

type name: TenantMode

valid values:

  tenant: use the value specified in the tenant attribute
  parseSubdomain: use the subdomain of the current URL
      

Canvas Logo

Move from mode + tenant to value. Mode and tenant will be removed in a future update.

element name: canvas-logo

attributes:

  mode?: TenantMode
    default: tenant
  tenant?: string
    default: caremetx
  value?: string
    default: caremetx
  height?: string
  width?: string

examples:
  <canvas-logo></canvas-logo>
  <canvas-logo width="12.625rem"></canvas-logo>
  <canvas-logo tenant="caremetx" width="12.625rem"></canvas-logo>
  <canvas-logo mode="tenant" tenant="caremetx" width="12.625rem"></canvas-logo>
  <canvas-logo mode="parseSubdomain" width="12.625rem"></canvas-logo>
      

Canvas Links

Deprecated. Prefer canvas-theme.

element name: canvas-links

attributes:

  mode?: TenantMode
    default: tenant
  tenant?: string
    default: caremetx

examples: 
  <canvas-links></canvas-links>
  <canvas-links tenant="caremetx"></canvas-links>
  <canvas-links mode="tenant" tenant="caremetx"></canvas-links>
  <canvas-links mode="parseSubdomain"></canvas-links>