Canvas Docs

Covid Care

Import the Covid Care 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 Covid Care 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

Care Services

canvas_care_service

One item is called a Care Service. 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:

  • Service Full Title

  • Service Summary

Blocks this design adds

Care Services

canvas-core/care-services

Display care services from the Care Services post type as a numbered feature rail, pill tabs, a directory grid, or a single service page. In the block inserter it is named Canvas Care Services.

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

The Care Services settings in the block editor sidebar

Layout

  • LayoutDefaultDirectory Grid

    Which part of the design this block draws. The two Pill Tabs choices are a pair: place the tab list in one column and the panes in another, and give both the same Tabs ID Prefix so they work together.

    ChoicesDirectory GridNumbered Feature RailPill Tabs - Tab ListPill Tabs - PanesSingle Service - MetaSingle Service - CTASingle Service - Back + Related

Query

  • ItemsDefault0

    0 shows all services.

  • Order ByDefaultMenu Order

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

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Whether that sequence runs forwards or backwards. The numbered rail counts in the same direction.

    ChoicesAscendingDescending

Feature Rail

  • Feature Box ClassesDefaultfeature-box fbox-border fbox-light fbox-effect

    Style classes shared by every item on the numbered rail, which is what draws the outlined marker and the line joining one item to the next.

  • First Feature Box ClassesDefaultfeature-box fbox-color

    Classes for the first item, which opens the rail with a filled marker. Empty falls back to the shared feature box classes.

  • Last Feature Box Extra ClassesDefaultnoborder

    Appended to the last item so the connector rail stops there.

  • Text Column ClassesDefaultcol-md-6

    Style classes on the column holding the wording of a rail item, which is what sets how much of the row the text takes.

  • Illustration Column ClassesDefaultcol-md-4 text-center

    Style classes on the column holding the picture beside a rail item.

  • Illustration ClassesDefaultp-4

    Style classes on the picture itself. The default insets it so it does not crowd the wording.

  • Last Illustration ClassesDefaultp-5

    Classes for the final illustration, which the design insets further. Empty reuses the shared illustration classes.

  • Illustration HeightDefault230

    How tall the picture beside a rail item is drawn, in pixels. Set it to 0 to leave the height to the picture itself.

  • Item Title ClassesDefaulttext-transform-none text-larger mb-2

    Style classes on the name of a rail item. The default keeps it as typed rather than in capitals, and a size up from the body copy.

  • Link Markers to the ServiceDefaultOn

    Wraps each numbered marker in a link to that service page.

Pill Tabs

  • Tabs ID PrefixDefaultcanvas-tabs

    Shared id prefix that binds the tab list to its panes. Use the same value on both blocks.

  • Panes Container IDDefaultEmpty

    Element id for the panes container. Empty derives it from the ID prefix.

  • Tab List ClassesDefaultnav flex-column nav-pills

    Style classes on the list of tabs. The default stacks them down the page as pills; drop the column class to lay them across instead.

  • Tab Number ClassesDefaultcolor-2 font-body me-1

    Style classes on the counting number in front of each tab.

  • Pane ClassesDefaulttab-pane text-center

    Style classes on each pane, the area a tab reveals.

  • Pane Body ClassesDefaultd-block text-start mt-5 mw-xs

    Style classes on the wording inside a pane, under the picture. The default keeps the reading width narrow and the text ranged left.

  • Pane Title ClassesDefaultmb-3

    Style classes on the heading inside a pane, which is what sets the gap under it.

  • Pane Illustration HeightDefault350

    How tall the picture inside a pane is drawn, in pixels. Keeping every pane the same height stops the page jumping as a visitor moves between tabs.

  • Last Pane Illustration HeightDefault320

    0 reuses the shared pane illustration height.

  • Clearfix After First IllustrationDefaultOn

    Adds a clearing element under the first pane illustration.

  • Intro Video URLDefaultEmpty

    Optional lightbox video link shown under the tab list. Empty hides the button.

  • Intro Video Button TextDefaultWatch Intro Video

    Wording on the button under the tab list that opens the intro video.

  • Intro Video Button ClassesDefaultbutton button-large rounded-pill bg-color-2 button-light text-dark text-center ls-0 fw-medium ms-0 mt-3 w-auto

    Style classes on that button, which is what draws it as a large pale pill.

  • Intro Video Button IconDefaultbi-play-circle-fill me-1

    The icon shown before the wording on the video button.

  • Intro Video Icon Inline StyleDefaultposition: relative; top: 1px; margin-right: 5px;

    Styling written straight onto that icon. The default nudges it down a fraction so it sits level with the wording beside it.

Directory Grid

  • Grid Row ClassesDefaultrow align-items-stretch col-mb-50

    Style classes on the row that holds the directory cards. The default makes every card in a row the same height.

  • Grid Column ClassesDefaultcol-lg-4 col-md-6

    Style classes on the column each card sits in. This is what decides how many cards fit across the row at each screen width.

  • Grid Card ClassesDefaultfeature-box fbox-center fbox-dark fbox-plain

    Style classes on the card itself, which is what centres its contents and leaves it without a box or border.

  • Grid Illustration HeightDefault140

    How tall the picture at the top of a directory card is drawn, in pixels. One height for all of them keeps the row of cards even.

  • Card Link TextDefaultLearn more

    Wording on the link at the foot of a directory card that opens the service page.

  • Card Link ClassesDefaultcolor fw-bold border-bottom border-width-2 border-color text-capitalize

    Style classes on that link, which is what gives it the accent colour and the thick underline.

Single

  • Services Page SlugDefaultcovid-care-directory

    Slug of the services directory page. The single layouts resolve it to a portable permalink for the "Back" button. Empty = no link.

  • CTA Page SlugDefaultcovid-care-appointment

    Slug of the page the single CTA links to. Resolved server-side so the link survives import. Empty = no button.

  • CTA Button TextDefaultBook an Appointment

    Wording on the booking button at the foot of a service page. Leave it empty and no button appears.

  • Back Button TextDefaultAll Care Services

    Wording on the button that returns a visitor from a service page to the directory. Leave it empty and no button appears.

  • Related HeadingDefaultMore ways we care

    Heading above the row of other services at the foot of a service page. Leave it empty to show them with no heading.

  • Single Eyebrow TextDefaultCare Service

    Small linked label above the service title on its own page. Empty hides it.

Was this page helpful?