Sarah's story
Hear how Bippit helped a single mum overcome debt

Typography

Headings

All headings use the text-heading class as the base. This class defines the font and line spacing. Line spacing has been defined as 110% for headings.

Class
Sample
text-h1
Lorem Ipsum
text-h2
Lorem Ipsum
text-h3
Lorem Ipsum
text-h4
Lorem Ipsum

Body

Line spacing has been defined as 150% for body text.

Class
Sample
text-paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus enim ut augue porttitor, a suscipit eros accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris dapibus lacus vel convallis sollicitudin. Sed auctor dolor nec euismod bibendum.
text-paragraph text-s
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus enim ut augue porttitor, a suscipit eros accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris dapibus lacus vel convallis sollicitudin. Sed auctor dolor nec euismod bibendum.
text-paragraph text-xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus enim ut augue porttitor, a suscipit eros accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris dapibus lacus vel convallis sollicitudin. Sed auctor dolor nec euismod bibendum.

Text styles

Class
Sample
text-bold
Lorem ipsum.
text-m
Lorem ipsum.
text-s
Lorem ipsum.
text-xs
Lorem ipsum.
text-quote
Lorem ipsum.

Links

Links have all been styled to change in hover, as shown below. Links use existing classes to style themselves in terms of font and size.

Text Link
Class
Sample
link-dark
link-purple
link-white

Rich text

Rich text is used in blog posts and other content that uses CMS to write it.

Class
Sample
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

paragraph-padding-none

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Colours

Background colours

All our colours have been stored as variables. They can be accessed in code using var().

Class
Sample
Class
Sample
bg-dark-purple
bg-light-dark-purple
bg-purple
bg-light-purple
bg-green
bg-light-green
bg-yellow
bg-light-yellow
bg-pink
bg-light-pink
bg-blue
bg-light-blue

Background colours for mobile portrait, used mainly to change section colours.

Class
Sample
mobilep-bg-purple
mobilep-bg-green
mobilep-bg-blue
mobilep-bg-light-dark-purple
mobilep-bg-light-purple
mobilep-bg-light-green
mobilep-bg-light-yellow
mobilep-bg-light-pink
mobilep-bg-light-blue

Background textures

Class
Sample
bg-light-purple-papermache
bg-purple-cloud
bg-green-liquid
bg-yellow-silk
bg-pink-papermache
bg-blue-paper

Text colours

Class
Sample
text-dark
Lorem ipsum.

Buttons

Buttons use the button class as the base style. That class controls the roundness of the corners, text and any padding.

Class
Sample
With style applied
button-primary-dark
button-primary-light
button-secondary-dark

Forms

Hubspot forms need to be styled using their own classes. Keep an eye on how they have been nested and what classes they have been assigned. The order is important. This list is not comprehensive of all classes used, for that you'll need to check the samples.

Class
Sample
Notes
hbspt-form
This is the container for the form.
form-columns-2
For styling 2 columns.
hs-form-field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
This is the container for the form fields.
hs-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

This is for any rich text in the form.
hs-input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input and label. All hs-input have been styled to have a focused (keyboard) state for accessibility purposes.
hs-field-desc
This is help text for the field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input and label, including a help field.
hs-error-msgs
hs-error-msg
  • Error message label
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input and label, including an error message.
hs-fieldtype-textarea
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input and label for a multi line text field.
hs-fieldtype-select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Dropdown and label.
hs-dateinput
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Date field and label.
hs-fieldtype-checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Multiple checkbox and label.
hs-fieldtype-booleancheckbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Singular checkbox and label.
hs-fieldtype-radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio buttons and label.
hs-button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio buttons and label.
legal-consent-container
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Legal consent check.

Layout

Layouts using flex are named as follows: flex-direction-x(direction)y(direction)-gap-size.

Section

Section is the main class for sections, you can change padding by applying extra classes.
Class
Sample
Notes
section
Example element

Max width

There's always a div nested inside the section. This div nests everything else inside and it controls how much space all the elements can take, so in bigger screens elements don't move too far from each other.
Class
Sample
Notes
max-width
Example element
max-width-textheavy
Example element
For text-heavy sections or sections we want to be more narrow.

Flex vertical

