Finance

Import the Finance 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 Finance 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

Finance Calculator

canvas-core/finance-calculator

A savings-goal or loan-repayment calculator whose inputs, labels, currency and result copy are all editable. In the block inserter it is named Canvas Finance Calculator.

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

Content

• Calculator ModeDefaultSavings goal (target / months)

  Savings mode divides the target by the number of months and assumes no growth. Loan mode applies the standard amortisation formula to the rate the visitor enters.

  ChoicesSavings goal (target / months)Loan repayment (amountrateterm)

• HeadingDefaultSavings goal

  The heading at the top of the calculator card. Leave it empty for a card with no heading.

• Intro TextDefaultEmpty

  A line or two under the heading, for saying what the calculator is for before a visitor starts entering figures.

• Currency SymbolDefault$

  The symbol placed in front of every money figure the calculator shows.

Amount

• Amount LabelDefaultAmount you want to save

  The wording that names the amount control, so a visitor knows what figure to enter.

• Amount Starting ValueDefault10000

  The amount the control rests on when the page loads. A realistic figure here shows a useful answer straight away.

• Amount MinimumDefault0

  The smallest amount a visitor can choose.

• Amount MaximumDefault1000000

  The largest amount a visitor can choose.

• Amount StepDefault500

  How far the amount moves with each nudge of the control. Larger steps make a wide range quick to cross.

Term

• Term LabelDefaultOver how many months

  The wording that names the length of time control.

• Term Starting ValueDefault24

  The number of months the control rests on when the page loads.

• Term MinimumDefault1

  The shortest length of time a visitor can choose, in months.

• Term MaximumDefault360

  The longest length of time a visitor can choose, in months. The default is thirty years.

Rate

• Rate LabelDefaultAnnual interest rate you have been quoted (%)

  The visitor supplies the rate: the block never assumes one.

  Shown when Calculator Mode is "Loan repayment (amount, rate, term)"

• Rate Starting ValueDefaultEmpty

  A rate to start the field at. Leave it empty so the visitor has to supply their own, which keeps the answer honest.

  Shown when Calculator Mode is "Loan repayment (amount, rate, term)"

Result

• Result LabelDefaultYou would need to put aside

  The wording above the answer, which is what turns a bare figure into a sentence.

• Result SuffixDefaultper month

  The wording after the answer, which says what the figure covers.

• Result FootnoteDefaultEmpty

  Shown under the figure: the place to say what the arithmetic does and does not account for.

• Button TextDefaultCalculate

  Wording on the button that works out the answer.

Style

• Card ClassesDefaultcard border-0 shadow-lg p-4

  Style classes on the calculator card. The default drops the border and lifts the card with a deep shadow instead.

• Button ClassesDefaultbtn text-larger btn-dark bg-color px-4 py-2 rounded-pill

  Style classes on that button, which is what draws it as a filled pill in the accent colour.