<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=4574585&amp;fmt=gif">
Skip to content
SparkTSL logo
Speak to us

THEME GUIDE

This page is a reference for all styles, modules and sections available in the SPARK TSL HubSpot theme.

 

TYPOGRAPHY

Heading 1

Heading 2

Heading 3

Heading 4

Blockquote

Paragraph

Link

CTAs

Call To Action

SPARK TSL - Turquoise Button (Template for cloning) - Class name: turquoise

Call To Action

SPARK TSL - Turquoise Button, Transparent BG on hover (Template for cloning) - Class names: turquoise transparent-hov

Call To Action

SPARK TSL - White Button (Template for cloning) - Class name: white

Call To Action

SPARK TSL - Blue Button (Template for cloning) - Class name: blue

Call To Action

SPARK TSL - Transparent Bg/Turquoise Text (Template for cloning) - Class name: transparent-turq-text

Call To Action

SPARK TSL - Transparent Bg/White Text (Template for cloning) - Class name: transparent-white-text

Each of the above CTAs has been created as a template to clone from when creating a new CTA. This will ensure that the CTA styles and previews are consistent throughout the site.

If you need to re-style an existing legacy CTA, you can open it in the editor, set the button style to "Link (No style)" and then add one of the above classes to automatically apply all corresponding styling (including hover effects).

You may notice that the above template CTAs all have some additional CSS styling which has been set in the editor. This styling is applied only to the preview, for reference purposes. Only a class name is required to apply the styling on an actual page.

FORMS

Note that forms use light text colours, so they should always sit on top of darker backgrounds (like this blue one)

MODULES

Dropping a module into a page will automatically put it in a HubSpot section. As you can see by inspecting these modules in the page editor, in most instances the background colour of the module is set in the style tab of its parent section (rather than at a module level).

Additionally, many of these modules are intended to be displayed at full width. This is achieved by setting "content alignment" to full width in the "alignment and spacing" tab of the section settings.

 

HERO BANNER -

Bedside Technology That Improves Patient Experience And Saves You Money

SPARK® TSL presents thousands of applications within healthcare environments to improve patient experience, increase staff efficiencies and lead the NHS into a more sustainable way of working.

spark-mobile-phone
James at York Demo
home-background-shape

TESTIMONIAL HERO BANNER -

Connect With Your Customers

Staying connected has become a necessity for people. Whether for personal or professional use, a reliable internet connection has become the backbone of our day-to-day lives.

Providing customers with a seamless WiFi experience has become crucial in customer service. A fast and secure WiFi connection can improve customer satisfaction, boost engagement and even attract new customers.

The charity took more donations in the first six weeks of the Trust using SPARK® TSL than they had in the previous three years!

Glenn Winteringham,

Group Chief Digital Officer at Royal Free London NHS Foundation Trust

The charity took more donations in the first six weeks of the Trust using SPARK® TSL than they had in the previous three years!

Glenn Winteringham,

Group Chief Digital Officer at Royal Free London NHS Foundation Trust

The charity took more donations in the first six weeks of the Trust using SPARK® TSL than they had in the previous three years!

Glenn Winteringham,

Group Chief Digital Officer at Royal Free London NHS Foundation Trust

home-background-shape

CARD REPEATER -

FADE IN CARDS -

JUMP LINK CARDS -

LOGO SLIDER -