Mortgage

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

Loan Programs

canvas_mtg_loan

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

• Editor features: custom-fields, editor, excerpt, page-attributes, title

Each item carries these extra settings on its edit screen:

• Best For

• Credit Score

• Minimum Down Payment

• Loan Icon

• Loan Terms

Blocks this design adds

Loan Programs

canvas-core/mortgage-loans

Show the loan programs from the Loan Programs post type as icon cards, or render the pieces of a single program page (title and summary, requirements card, other programs). In the block inserter it is named Canvas Loan Programs.

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

Layout

• LayoutDefaultProgram Cards

  Which part of the loan program design this block draws. Program Cards lists every program; each "Single Program" choice renders one section of the program page you place it on.

  ChoicesProgram CardsSingle Program - Title and SummarySingle Program - Requirements CardSingle Program - Other Programs

Query

• ProgramsDefault0

  0 shows every program. Other Programs shows three when this is left at 0.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Order ByDefaultMenu Order

  What decides the sequence of the cards. Menu Order lets you arrange them by hand on the programs list screen.

  ChoicesMenu OrderDateTitleShown when Layout is "Program Cards" or "Single Program - Other Programs"

• OrderDefaultAscending

  Which end of that sequence comes first.

  ChoicesAscendingDescendingShown when Layout is "Program Cards" or "Single Program - Other Programs"

Display

• Row ClassesDefaultrow g-4

  Class names on the row holding the cards, which is where the gutter between them is set.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

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

  Column classes on each card: how many cards sit side by side at each screen width.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Record Identity ClassesDefaultOn

  Add WordPress's own per-record classes (post id, type, status) to each card column.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Card ClassesDefaultloan-card h-100 p-4 rounded-3

  Class names on the card itself, which set its padding, corners and hover state.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Card StyleDefaultbackground: var(--cnvs-contrast-0); box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-top: 3px solid transparent; transition: border-color 0.25s ease, box-shadow 0.25s ease;

  Inline CSS on each card: its surface, shadow and the top rule that lights up on hover.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Icon Badge ClassesDefaultmb-3

  Class names on the square badge around the program icon.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs" or "Single Program - Title and Summary"

• Icon Badge StyleDefaultwidth: 52px; height: 52px; background: rgba(var(--cnvs-themecolor-rgb), 0.08); border-radius: 14px; display: flex; align-items: center; justify-content: center;

  Inline CSS on the icon badge: its size, tint and corner radius. Leave empty to draw the icon with no badge.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs" or "Single Program - Title and Summary"

• Icon StyleDefaultfont-size: 1.375rem; color: var(--cnvs-themecolor);

  Inline CSS on the icon glyph: its size and colour.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs" or "Single Program - Title and Summary"

• Card Title ElementDefaulth5

  Which heading level each card title uses, so the page keeps one sensible outline.

  Choicesh2h3h4h5h6Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Card Title ClassesDefaultfw-bold mb-2

  Class names on each card title.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Card Title StyleDefaultcolor: var(--cnvs-contrast-900);

  Inline CSS on each card title.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Description ClassesDefaultmb-3

  Class names on the short description under each card title.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Description StyleDefaultcolor: var(--cnvs-contrast-600); font-size: 0.9375rem; line-height: 1.65;

  Inline CSS on the short description.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Link TextDefaultLearn More

  Wording of the link at the foot of each card that opens the program page. Leave empty for no link.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Link StyleDefaultcolor: var(--cnvs-themecolor); font-size: 0.9375rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;

  Inline CSS on the card link.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Link IconDefaultbi-arrow-right

  Glyph after the link text, which slides on card hover. Leave empty for text only.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

• Link Icon StyleDefaultfont-size: 0.85rem;

  Inline CSS on the link icon.

  Shown when Layout is "Program Cards" or "Single Program - Other Programs"

Single

• Program Title ClassesDefaultfw-bold mb-3

  Class names on the program name at the top of its own page.

  Shown when Layout is "Single Program - Title and Summary"

• Program Title StyleDefaultcolor: var(--cnvs-contrast-900); font-size: 2rem; line-height: 1.25;

  Inline CSS on the program name.

  Shown when Layout is "Single Program - Title and Summary"

• Summary ClassesDefaultmb-4

  Class names on the summary under the program name (the program's excerpt).

  Shown when Layout is "Single Program - Title and Summary"

• Summary StyleDefaultcolor: var(--cnvs-contrast-600); font-size: 1.0625rem; line-height: 1.7;

  Inline CSS on the summary.

  Shown when Layout is "Single Program - Title and Summary"

• Card HeadingDefaultAt a Glance

  Heading of the requirements card.

  Shown when Layout is "Single Program - Requirements Card"

• Card IntroductionDefaultThe headline requirements for this program. Your loan officer confirms the exact figures for your situation.

  Sentence under the card heading. Leave empty to omit it.

  Shown when Layout is "Single Program - Requirements Card"

• Requirement RowsDefaulta preset list of 4 rows

  The rows of the requirements card, in order.

  Shown when Layout is "Single Program - Requirements Card"

  Each row of Requirement Rows takes:

  • ValueDefaultMinimum Down Payment

    Which of the program's own details this row shows. A program that leaves the detail empty skips the row.

    ChoicesMinimum Down PaymentCredit ScoreLoan TermsBest For

  • LabelDefaultEmpty

    Bold label above the value.

  • IconDefaultEmpty

    Glyph in the tinted square at the start of the row.

• Card ClassesDefaultp-4 p-lg-5 rounded-4 h-100

  Class names on the requirements card.

  Shown when Layout is "Single Program - Requirements Card"

• Card StyleDefaultbackground: rgba(var(--cnvs-themecolor-rgb), 0.06); border: 1px solid rgba(var(--cnvs-themecolor-rgb), 0.12);

  Inline CSS on the requirements card: its tint and border.

  Shown when Layout is "Single Program - Requirements Card"

• Button TextDefaultGet Pre-Qualified

  Wording on the button at the foot of the card. Leave empty for no button.

  Shown when Layout is "Single Program - Requirements Card"

• Button Page SlugDefaultcontact

  Slug of the page the button opens. Resolved to a portable permalink so the link is correct on any install or import.

  Shown when Layout is "Single Program - Requirements Card"

• Button ClassesDefaultbutton button-rounded button-large mt-4

  Class names that set the look of the button.

  Shown when Layout is "Single Program - Requirements Card"

• Button StyleDefaultbackground: var(--cnvs-themecolor); color: #fff;

  Inline CSS on the button.

  Shown when Layout is "Single Program - Requirements Card"