Hart Grayson Theme Modules

Accordion

MOD001

Repeater module that gives an expanding/collapse accordion section.

Module options:

  • Select open/close icons (including custom FontAwesome icon option)
  • Toggle to allow only one item to be expanded at a time
  • Toggle to automatically show/expand the first accordion item
  • Repeater items include the 'Title' which displays on the accordion row, and a 'Rich Text' module which is the expanded accordion content

Pellentesque dapibus hendrerit tortor. Phasellus nec sem in justo pellentesque facilisis. Proin faucibus arcu quis ante. Aenean vulputate eleifend tellus. Maecenas malesuada.

Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Sed libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.

  • Fusce vel dui. Nullam dictum felis eu pede mollis pretium. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Praesent egestas neque eu enim.
  • Phasellus magna. Aenean ut eros et nisl sagittis vestibulum. Ut tincidunt tincidunt erat. Maecenas egestas arcu quis ligula mattis placerat. Sed fringilla mauris sit amet nibh.
  • Nullam quis ante. Phasellus consectetuer vestibulum elit.. Cras varius. Vivamus laoreet.

Pellentesque dapibus hendrerit tortor. Phasellus nec sem in justo pellentesque facilisis. Proin faucibus arcu quis ante. Aenean vulputate eleifend tellus. Maecenas malesuada.

Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Sed libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.

  • Fusce vel dui. Nullam dictum felis eu pede mollis pretium. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Praesent egestas neque eu enim.
  • Phasellus magna. Aenean ut eros et nisl sagittis vestibulum. Ut tincidunt tincidunt erat. Maecenas egestas arcu quis ligula mattis placerat. Sed fringilla mauris sit amet nibh.
  • Nullam quis ante. Phasellus consectetuer vestibulum elit.. Cras varius. Vivamus laoreet.

Pellentesque dapibus hendrerit tortor. Phasellus nec sem in justo pellentesque facilisis. Proin faucibus arcu quis ante. Aenean vulputate eleifend tellus. Maecenas malesuada.

Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Sed libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.

  • Fusce vel dui. Nullam dictum felis eu pede mollis pretium. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Praesent egestas neque eu enim.
  • Phasellus magna. Aenean ut eros et nisl sagittis vestibulum. Ut tincidunt tincidunt erat. Maecenas egestas arcu quis ligula mattis placerat. Sed fringilla mauris sit amet nibh.
  • Nullam quis ante. Phasellus consectetuer vestibulum elit.. Cras varius. Vivamus laoreet.

Advanced Image

MOD019

Image module which is a static window with parallax backround.

medium-3_640x480

Advanced row background - Background Parallax Type: Parallax

MOD002

Image options:

  • Background position
  • Background Parallax Type: None (image moves with text)
  • Background Parallax Type: Fixed (image is static in the background)
  • Background Parallax Type: Parallax scroll (image moves at a different rate to the text)
  • Background Parallax Type: Ken Burns (slow zoom out of the background image)
  • Overlay colour and opacity