Class
Sample
Notes
flex-vert-cc
Example element
Example element
cc = x (centre) y (centre)
flex-vert-cc-gap-xxs
Example element
Example element
flex-vert-cc-gap-xs
Example element
Example element
flex-vert-cc-gap-s
Example element
Example element
flex-vert-cc-gap-m
Example element
Example element
flex-vert-cc-gap-l
Example element
Example element
flex-vert-ct
Example element
Example element
ct = x (centre) y (top)
flex-vert-ct-gap-xxs
Example element
Example element
flex-vert-ct-gap-s
Example element
Example element
flex-vert-ct-gap-m
Example element
Example element
flex-vert-lc-gap-xs
Example element
Example element
lc = x (left) y (centre)
flex-vert-lc-gap-s
Example element
Example element
flex-vert-lc-gap-m
Example element
Example element
flex-vert-lt-gap-xs
Example element
Example element
lt = x (left) y (top)
flex-vert-lt-gap-s
Example element
Example element
flex-vert-lt-gap-m
Example element
Example element
flex-vert-ssb-gap-s
Example element
Example element
ssb = x (stretch) y (space between)
flex-vert-ssb-gap-m
Example element
Example element
flex-vert-ssb-gap-m
Example element
Example element

Flex vertical (small device)

Small device applies to tablet and smaller sizes.

Class
Sample
Notes
smalldev-flex-vert-cc
Example element
Example element
cc = x (centre) y (centre)
smalldev-flex-vert-inverse
Example element 1
Example element 2
It inverts the order of the elements inside

Flex vertical (mobile)

Mobile applies to mobile landscape and smaller sizes.

Class
Sample
Notes
mobile-flex-vert-wrapdown
Example element
Example element
It wraps the elements inside

Flex vertical (mobile portrait)

Mobilep applies to mobile portrait.

Class
Sample
Notes
mobilep-flex-vert-cc
Example element
Example element
cc = x (centre) y (centre)

Flex horizontal

Class
Sample
Notes
flex-hor-cc
Example element
Example element
cc = x (centre) y (centre)
flex-hor-cc-gap-xs
Example element
Example element
flex-hor-cc-wrapdown-gap-s
Example element
Example element
flex-hor-cc-wrapdown-gap-m
Example element
Example element
flex-hor-cs-gap-m
Example element
Example element
cs = x (centre) y (stretch)
flex-hor-cs-gap-m-inverse
Example element
Example element
flex-hor-ct-gap-m
Example element
Example element
ct = x (centre) y (top)
flex-hor-lc-gap-xs
Example element
Example element
lc = x (left) y (centre)
flex-hor-lc-gap-s
Example element
Example element
flex-hor-lc-gap-m
Example element
Example element
flex-hor-lt-gap-xs
Example element
Example element
lt = x (left) y (top)
flex-hor-lt-gap-l
Example element
Example element
flex-hor-sbs-gap-xs
Example element
Example element
sbs = x (space between) y (stretch)
flex-hor-sbs-gap-m
Example element
Example element

Round corners

Class
Sample
Notes
round-corners

User quotes

All user quotes use the same component, where we can change component properties for name, profile picture and quote. Keep in mind that when a component like this is changed, it needs to be updated everywhere, as the values are different for each user.

Dan S.

Employee at CreateFuture

"It's priceless to be able to talk to an expert about anything financial as it can be hard to wrap your head around things. Having Bippit has been so helpful not just to me but to my partner too, we've received guidance for lots of things from mortgage to pensions, budgeting, investing and protection."

Create Future logo

Chelsea M.

Employee at Wesleyan

"Steve was really helpful in breaking down my pension options into plain English and explaining my next step considerations. It was great to chat about this with no jargon or sales push."

Wesleyan logo

Thomas D.

Employee at Spektrix

"The best thing about Bippit is that it’s incredibly in-depth in terms of knowledge and ideas, and it covers the entire spectrum of my financial needs. It’s especially reassuring to know that I can discuss tax-return related issues, something that I find complex and a little scary."

Spektrix logo

Hugo G.

Employee at Investigo

"Top-class service delivered by credible, helpful, genuinely friendly coaches. The service provided by Lorna is amazing, what a great person to have representing Bippit - don't let go of this one! Thanks again!"

Investigo logo

Abigail S.

Employee at University of Glasgow

"The best thing is getting independent perspective, ideas, suggestions and guidance about available options - with no strings attached - in an accessible and friendly way with safeguards including guarantee of confidentiality."

University of Glasgow logo

Gabrielle H.

Employee at Astrid & Miyu

"I just had my first coaching call with James, he was super approachable with all my concerns and offered some great guidance which I'll now be putting into practice."

