Canvas Docs

Medical

Import the Medical design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from Medical and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Content types this design adds

Departments

canvas_med_dept

One item is called a Department. You will find them in their own admin menu once the design is installed.

  • Editor features: editor, excerpt, page-attributes, thumbnail, title

Each item carries these extra settings on its edit screen:

  • Hours

  • Dept Icon

  • Location

  • Phone

  • Dept Summary

Doctors

canvas_med_doctor

One item is called a Doctor. You will find them in their own admin menu once the design is installed.

  • Editor features: editor, excerpt, page-attributes, thumbnail, title
  • Grouped by: Specialties (canvas_med_specialty)

Each item carries these extra settings on its edit screen:

  • Doctor Bio

  • Experience

  • Languages

  • Qualifications

  • Doctor Social

  • Doctor Specialty

Blocks this design adds

Medical Departments

canvas-core/med-departments

Department tabs or cards driven by the department records, plus the department single layouts. In the block inserter it is named Canvas Medical Departments.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Medical Departments settings in the block editor sidebar

Layout

  • LayoutDefaultDepartment Tabs

    Which part of the design this block draws: the department tabs, a grid of department cards, or one of the three pieces that build a single department page. The single pieces render nothing anywhere else.

    ChoicesDepartment TabsDepartment CardsSingle Department - AttributesSingle Department - CTASingle Department - Back + Related

Query

  • DepartmentsDefault0

    0 shows every published department.

  • Order ByDefaultMenu Order

    What decides the sequence departments appear in: the order you arranged them in, when each was published, or the department name.

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Whether that sequence runs forwards or backwards. With Order By set to Title, Ascending lists from A to Z.

    ChoicesAscendingDescending

Display

  • Tab Nav IDDefaultcanvas-tab

    HTML id on the row of tab buttons. Each panel is named after it, so two tab sets on one page need two different ids.

    Shown when Layout is "Department Tabs"

  • Tab Content IDDefaultcanvas-TabContent

    HTML id on the box holding the panels.

    Shown when Layout is "Department Tabs"

  • Tab Nav ClassesDefaultnav canvas-tabs tabs nav-tabs mb-3

    Style classes on the row of tab buttons.

    Shown when Layout is "Department Tabs"

  • Panel ID PrefixDefaulttab-

    The panels are named after this, numbered in order: a prefix of tab- gives tab-1, tab-2 and so on. Change it when two tab sets share a page.

    Shown when Layout is "Department Tabs"

  • Tab Content ClassesDefaulttab-content

    Style classes on the box holding the panels.

    Shown when Layout is "Department Tabs"

  • Row ClassesDefaultrow col-mb-50 mb-0

    Style classes on the row that holds the department cards.

    Shown when Layout is "Department Cards"

  • Column ClassesDefaultcol-sm-6 col-lg-3

    Style classes on the column wrapped around each card. These decide how many cards fit across the row at each screen width.

    Shown when Layout is "Department Cards"

  • Card ClassesDefaultfeature-box fbox-plain

    Style classes on each department card itself.

    Shown when Layout is "Department Cards"

  • Department Name TagDefaultH3

    Which heading level a department name uses on a card, so the grid fits the outline of the page around it.

    ChoicesH2H3H4H5Shown when Layout is "Department Cards"

  • Link CardsDefaultOn

    Turn each card icon and name into a link to that department page.

    Shown when Layout is "Department Cards"

Single

  • Departments Page SlugDefaultdepartments

    The page the Back button points at. Given as a page slug so it survives an import.

  • CTA LabelDefaultBook an Appointment

    Label on the button at the foot of a department page.

    Shown when Layout is "Single Department - CTA"

  • CTA Page SlugDefaultappointment

    The page that button opens, given as a page slug so it survives an import.

    Shown when Layout is "Single Department - CTA"

  • Back LabelDefaultAll Departments

    Label on the button returning to the departments page.

    Shown when Layout is "Single Department - Back + Related"

  • Related HeadingDefaultOther Departments

    Heading above the other departments shown at the foot of a department page.

    Shown when Layout is "Single Department - Back + Related"

  • Related DepartmentsDefault3

    How many other departments to show. 0 hides the row.

    Shown when Layout is "Single Department - Back + Related"

Medical Doctors

canvas-core/med-doctors

Doctor cards driven by the doctor records, in grid, list or carousel form, plus the doctor single layouts. In the block inserter it is named Canvas Medical Doctors.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Medical Doctors settings in the block editor sidebar

Layout

  • LayoutDefaultDoctor Cards (grid)

    Which part of the design this block draws: the grid of doctor cards, the wide list rows, the sliding carousel, or one of the three pieces that build a single doctor page. The single pieces render nothing anywhere else.

    ChoicesDoctor Cards (grid)Doctor List (wide rows)Doctor CarouselSingle Doctor - AttributesSingle Doctor - CTASingle Doctor - Back + Related

Query

  • DoctorsDefault0

    0 shows every published doctor.

  • SpecialtyDefaultEmpty

    Show only doctors in one specialty, given as its slug. Empty shows every specialty.

  • Order ByDefaultMenu Order

    What decides the sequence doctors appear in: the order you arranged them in, when each was published, or the doctor name.

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Whether that sequence runs forwards or backwards. With Order By set to Title, Ascending lists from A to Z.

    ChoicesAscendingDescending

