Background Image

Components

Basic Item

This is an example of a Basic Item added directly to the page. The item has the option to add text content such as headers and paragraphs and can be left-aligned, right-aligned, or center-aligned. You can also add a background colour and a background image, and can blend between the two using an opacity slider.

Primary Button

Basic Item with Background Colour

This is an example of a Basic Item with a background colour added directly to the page.

All items also have the option to apply animation styles, such as Slide, Fade, Flip, Zoom, and many more.

Background Image

Basic Item with Background Image

This is an example of a Basic Item with a background image added directly to the page. 

This item has the Fade In Up animation applied.

Background Image

Basic Item with Background Colour and Background Image

This is an example of a Basic Item with a background colour and background image added directly to the page. The background colour has an 80% opacity applied, so the image behind can be seen.

This item has the Zoom In animation applied.

Dark Button

Basic Item added to Item Container

This is an example of a Basic Item added to an Item Container. When an Item Container has no background colour added the item will default to a white background. There will also be no vertical padding applied, meaning that multiple rows of Item Containers can be stacked on top of each other without the child items being spaced too far apart. You can see an example of this further down the page, or by clicking here.

The Item Container allows up to 4 items to be added, and the width of the items will adjust depending on how many items are added to the container.

When 1 item is added to an Item Container then the width of the item will be set to 100% on all screen sizes.

Item Container with Light Background Colour containing 2 Items


Basic Item added to Item Container

Item Containers can be customised in the same way as Basic Items, with a background colour, a background image, or the option to blend between the two with an opacity slider. This Item Container has a background colour, meaning the additional vertical padding has also been applied.

When 2 items are added to an Item Container then the width of the items will be set to 50% on screens above 992px. On all other screen sizes the width of the items will be set to 100%.

Background Image











Item Container with Dark Background Colour containing 3 Items


Basic Item added to Item Container

This is an example of 3 items added to an Item Container.

Any item can be added to an Item Container in this way, not just basic items. This includes all forms and calculators.

When 3 items are added to a container then the width of the items will be set to 33% on screens above 1200px. On all other screen sizes the width of the items will be set to 100%.

Valuation Form

Please tell us about you

Background Image











Background Image

Item Container with Background Colour and Backgroud Image containing 4 Items


Basic Item added to Item Container

This is an example of 4 various items added to an Item Container.

When 4 items are added to an Item Container then the width of the items will be set to 25% on screens above 1600px, and 50% above 1200px. On all other screen sizes the width of the items will be set to 100%.

The height of the items will always adjust to match the tallest item in the same Item Container.

Background Image











Yield Calculator

Property Value

Monthly Rent

YOUR RENTAL YIELD IS: 0 %

Background Image

Hover Here

Basic Items also have the option to add hover effects, with 10 styles to choose from.

Icon Container with 1 Basic Item

This is an example of a Basic Item added to an Icon Container. When 1 item is added to an Icon Container then the width of the item will be set to 100% on all screen sizes.

When a Basic Item is added to an Icon Container you have the option to add a Font Awesome icon to the item.

For a full list of the 1390 available icons click here.

Icon Container with Background Colour containing 2 Basic Items

This is an example of a 2 Basic Items added to an Icon Container. When 2 items are added to an Icon Container then the width of the items will be set to 50% on screens above 768px. On all other screen sizes the width of the items will be set to 100%.

When a background colour is added to an Icon Container then the icon and text will display in white.

H2

A H2 heading can also be added to the Title field of a Basic Item in an Icon Container instead of a Font Awesome icon.

This can be useful for displaying facts and figures for your company, such as how many offices you have or how many properties you have sold in the previous year.

Icon Container with Background Image containing 3 Basic Items

This is an example of a 3 Basic Items added to an Icon Container. When 3 items are added to an Icon Container then the width of the items will be set to 33% on screens above 768px. On all other screen sizes the width of the items will be set to 100%.

Icons are added to an item in a special field called 'Icon Code'. To add your chosen icon, simply copy and paste the Icon Name from font awesome, preceded by 'fa-'.

In this example the code used is 'fa-couch'.

Icon Containers also have the option to add background images. When a background imge is added to the container the icon and text will display in white.

The code used for this item is 'fa-bath'.

Icon Container containing 4 or more Basic Items

Unlike the Item Container, there is no limit to how many items can be added to an Icon Container.

In this example we have added 6 items to the same container.

When 4 items are added to an Icon Container then the width of the items will be set to 25% on screens above 992px, and 50% on screens above 768px. On all other screen sizes the width of the items will be set to 100%.

When 5 or more items are added to an Icon Container then the additional items will then wrap to the row below. Those items will then adapt to fill the space of the row below.

In this example the width of the items on the 2nd row are set as 50%.