Video options:

  • Background poster image (fallback for when the video can't be played)
  • Video source: YouTube, Vimeo, HubSpot
  • Loop video
  • Video overlay colour and opacity
background-10-1920x1280

Advanced row background - Background Parallax Type: Fixed

MOD002

Image options:

  • Background position
  • Background Parallax Type: None (image moves with text)
  • Background Parallax Type: Fixed (image is static in the background)
  • Background Parallax Type: Parallax scroll (image moves at a different rate to the text)
  • Background Parallax Type: Ken Burns (slow zoom out of the background image)
  • Overlay colour and opacity

Video options:

  • Background poster image (fallback for when the video can't be played)
  • Video source: YouTube, Vimeo, HubSpot
  • Loop video
  • Video overlay colour and opacity
background-10-1920x1280

Advanced row background - Background Parallax Type: Ken Burns

MOD002

Image options:

  • Background position
  • Background Parallax Type: None (image moves with text)
  • Background Parallax Type: Fixed (image is static in the background)
  • Background Parallax Type: Parallax scroll (image moves at a different rate to the text)
  • Background Parallax Type: Ken Burns (slow zoom out of the background image)
  • Overlay colour and opacity

Video options:

  • Background poster image (fallback for when the video can't be played)
  • Video source: YouTube, Vimeo, HubSpot
  • Loop video
  • Video overlay colour and opacity
background-10-1920x1280

Advanced row background - Background Parallax Type: None

MOD002

Image options:

  • Background position
  • Background Parallax Type: None (image moves with text)
  • Background Parallax Type: Fixed (image is static in the background)
  • Background Parallax Type: Parallax scroll (image moves at a different rate to the text)
  • Background Parallax Type: Ken Burns (slow zoom out of the background image)
  • Overlay colour and opacity

Video options:

  • Background poster image (fallback for when the video can't be played)
  • Video source: YouTube, Vimeo, HubSpot
  • Loop video
  • Video overlay colour and opacity
background-10-1920x1280

Advanced row background - Background Parallax Type: Video

MOD002

Image options:

  • Background position
  • Background Parallax Type: None (image moves with text)
  • Background Parallax Type: Fixed (image is static in the background)
  • Background Parallax Type: Parallax scroll (image moves at a different rate to the text)
  • Background Parallax Type: Ken Burns (slow zoom out of the background image)
  • Overlay colour and opacity

Video options:

  • Background poster image (fallback for when the video can't be played)
  • Video source: YouTube, Vimeo, HubSpot
  • Loop video
  • Video overlay colour and opacity

Back to Top

MOD022

Allows us to choose a FontAwesome icon, or drop in the FA code for a custom icon. Module options:

  • Toggle for custom icon, if toggled 'on' then text field allows the user to paste in a FontAwesome code i.e. <i class="fal fa-atom"></i>
  • If custom icon is set to 'off' then the user can select from the HubSpot Font Awesome icon picker
  • Select icon colour
  • Select icon background colour
  • Drop down to position the icon left, centre, or right aligned

Content Card

MOD003

Card element which has these options:

  • Card image (shows at the top of the card element)
  • Card icon (optional, can place an icon which sits between the image and content sections, and can be left, center or right aligned. Icon also has colour options)
  • Card text ('Rich Text' element for the card content area)
  • Toggle to make the whole card a clickable link
  • Animation options (the options are the same as the 'custom animation' module noted below)
background-6-1920x1281
Card Title

Convallis condimentum convallis velit Nisi, phasellus egestas. Ornare proin sem parturient sit convallis natoque tempor.

Learn More

Custom Animation

MOD026

Add element to animate any column. Options include:

  • Reveal (animate only when item is scrolled into view)
  • Animation Type
  • Animation Duration
  • Animation Delay
Fade up

Custom Button

MOD004

Module options:

  • Solid or outline button
  • Choose button colour
  • Choose button hover colour
  • Choose button text colour
  • Choose button text hover colour
  • Choose button size
  • Choose button position
  • Select link for the button
  • Text field for the button display text
  • Animation options (the options are the same as the 'custom animation' module noted above)

Custom Icon

MOD005

Allows us to choose a FontAwesome icon, or drop in the FA code for a custom icon. Module options:

  • Toggle for custom icon, if toggled 'on' then text field allows the user to paste in a FontAwesome code i.e. <i class="fal fa-atom"></i>
  • If custom icon is set to 'off' then the user can select from the HubSpot Font Awesome icon picker
  • Select icon colour
  • Select icon background colour
  • Drop down to position the icon left, centre, or right aligned
  • Animation options (the options are the same as the 'custom animation' module noted above)

Embed

MOD025

Module which allows you to embed any 3rd party embed scripts/code (i.e. VouchedFor, TrustPilot).

Options include:

  • Full width (toggle this on to make the embed full screen width)
  • Manual height (toggle this on to manually adjust the embed height for Desktop, Tablet, and Mobile)

NOTE: Demo shown is for a Vimeo video as we don't have a demo script for VouchedFor or TrustPilot.  The demo on the right is a normal embed, and below is the full-width embed.

Featured Case Studies

MOD006

Repeater module with the following fields:

  • Card image
  • Card title
  • Card short text
  • Card link text
  • Card link

Icon Card

MOD007

Card that has an optional icon.

Module options:

  • Toggle to show/hide icon
  • Select icon (or custom FontAwesome icon)
  • Icon size
  • Icon colour
  • Icon background colour
  • Icon position
  • White text toggle (for dark background card)
  • Rich text box for the card content
  • Toggle to make the whole card a clickable link
  • Border and card background colour options
  • Card background hover colour
  • Animation options (the options are the same as the 'custom animation' module noted above)

card title

Convallis condimentum convallis velit Nisi, phasellus egestas. Ornare proin sem parturient sit convallis natoque tempor.

LEARN MORE

Flip Box

MOD023

Module which flips either horizontally or vertically, with content on both sides.

Front and Back sides can either have a background image or background colour, and both sides have a Rich Text field for adding content.

Flip Box Title

Back text title

Donec venenatis vulputate lorem. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Curabitur at lacus ac velit ornare lobortis. Vivamus aliquet elit ac nisl. Donec id justo.

Google Map Embed

MOD018

Embed a Google map into the page.

Module options:

  • Minimum height
  • Embed code field (simply drop in the Google Map embed iframe code)

Image/Logo Slider

MOD012

Carousel slider to display images or client/partner logos.

Module options:

  • Optional title
  • Repeater section for the image/logo
  • Repeater item has option to make the logo image a clickable link
  • Slider options (show arrows/dots, number of seconds to auto-rotate the slider)
client-logo-6
client-logo-4
client-logo-5
client-logo-2
client-logo-3
client-logo-1

In Page Menu

MOD008

This module is a 'repeater' which allows us to place a menu within a page. Each repeater item has the menu item name field, and an ID field (which is the anchor ID that links to the 'In Page Menu Row ID' custom module placed on the relevant row further down the page).

On page scroll the in-page menu is 'sticky' when it reaches the screen top.

In Page Menu ID

MOD009

This is a companion module to the 'In Page Menu' module.

This module allows a custom ID div to be added to a DND section, so that it can be linked to via the in-page menu.

Latest Blogs

MOD010

Module options:

  • Shows the latest 'x' number of blogs
  • Filter by tag (allows us to show 'x' items by a specified blog tag)
  • 'See all articles' button options
Why loyalty doesn’t always pay

Read more

August 2024  |   2 minute read
Why your mid-30s is the time to start taking your pension seriously

Read more

August 2024  |   1 minute read
Why you should get financial advice

Read more

August 2024  |   2 minute read

Multi-Layer Parallax Images

MOD020

Repeater module that allows up to 3 images that can parallax scroll at different rates.

Each image can also have different options for rotation, placement, horizontal and vertical offset, and different parallax scroll rates.

Popup Form

MOD021

Module which allows you to select a HubSpot form and display it in a popup modal.

Module options:

  • Button text
  • Button styles
  • Popup short text (title that shows at the top of the popup)
  • HubSpot form selector
Get in touch

Popup video

MOD017

Module options:

  • Optional background poster image
  • Icon position/alignment
  • Popup play icon (icon field with custom FontAwesome option)
  • Popup icon colour (dropdown with theme & custom colours)
  • Video Source: Dropdown - 'YouTube', 'Vimeo'

Pricing Card

MOD011

Static card for displaying pricing of product.

Module options:

  • Product Tier (card title)
  • Product description
  • Repeater section for the featured items (contains custom FontAwesome icon options for the 'bullet')
  • Price
  • Timeframe (i.e. 'per month')
  • Button options
  • Animation options (the options are the same as the 'custom animation' module noted above)

Free

For teams that need additional security, control, and support.

  • 10 users included
  • 10 users included
  • 10 users included
  • 10 users included

$0/ mo

Scroll Next Section

MOD013

Drops a 'down arrow' icon to a section, when clicked the page smooth scrolls down to the next section.

Module options:

  • Icon position
  • Select FontAwesome icon (or specify a custom FontAwesome icon)
  • Choose icon colour

Stat Counter

MOD024

Animated number counter with options:

  • Prefix (i.e. add a £ before the number)
  • Suffix (i.e. add m+ or % after the number)
  • Font-size from a drop-down (H1-6, Paragraph)
  • Stat colour from drop-down (Primary Brand, Secondary Brand, Dark, Light, White, or Custom colour)

£75m+

Team Carousel

MOD014

Carousel for team member cards.

Module options:

  • Repeater module for the team member, same options as the 'MOD015 Team Member' module
  • Options for Desktop, Tablet, and Mobile number of columns
  • Show/hide navigation arrows/dots
  • Arrow/dots colour options
  • Auto rotate slides toggle
  • Number of seconds between slides

Jenny Smith

Head of Marketing

Lacinia nisi nunc quis vivamus nonummy suscipit eget platea facilisis. Eros. Suscipit habitant sollicitudin pharetra est.

Jenny Smith

Head of Marketing

Lacinia nisi nunc quis vivamus nonummy suscipit eget platea facilisis. Eros. Suscipit habitant sollicitudin pharetra est.

Jenny Smith

Head of Marketing

Lacinia nisi nunc quis vivamus nonummy suscipit eget platea facilisis. Eros. Suscipit habitant sollicitudin pharetra est.

Jenny Smith

Head of Marketing

Lacinia nisi nunc quis vivamus nonummy suscipit eget platea facilisis. Eros. Suscipit habitant sollicitudin pharetra est.

Jenny Smith

Head of Marketing

Lacinia nisi nunc quis vivamus nonummy suscipit eget platea facilisis. Eros. Suscipit habitant sollicitudin pharetra est.

Jenny Smith

Head of Marketing

Lacinia nisi nunc quis vivamus nonummy suscipit eget platea facilisis. Eros. Suscipit habitant sollicitudin pharetra est.

Jenny Smith

Head of Marketing

Lacinia nisi nunc quis vivamus nonummy suscipit eget platea facilisis. Eros. Suscipit habitant sollicitudin pharetra est.

Team Member

MOD015

Card element to display a team member.

Module options:

  • Top banner background type (image or colour - image has extra options for position and colour overlay)
  • Team bio image
  • Person's name
  • Job title
  • Short description
  • Toggle to display an optional button
  • Button style and colour options
  • Button can link to a page or a popup
  • Popup has a rich text field
  • Contact/socials (can be shown on either the card, the popup, or both)
  • Animation options (the options are the same as the 'custom animation' module noted above)

Jenny Smith

Head of Marketing

Read more

Testimonials Slider

MOD016

Module which pulls 'x' number of client quotes (either from the HubDB or manual repeater items) and auto scrolls the slider.

Module options:

  • Filter by tag
  • Filter by company name
  • Limit by number (i.e. limit to 5 testimonials)
  • Slide delay (the delay in seconds before the slide moves on to the next quote)
  • Optional toggle to show quote icons
  • Quote left and right icons (includes custom FontAwesome option)

Aenean vulputate eleifend tellus. Fusce ac felis sit amet ligula pharetra condimentum. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Fusce fermentum odio nec arcu.

John Smith
ABC Ltd

Aenean vulputate eleifend tellus. Fusce ac felis sit amet ligula pharetra condimentum. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Fusce fermentum odio nec arcu.

Bob Jones
XYZ Ltd

Aenean vulputate eleifend tellus. Fusce ac felis sit amet ligula pharetra condimentum. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Fusce fermentum odio nec arcu.

Susan Smith
JKL Ltd