Astrid & Miyu logo

Matteo L.

Employee at Thatcham Research

"Because I am not originally from the UK, I do not know all possibilities and regulations that apply to money management. Having this service is a very good job perk that my company is providing, and it adds extra value in the overall compensation."

Thatcham Research logo

Eric X.

Employee at Evelyn Partners

"Alina was great, she really took time to understand my personal and family circumstances and tailored her guidance around that."

Evelyn Partners logo

Aaron L.

Employee at Klaviyo

"It's the best benefit we have. I like being able to openly speak with my coach, Sam, regarding money, and want to thank him for all his hard work over the past year!"

Klaviyo logo

Jasmine P.

Employee at Evelyn Partners

"The allocation of one financial planner makes the process feel like more of a journey, with goals, rather than a 'one use' service. James was extremely knowledgeable, and able to give me guidance based on my personable ambitions really well. He seems to have a knack for knowing demographics and personalities, and how that should shape his support."

Evelyn Partners logo

Kyle C.

Employee at The Key

"I was planning to move from Leeds to London and was worried about how this would impact me financially. My coach guided me through the process of tracking my spending and comparing to average London prices. Spoiler alert: I live in London now and my finances are in check. Ultimately it has given me personal finance confidence and helped me to become more accountable for my money."

The Key Group logo

Carol K.

Employee at Beam

"Jo has been absolutely amazing, her approach to my issue and questions was brilliant. I booked the session feeling really stressed about money and left feeling really relieved, energised and calm. I can't thank her enough and will definitely be booking another session with her!"

Beam logo

Alec F.

Employee at Hyperoptic

"The best things about the service is the coaching is specific to your own personal needs. You can explain your own financial situation and receive feedback about it and what your next steps could be. Steve was very good at explaining it all in a way that was easy to understand. Reading information online can be difficult so having someone explain it and be there to answer questions was brilliant to have."

Hyperoptic logo

Rachel W.

Employee at Hyperoptic

"The fact that I was able to ask what were probably stupid questions that I wouldn't have known where to go to for the answers to before (or would have had to go to multiple places for them) but to then have them explained to me in a way that I totally understood - and also personal to me. Invaluable."

Hyperoptic logo

Sandra M.

Employee at Investigo

"I highly rate the service overall and I highly rate James as my coach! I certainly look forward to doing many more calls with him to iron out all points in my financial life. I have also emailed my department at work to let them know more about the service available."

Investigo logo

Amir K.

Employee at Investigo

"James gives concise answers to what I'd like to know, and articulates it in easy-to-understand ways. It's rare to find someone who consistently gives just the right amount of information. He also knows how to empathise incredibly well, so can build rapport, trust and comfort with employees - it is immensely valuable."

Investigo logo

Tatiana S.

Employee at Wesleyan

"I trust that Wesleyan have undertaken the right due diligence, so I feel more confident that Bippit is a reputable provider to help me manage my finances. Also that it's available free of charge - a great benefit."

Wesleyan logo

Paulina M.

Employee at Tails.com

"Steve was brilliant and was able to give me a range of guidance in an easy-to-understand way. Will definitely be booking in another call soon."

Tails.com logo

Adam D.

Employee at Policy Expert

"My coach Sanjeev was great, he helped to put my financial situation into context, allowed me to work out my key priorities, and gave me some clear take away points to consider to help improve my financial situation. It was a very useful session, so thank you."

Policy Expert logo

Kailash K.

Employee at Boeing

"Since attending, I have been made more aware of what is available and this has helped me no end. Guidance has been very useful."

Boeing logo

Rosa E.

Employee at Lintbells

"Booking and attending the coaching call was really simple and easy to do. Naomi was really friendly and clearly knowledgable and I think I could learn a lot from continuing to connect with her."

Lintbells logo

Denise L.

Employee at Autorek

"What I like most is being able to contact a coach who knows my personal goals. It makes me feel empowered and informed: I'm really grateful to Kerry for taking the time to help me figure out my finances."

Autorek logo

Janet K.

Employee at Suvera

"I love that Bippit is accessible. My coach explains things in plain language. I go away feeling like I understand better."

Suvera logo

Arlo C.

Employee at &us

"Very informative, James explained things clearly and I learned loads in a short amount of time. I love that this is a benefit I get and I'm looking forward to learning more."

&us logo

Julian M.

Employee at Unum

"Mark was really helpful and encouraging. He really took the time to understand my current circumstances to provide the best guidance. I'm going to make sure I'm using the most beneficial savings accounts to help me save towards buying a property."

