Omnira Docs v1.0.0

Section reference › Real estate

Mortgage calculator "type": "mortgage"

An interactive mortgage calculator that shows the estimated monthly payment, loan amount and total interest. Use it on real estate or finance sites, with a heading and selling points beside it.

Example of the mortgage section
The example below, rendered with placeholder images.

Example#

Paste this into the sections list of a page file:

JSON
{
  "type": "mortgage",
  "tone": "alt",
  "eyebrow": "Plan your budget",
  "title": "What will your monthly payment be?",
  "text": "Adjust the price, deposit and rate to see an estimate. Our mortgage partners can give you a firm quote within a day.",
  "list": [
    "Pre-approval in 24 hours",
    "Rates from 12 lenders compared",
    "No fee for first-time buyers"
  ],
  "buttons": [
    {
      "label": "Talk to an advisor",
      "href": "contact.html"
    }
  ],
  "price": 540000,
  "down": 15,
  "rate": 6.25,
  "years": 30
}

Options#

OptionTypeDefaultDescription
eyebrowstring—Small label shown above the title. The heading is always left-aligned in this section.
titlestring (HTML allowed)—Section heading. You can use <em> or <br> inside it. The heading is always left-aligned in this section.
textstring—Short intro paragraph under the title. The heading is always left-aligned in this section.
listarray of strings—Check-mark bullet points under the text.
buttonsarray—Buttons under the text on the left. See the "buttons" fields.
pricenumber750000Starting home price in the calculator.
downnumber20Starting down payment, in percent.
Values: 0-100
ratenumber6.5Starting interest rate, in percent.
Values: 0-25
yearsnumber30Starting loan term. Must be one of the listed values.
Values: 10 | 15 | 20 | 25 | 30
layoutstringsplit"split": text on the left, calculator on the right. "card": only the calculator in a small card, for sidebars. With "card" the common options are ignored and only "title" is used.
Values: split | card
barebooleanfalseWith layout "card": output just the card, for use inside another column.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in buttons#

OptionTypeDefaultDescription
labelstring—Button text. A button without a label is not shown.
hrefstring—Link address, e.g. "contact.html" or "#pricing". Default "#".
stylestring—primary (default) | outline | light | dark | accent | link. "link" is a text link with an arrow.
iconstring—Bootstrap Icons name shown after the label, without "bi-" (e.g. "arrow-right").
videostring—A YouTube/Vimeo embed URL. The button then opens the video in a pop-up instead of following href.

Variants and styles#

split#

Default. Heading, bullet list and buttons on the left, calculator on the right.

JSON
{
  "type": "mortgage",
  "tone": "alt",
  "eyebrow": "Plan your budget",
  "title": "What will your monthly payment be?",
  "text": "Adjust the price, deposit and rate to see an estimate. Our mortgage partners can give you a firm quote within a day.",
  "list": [
    "Pre-approval in 24 hours",
    "Rates from 12 lenders compared",
    "No fee for first-time buyers"
  ],
  "buttons": [
    {
      "label": "Talk to an advisor",
      "href": "contact.html"
    }
  ],
  "price": 540000,
  "down": 15,
  "rate": 6.25,
  "years": 30
}

card#

Only the calculator, in a compact card with an optional title. Meant for a narrow column or sidebar.

JSON
{
  "type": "mortgage",
  "layout": "card",
  "title": "Mortgage calculator",
  "price": 425000,
  "down": 10,
  "rate": 6.75,
  "years": 25
}

Tips#

  • The currency symbol comes from the demo's "currency" setting (in demo.json), not from this section.
  • Use a "years" value of 10, 15, 20, 25 or 30. Any other number leaves the dropdown on 10 years.
  • On its own in a page, the "card" layout sits centred in a normal section. Inside another section's column, add "bare": true to get just the card.
  • Property pages (property-detail) already include a calculator for homes that are for sale, so you do not need to add one there.

Editing it in the HTML files#

The starting values are the value attributes of the inputs inside form.mortgage (name="price", "down", "rate"), and the selected option of the years select. The results are calculated in the browser, so there is nothing else to change.

Where it's used#

Open these pages in template/ to see it working:

  • Real Estate: template/real-estate/buy.html (source src/demos/real-estate/pages/buy.json)