Icon Containers can be useful for displaying multiple services that you offer, without the need to add several containers to a page.

The code used for this item is 'fa-bullhorn'. 

The code used for this item is 'fa-user-astronaut'.

The code used for this item is 'fa-rocket'.

When a Basic Item is added to an Accordion Container it will display differently to an Item Container. The Basic Item will now be an interactive item which can be clicked to display more information. This container is perfect for displaying Frequently Asked Questions.

Primary Button
Unlike the Item Container, there is no limit to how many Basic Items can be added to an Accordion Container.
Accordion Containers also have the option to add Background Images and Background Colours. Please see below for examples of this.
When a background colour is added to an Accordion Container the text will display in white.
The text colour can be overriden if needed. This is helpful if the chosen background colour for the Accordion Container is too light for white text.
There is no limit to the amount of text added to the content of an Accordion Container item.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus mattis diam, sit amet mollis justo pretium sed. Praesent eget euismod ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis non facilisis nisi, ac pellentesque mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec tristique tincidunt luctus. Maecenas nec nisl in nunc viverra volutpat. Proin egestas nunc malesuada, pellentesque massa vestibulum, semper neque. Maecenas mattis est a mauris mattis dignissim. Aliquam molestie, sem ut tempus accumsan, arcu nulla sodales ex, id semper mi arcu at est. Mauris vel libero vitae urna sollicitudin faucibus a sed erat. Pellentesque placerat lectus in tellus accumsan auctor. Donec quis finibus tellus, at imperdiet est. Aenean efficitur sapien et justo lacinia, at accumsan nisl ullamcorper. Aliquam eget libero dapibus, maximus nisi in, volutpat ipsum. Suspendisse potenti.

Aliquam vehicula tincidunt mi in dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec convallis quam quis libero ornare tristique. Vestibulum orci purus, rutrum id lorem ut, condimentum volutpat mi. Fusce sit amet ante convallis, fermentum lectus eget, sagittis libero. Suspendisse eu vestibulum tellus. Vivamus egestas porttitor quam. Phasellus vehicula fermentum risus quis congue. Duis tempus dolor porta risus porttitor, non hendrerit nunc sollicitudin. Ut vehicula est rhoncus, suscipit ipsum sit amet, molestie nibh. Donec lacus tellus, molestie laoreet consequat sed, vulputate at mauris. Nam scelerisque nisi porta nibh commodo, at tempor arcu posuere. Nam erat orci, convallis et purus et, maximus bibendum erat. Suspendisse malesuada mollis pretium.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam orci turpis, laoreet eu felis sit amet, vulputate placerat risus. Proin dolor nisi, sagittis vitae bibendum eget, bibendum sed nisl. In a placerat quam. Pellentesque vel turpis mi. Integer quis mauris quam. Fusce tristique felis non porta semper. Vestibulum eget elementum nibh. Aenean vestibulum sollicitudin lorem ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sapien augue, consequat nec accumsan ut, sagittis id leo. Phasellus sit amet justo dapibus tortor mattis elementum. Aliquam ultricies eu lacus id hendrerit. Nam dapibus vel est in semper. Phasellus dolor nibh, varius eu accumsan maximus, varius a arcu.

Quisque rhoncus eu massa sed porttitor. Cras augue metus, consequat non lacus nec, pulvinar pellentesque nisl. Quisque congue fringilla neque, eget pharetra lectus lobortis nec. Aliquam venenatis est sit amet arcu pretium volutpat. Cras at eleifend nisl, non dapibus arcu. Sed eu vulputate lorem, in consequat augue. Vivamus vel congue nisl, ac fringilla nunc. Integer malesuada tellus quis dolor accumsan, non iaculis tortor pellentesque. Aenean maximus urna nec condimentum vestibulum.
When a background image is added to an Accordion Container the text will display in white.
The text colour can be overriden if needed. This is helpful if the chosen background image for the Accordion Container is too light for white text.
There is no limit to the amount of text added to the content of an Accodion Container item. The background image will always adapt to fill the size of the Accodion Container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus mattis diam, sit amet mollis justo pretium sed. Praesent eget euismod ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis non facilisis nisi, ac pellentesque mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec tristique tincidunt luctus. Maecenas nec nisl in nunc viverra volutpat. Proin egestas nunc malesuada, pellentesque massa vestibulum, semper neque. Maecenas mattis est a mauris mattis dignissim. Aliquam molestie, sem ut tempus accumsan, arcu nulla sodales ex, id semper mi arcu at est. Mauris vel libero vitae urna sollicitudin faucibus a sed erat. Pellentesque placerat lectus in tellus accumsan auctor. Donec quis finibus tellus, at imperdiet est. Aenean efficitur sapien et justo lacinia, at accumsan nisl ullamcorper. Aliquam eget libero dapibus, maximus nisi in, volutpat ipsum. Suspendisse potenti.

