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
Basic Item with 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%.
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%.
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.
Hover Here
Multiple Item Containers with No Background Colour
The below items also demonstrate the full list of hover effects available with Basic Items.
Hover Here
Hover Here
Hover Here
Hover Here
Hover Here
Hover Here
Hover Here
Hover Here
Hover Here
Hover Here
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'.
Primary Button
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.
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.
Basic Item added to Slider Container
Basic Item added to Slider Container
Basic Item added to Slider Container
Basic Item added to Slider Container with Background Colour
Basic Item added to Slider Container with Background Colour
Basic Item with Background Colour added to Slider Container with Background Colour
Basic Item added to Slider Container with Background Image
Basic Item added to Slider Container with Background Image
Basic Item with Background Image added to Slider Container with Background Image
Blog Container
(Grid Layout)
Use Pictures in your blogs
Blog Container with Background Image and Background Colour
(Grid Layout)
Use Pictures in your blogs
Blog Container
(Carousel Layout)
Use Pictures in your blogs
Embed Youtube Videos in Your Blog Posts
And also Vimeo Videos
Blog Container with Background Image and Background Colour
(Carousel Layout)
Use Pictures in your blogs
Embed Youtube Videos in Your Blog Posts
Featured Property Container
(Grid Layout)
Featured Property Container with Background Colour and Background Image
(Grid Layout)
Featured Property Container
(Carousel Layout)
Featured Property Container with Background Colour and Background Image
(Carousel Layout)