Display

  • Row ClassesDefaultrow col-mb-50 mb-0

    Style classes on the row that holds the doctor cards. Leave empty for an unclassed row.

    Shown when Layout is "Doctor Cards (grid)" or "Doctor List (wide rows)"

  • Column ClassesDefaultcol-sm-6 col-md-4 col-xl-3

    Style classes on the column wrapped around each card. These are what decide how many cards fit across the row at each screen width. Empty drops the column wrapper.

    Shown when Layout is "Doctor Cards (grid)" or "Doctor List (wide rows)"

  • Card ClassesDefaultteam

    Style classes on each doctor card itself, inside its column.

  • Photo Wrapper ClassesDefaultteam-image

    Style classes on the wrapper around the doctor photo. On the list layout the design adds column classes here so the photo takes a share of the row.

  • Details Wrapper ClassesDefaultteam-desc

    Style classes on the wrapper around the name, specialty and biography.

  • Doctor Name TagDefaultH4

    Which heading level a doctor name uses, so the grid fits the outline of the page around it.

    ChoicesH2H3H4H5H6

  • Link Name and SpecialtyDefaultOff

    Turn the doctor name and specialty into links to that doctor page. Off leaves them as plain text, which is what the compact carousel card does.

  • Show BiographyDefaultOff

    Show each doctor short biography under the specialty. The wide list rows use it; the compact grid cards leave it off.

  • Show Social LinksDefaultOff

    Show the social icons each doctor record lists.

  • Social Icon ClassesDefaultsocial-icon rounded-circle si-small text-white

    Style classes shared by every social icon. Each icon adds its own network colour class on top.

    Shown when Show Social Links is on

  • Row Break EveryDefault0

    Insert a full-width break after this many cards, which forces the next card onto a fresh line. 0 inserts none.

    Shown when Layout is "Doctor Cards (grid)" or "Doctor List (wide rows)"

  • Photo SizeDefaultLarge

    Which stored size of the doctor photo to serve.

    ChoicesMediumMedium LargeLargeFull

  • Load Photos ImmediatelyDefaultOff

    Load every photo straight away rather than as it scrolls into view. Turn this on inside a carousel or a measured grid, which need the real photo height when they lay themselves out.

Single

  • Doctors Page SlugDefaultdoctors

    The page the specialty link and the Back button point at. Given as a page slug so it survives an import.

  • CTA LabelDefaultBook an Appointment

    Label on the button at the foot of a doctor page.

    Shown when Layout is "Single Doctor - CTA"

  • CTA Page SlugDefaultappointment

    The page that button opens, given as a page slug so it survives an import.

    Shown when Layout is "Single Doctor - CTA"

  • Back LabelDefaultAll Doctors

    Label on the button returning to the doctors page.

    Shown when Layout is "Single Doctor - Back + Related"

  • Related HeadingDefaultOther Specialists

    Heading above the other doctors shown at the foot of a doctor page.

    Shown when Layout is "Single Doctor - Back + Related"

  • Related DoctorsDefault4

    How many other doctors to show. 0 hides the row.

    Shown when Layout is "Single Doctor - Back + Related"

Carousel

  • Items (base)Default0

    Fallback item count for every breakpoint that sets none of its own. 0 leaves it unset.

    Shown when Layout is "Doctor Carousel"

  • Items (XS)Default1

    Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).

    Shown when Layout is "Doctor Carousel"

  • Items (SM)Default2

    Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Doctor Carousel"

  • Items (MD)Default0

    Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Doctor Carousel"

  • Items (LG)Default3

    Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Doctor Carousel"

  • Items (XL)Default4

    Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Doctor Carousel"

  • Item Gap (px)Default30

    Space between one slide and the next, in pixels.

    Shown when Layout is "Doctor Carousel"

  • Show ArrowsDefaultOn

    Show the previous and next arrows beside the slides.

    Shown when Layout is "Doctor Carousel"

  • Arrows Always VisibleDefaultOff

    Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

    Shown when Layout is "Doctor Carousel"

  • Show DotsDefaultOn

    Show the row of dots below the slides, one per page.

    Shown when Layout is "Doctor Carousel"

  • Autoplay (ms)Default0

    Milliseconds between slides. 0 disables autoplay.

    Shown when Layout is "Doctor Carousel"

  • LoopDefaultOff

    Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.

    Shown when Layout is "Doctor Carousel"

  • Transition SpeedDefault250

    Milliseconds per slide transition.

    Shown when Layout is "Doctor Carousel"

  • Centre Active SlideDefaultOff

    Keeps the active slide in the middle of the stage.

    Shown when Layout is "Doctor Carousel"

  • Stage PaddingDefault0

    Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.

    Shown when Layout is "Doctor Carousel"

  • Animate InDefaultEmpty

    Animation class applied to the incoming slide. Empty uses a plain slide.

    Shown when Layout is "Doctor Carousel"

  • Animate OutDefaultEmpty

    Animation class applied to the outgoing slide. Empty uses a plain slide.

    Shown when Layout is "Doctor Carousel"

Was this page helpful?