Alessia S.

Employee at Bank of England

"Having financial information available is great, but being able to talk to someone is excellent. That human conversation is really important to me."

Bank of England logo

Lilly R.

Employee at Policy Expert

"I felt like I was being looked after by having my one-to-one with a financial expert. Made me feel much better about my financial situation. The coach was very approachable and easy to talk to. I am super happy about it."

Policy Expert logo

Jago P.

Employee at Teva

"I love that Bippit is free, professional, impartial guidance, without the fear that somebody is trying to sell you something that you may not need."

Roland S.

Employee at Simpro

"Bippit has reduced my anxiety about my debts."

Simpro logo

Astrid T.

Employee at Cawingredients

"I liked the Healthcheck and guidance on how to make it better. Additionally, looking and receiving more information about ISAs and savings accounts is very helpful for the future, as I am looking to purchase a house this year. Having easy assistance to discuss topics such as investments and retirement is very reassuring. Anick was very professional, friendly and easy to talk to during my appointment."

Cawingredients logo

Victor M.

Employee at Hyperoptic

"Bippit's a safe space to get the guidance you need. I love being able to ask questions I would normally feel too embarrassed to ask, as I feel I should already know at my age. I'm going to reorder my finances, up my pension, and also look at overpaying on my mortgage. Thank you, it was really helpful and I feel so much better about things now."

Hyperoptic logo

Chloe K.

Employee at Wayflyer

"Finances aren't taught in school, and it's hard to teach yourself when you don't know where to start, who to trust, and what to believe online. Having access to Claire is incredibly helpful."

Wayflyer logo

Diego L.

Employee at Policy Expert

"I love having an independent person to go through different aspects of money management. Thanks to James for being a great person to speak to about my financial situation. Having unlimited calls has lead to around one call per month. The webinar in January was good too!"

Policy Expert logo

Amaya U.

Employee at Bank of England

"I am very worried about finances, tax, pensions, and buying a home. It was really reassuring and helpful to know I can speak to Mark at any point."

Bank of England logo

Mason S.

Employee at IMI

"The best thing is having a trusted financial expert to run ideas by and check my understanding of my financial situation; as opposed to relying on internet research, which might not be comprehensive or accurate."

IMI logo

Drew W.

Employee at Klaviyo

"Being neurodivergent (ADHD), it's invaluable to have an expert explaining such complex topics in a simplified manner so I can easily understand them. It's been a very positive experience, I'll be booking more sessions with Claire."

Klaviyo logo

Ajai V.

Employee at Evelyn Partners

"Lorna was really kind and inviting. I felt very comfortable to ask questions and tell her about my financial ambitions. 10/10."

Evelyn Partners logo

Nina H.

Employee at Beam

"Chatting with my coach made me feel empowered. It was a good reminder that I've worked hard to make a nest egg and should enjoy myself. Apart from that, I'll explore my pension contributions and will set up a monthly review."

Beam logo

Iria D.

Employee at Teva

"The best thing is the accessibility to talk to someone with the right knowledge, who can guide you in which direction you wish to go."

Byron L.

Employee at Bank of England

"Bippit has helped me work through financial uncertainty. My coach helped me to think through a lot of complex financial considerations and structure my approach."

Bank of England logo

Elias D.

Employee at University of Glasgow

"Accessing a personal finance expert through my employer directly removes access barriers for people like myself who have very little financial literacy. It has been a very valuable experience."

University of Glasgow logo

Warren S.

Employee at Bank of England

"James was really helpful with looking at pension cash flows and tax planning. I know quite a bit about financial planning but James was able to provide a constructive challenge."

Bank of England logo

Celeste J.

Employee at Bank of England

"Bippit provides me with more mental security of my money management. Certainly brings more reassurance with regards to my future."

Bank of England logo

Rach T.

Employee at University of Glasgow

"Bippit gave me the time and space to engage with an informed person about debt, which is a subject that is often taboo and as such can cause significant unacknowledged stress."

University of Glasgow logo

Harrison A.

Employee at Lendlease

"Had an excellent session with James. Will be recommending this service to other colleagues."

Lendlease logo

Gabrielle H.

Employee at BMJ Group

"The thing I liked most was the wellbeing and coaching aspect of the service. My coach offered a way to think about money with a different mindset. I expected financial guidance, but I was delighted to get life guidance too."

Dan S.

Employee at Bank of England

