Hosting

Import the Hosting 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 Hosting 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.

Blocks this design adds

Domain Search

canvas-core/host-domain-search

Domain name field, extension select and search button that opens the page holding the search form. In the block inserter it is named Canvas Domain Search.

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

Settings

• Input Group ClassesDefaultinput-group input-group-lg

  Classes on the row holding the name field, the extension list and the button.

• Name PlaceholderDefaultYour New Domain Name

  Hint text inside the domain name field.

• Name Accessible LabelDefaultEnter Domain Name

  Announced by screen readers in place of a visible label.

• Name Field ClassesDefaultform-control w-auto

  Classes on the domain name field.

• Extension Select ClassesDefaultform-select

  Classes on the extension list.

• Extension Select IDDefaultEmpty

  Optional id on the select element.

• ExtensionsDefaulta preset list of 1 rows

  The domain endings a visitor can choose from, one row each.

  Each row of Extensions takes:

  • LabelDefaultEmpty

    The ending as a visitor reads it, for example .com.

  • ValueDefaultEmpty

    The ending as it is sent to the search page.

  • Selected by DefaultDefaultOff

    Start with this ending chosen.

• Button LabelDefaultSearch

  Wording on the search button.

• Button ClassesDefaultbtn bg-color text-white dark

  Classes on the search button.

• Search PageDefaultEmpty

  The page holding the real search form. The typed name and chosen extension are passed to it.

Host Price

canvas-core/host-price

Live price readout for one resource of the hosting calculator, or for the whole plan. In the block inserter it is named Canvas Host Price.

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

Settings

• ShowsDefaultPlan Total

  A subtotal reads the matching Host Slider block; the total sums every slider on the page.

  ChoicesPlan TotalvCPU SubtotalMemory SubtotalStorage Subtotal

• HTML TagDefaultdiv

  Element the readout is written into. Choose span to keep the figure on the same line as the copy around it.

  Choicesdivspanph1h2h3h4

• Currency SymbolDefault$

  Symbol shown with the amount the calculator writes here.

Host Slider

canvas-core/host-slider

One resource slider of the hosting resource calculator, with its own bounds and unit price. In the block inserter it is named Canvas Host Slider.

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

Settings

• ResourceDefaultvCPU

  Which resource this slider prices. A Host Price block set to the same resource shows its subtotal.

  ChoicesvCPUMemoryStorage

• Input ClassesDefaultrange-slider-cpu

  Classes on the slider input. The first class is how the calculator finds this slider, so give every slider on the page a different one.

• Unit PriceDefault10

  Price of one unit of this resource. The plan total is the sum of every slider value times its own unit price.

• Discrete ValuesDefaultEmpty

  Optional comma-separated list of the only values the handle may stop on (e.g. 1,2,4,6,8). Leave empty to use the minimum / maximum / step below.

• MinimumDefault1

  Lowest amount of this resource a visitor can choose.

• MaximumDefault32

  Highest amount of this resource a visitor can choose.

• Starting ValueDefault1

  Where the handle sits when the page loads, which sets the price a visitor sees first.

• StepDefault1

  How far the handle moves at a time between the minimum and the maximum.

• Value SuffixDefaultCore

  Shown after the value on the slider handle.