Aliquam vehicula tincidunt mi in dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec convallis quam quis libero ornare tristique. Vestibulum orci purus, rutrum id lorem ut, condimentum volutpat mi. Fusce sit amet ante convallis, fermentum lectus eget, sagittis libero. Suspendisse eu vestibulum tellus. Vivamus egestas porttitor quam. Phasellus vehicula fermentum risus quis congue. Duis tempus dolor porta risus porttitor, non hendrerit nunc sollicitudin. Ut vehicula est rhoncus, suscipit ipsum sit amet, molestie nibh. Donec lacus tellus, molestie laoreet consequat sed, vulputate at mauris. Nam scelerisque nisi porta nibh commodo, at tempor arcu posuere. Nam erat orci, convallis et purus et, maximus bibendum erat. Suspendisse malesuada mollis pretium.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam orci turpis, laoreet eu felis sit amet, vulputate placerat risus. Proin dolor nisi, sagittis vitae bibendum eget, bibendum sed nisl. In a placerat quam. Pellentesque vel turpis mi. Integer quis mauris quam. Fusce tristique felis non porta semper. Vestibulum eget elementum nibh. Aenean vestibulum sollicitudin lorem ac molestie. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean sapien augue, consequat nec accumsan ut, sagittis id leo. Phasellus sit amet justo dapibus tortor mattis elementum. Aliquam ultricies eu lacus id hendrerit. Nam dapibus vel est in semper. Phasellus dolor nibh, varius eu accumsan maximus, varius a arcu.

Quisque rhoncus eu massa sed porttitor. Cras augue metus, consequat non lacus nec, pulvinar pellentesque nisl. Quisque congue fringilla neque, eget pharetra lectus lobortis nec. Aliquam venenatis est sit amet arcu pretium volutpat. Cras at eleifend nisl, non dapibus arcu. Sed eu vulputate lorem, in consequat augue. Vivamus vel congue nisl, ac fringilla nunc. Integer malesuada tellus quis dolor accumsan, non iaculis tortor pellentesque. Aenean maximus urna nec condimentum vestibulum.
Background Image

Blog Container
(Grid Layout)


Background Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur ut eros sed sodales. Nullam est enim, pretium sit amet efficitur quis, hendrerit at erat. Vestibulum ante ipsum primis in faucibus...
read article
Background Image

Use Pictures in your blogs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur ut eros sed sodales. Nullam est enim, pretium sit amet efficitur quis, hendrerit at erat. Vestibulum ante ipsum primis in faucibus...
read article
Background Image

Embed Youtube Videos in Your Blog Posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur ut eros sed sodales. Nullam est enim, pretium sit amet efficitur quis, hendrerit at erat. Vestibulum ante ipsum primis in faucibus...
read article
Background Image

Blog Container with Background Image and Background Colour
(Grid Layout)


Background Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur ut eros sed sodales. Nullam est enim, pretium sit amet efficitur quis, hendrerit at erat. Vestibulum ante ipsum primis in faucibus...
read article
Background Image

Use Pictures in your blogs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur ut eros sed sodales. Nullam est enim, pretium sit amet efficitur quis, hendrerit at erat. Vestibulum ante ipsum primis in faucibus...
read article
Background Image

Embed Youtube Videos in Your Blog Posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur ut eros sed sodales. Nullam est enim, pretium sit amet efficitur quis, hendrerit at erat. Vestibulum ante ipsum primis in faucibus...
read article

Call Me Back Form



Fast Lead Form

THANK YOU!

WOULD YOU LIKE TO PROVIDE US MORE INFORMATION?

Property Alert Sign-Up Form

Testimonial Submission Form



Valuation Form



Please tell us about you

Lettings Affordability Calculator


Annual Income

Total Income: £ 0 Annually

Recommended rent range: £ 0 PCM

Mortgage Calculator



Years

Savings Calculator


Please tell us about you

Stamp Duty Calculator


The price of the property

Are you a first time buyer?

Property is a buy to let or second home

Stamp Duty to pay is:

£0 GBP

(Effective rate 0%)

First Time Buyers pay no stamp duty up to £425,000 and on property purchases up to £625,000.

Purchase price of the property Rate of Stamp Duty

£0 - £250,000

0%

£250,001 - £925,000

5%

£925,001 - £1,5 million

10%

Over £1,5 million

12%

How is this calculated?

Under the latest government rules you may pay Stamp Duty at several different rates, depending on the purchase price. Under the old rules, there were several different Stamp Duty rates, but you as a homebuyer, paid the same rate on the whole purchase price.

Yield Calculator


Property Value

Monthly Rent

YOUR RENTAL YIELD IS: 0 %