"I love that Bippit is objective, and is available at anytime. I've had a great experience with an experienced financial coach, calm and composed. It's really helped me re-build my confidence in dealing with money and simplified things for me."

Bank of England logo

Dan S.

Employee at Peppy

"I was so happy to see Alina again today as I met and had a consultation with her before, and have benefited financially from doing so. I’m very grateful for having Bippit!"

Peppy logo

Dan S.

Employee at Thatcham Research

"Bippit is a fantastic benefit that I really appreciate having. It's easy to use and I like that the coach is always the same person. It's a one-to-one call so I feel I can talk openly and get guidance for my specific situation, and the number of sessions available is unlimited."

Thatcham Research logo

Company quotes

All company quotes use the same component, where we can change component properties for name, profile picture and quote. Keep in mind that when a component like this is changed, it needs to be updated everywhere, as the values are different for each user.

Chris Jones

CEO at BMJ Group

"You can draw a line between the financial wellbeing of your people and the financial performance of the business you’re running."

BMJ Group logo

Naleena Gururani

CPO at Hyperoptic

"Our partnership with Bippit has been designed to be inclusive. We know financial challenges can affect anyone at any time, which is why we provide the free tools people need to feel financially and mentally empowered."

Hyperoptic logo

Tori Cochrane

Group People Exp. Project Manager at Policy Expert

"Bippit has improved our employees' financial empathy towards our customers because they are able to relate to the different circumstances that people might find themselves in."

Policy Expert logo

Mark Greenwald

Benefits and Wellbeing Manager at Lendlease

"Bippit helps normalise seeking financial support and planning ahead, just like one might for physical and mental wellbeing. Knowing what’s coming up, like starting a family, means our teams can make informed decisions at the right time, without being overwhelmed."

Lendlease logo

Claire Blomley

Senior Benefits Manager at Teva

"We know that mental health is a cornerstone of workplace happiness, and financial wellbeing plays a huge part in that. We’ve run onsite meetings about Bippit, and hosted a series of face-to-face and virtual training sessions. We’ve had an amazing response so far."

Nina Lomax

Head of People and Culture at Electric Square

"Being able to provide financial guidance to employees is definitely going to be a retention tool for us. Companies in the games industry aren’t offering things like Bippit, and employees are looking at things like this."

Electric Square logo

Dan S.

Employee at Company

"It's priceless to be able to talk to an expert about anything financial as it can be hard to wrap your head around things. Having Bippit has been so helpful not just to me but to my partner too, we've received guidance for lots of things from mortgage to pensions, budgeting, investing and protection."

Logo sizes

All logos have the same parent class, logo-cloud followed by the company name for adjusting its size.

CIPD logoBank of England logoNHS logoLiberty IT logoEvelyn Partners logoLendlease logoHyperoptic logoBMJ Group logoIMI logoBoeing logoWesleyan logoPolicy Expert logoElectric Square logoUniversity of Glasgow logoKlaviyo logoBeam logoThatcham Research logoInvestigo logoAstrid & Miyu logoThe Key Group logoCreate Future logoSpektrix logoLintbells logoAutorek logoSuvera logo&us logoTails.com logoCawingredients logoUnmind logoWayflyer logoSimpro logoPeppy logoReed logo

Images

Add frames here

Class
Sample
Notes
image-frame
For images that need to have rounded corners
image-frame-profilepicture
For profile pictures in quotes
image-ratio-1-1
image-ratio-16-9

Examples of how we use divs and classes in images

Spend 100% of your time helping people

If you're a qualified adviser or financial planner, you can experience a completely new way of working with Bippit. There’s no need for time-consuming prospecting, or endless admin. Just real people, with real concerns, who need your help.

Get in touch
A composite image representing a virtual financial coaching session. On the left, a circular profile picture of an older white woman, Emily, appears with a concerned expression. Adjacent to her image is a chat bubble that reads, "I'm struggling to pay off my debt, I feel so lost. Can you help me?" In the centre of the image, hands are shown typing on a white keyboard, with an overlaid text stating "Your coach is typing..." This setup illustrates an ongoing interactive financial coaching session designed to provide personalised assistance to those who need it most.
A senior man smiling. Next to him there is a screen mockup showing the qualifications of the coach he's been matched with.

The highest qualifications

At Bippit, we only offer coaching from professionals who have trained for years, and have FCA-recognised qualifications.

This provides you with reassurance that your people are being looked after, and that your employees are receiving the effective support they want and need.