---
title: Heading
description: Add standalone headings or section titles with built-in alignment and styling options to maintain design consistency.
---
[Skip to content](https://scaffold.terrier.llc/docs/heading#main-content)
Open main navigation
Close main navigation
- [Contact Support](https://getscaffold.app/docs/getting-help-with-scaffold)
[Contact Support](https://getscaffold.app/docs/getting-help-with-scaffold)
How can we help you?
- There are no suggestions because the search field is empty.
1. [Scaffold Docs](https://scaffold.terrier.llc/docs)
2. [Modules](https://scaffold.terrier.llc/docs/modules)
# Heading
## Add standalone headings or section titles with built-in alignment and styling options to maintain design consistency.
---
###### VIDEO TRANSCRIPT:
Okay, let's take a look
at the Headings module.
So the Heading module is both
in Scaffold Light and Scaffold
Pro, and
it's, it's the same exact module whether
you're in Scaffold Light or Scaffold Pro.
The only thing different would be
that you don't have access to page animations
or light mode and dark mode
in Scaffold Light, but that's more of a theme-wide
thing than just the individual module settings.
So this is
your Heading module, which is like you use
across your website. Whenever you have a new, uh,
section of the page or whatever,
you wanna have a heading there,
and it's a very structured module. It's very intuitive.
So you have,
uh, three main set-- three main
basically elements that are on
your Headings module, which will be
your top badge, your heading, and your subheading. So
here we have the top badge,
here we have our heading, and here we have our subheading.
So if I go here and I look at the top badge,
if I, I could change, you know, the
color. I, I-- You have the text here,
so if I say,
uh, let's say, "The
best HubSpot theme." So you see I edit it
there, and then it updates there on the page. So,
um, whatever changes
you make, you should be able to see them take
effect live like that.
Um, and then you have, uh,
you can change your color. You could see it,
it take, uh, effect right there.
Sometimes... Let me move my camera.
Uh, sometimes if
it's like really complex, you might-- there's
like a little link that says Page update right here.
Can't see your updates? Click here.
Sometimes you need to click that
to see your changes, but
it, it's usually it'll show you, uh, as
they're being changed. So
we can change the color to whatever we want there.
Uh, we can change it if we want it to be
uppercase, regular text,
uh, lowercase,
uh, uppercase, things like that.
You can change if you want it to be, uh,
like regular border like that
or, uh, you know, top edge like that.
I like the rounded one a lot like that.
Or if you just want it to be plain text,
then you can get rid of the border entirely.
You can change the size here.
One of the things that's cool is you can add a link.
So let me think of like how I would
explain the
way I would use this. So actually, let me change,
let me change the color.
I'm just showing you an option of like what you
could do with this, it might say on the homepage.
So right there
we say,
uh, there, and then
you have here, you have your left
side and your right side. So you can end up just
having, you have an accent type of what
you want on each side. So you can have none,
right? None on the left side, none on the right side,
and then it looks like that.
But when you-- If you do wanna add something,
you can add
either just text
and then you have two
icon, uh, libraries to work with. You
have the Font Awesome icon
library, which is built into HubSpot. You
have your icon there, and you could just click it and select
whatever you want,
and now that's, that gets added.
Or you have your Bootstrap
font, uh, or icon library, which
the, the whole website is built on a framework
called Bootstrap,
but that you actually have to go off,
uh, HubSpot to find. So you
go here to this, uh, tool tip information
here, and you
click on this link, and it'll take you to the Bootstrap,
uh, icon library,
and we could search for, uh,
I don't know. Just let me just search for a ticket
or something. Okay. So we're--
It's like an event ticket.
Um, so if I click on this,
and then you have this,
uh, this code right
here that you could just copy.
You click the little clipboard icon,
and then I go back here,
and I paste it, and now we have the little ticket
icon there.
So that's how you can do that. So for this, I'm gonna
do highlighted text,
and I'm gonna say,
I'm gonna say upcoming.
Uh, let me see. Upcoming,
and then here
I'm gonna put that arrow. Perfect.
So I'm gonna say upcoming,
and then I'm gonna change this text to say,
uh, webinar.
How to
use Scaffold.
Or you know what I'm gonna do actually? I'm gonna remove
this. I'm gonna
go back here, and I'm gonna write
upcoming
webinar.
Perfect. Upcoming webinar: how to
use... Uh, actually that doesn't look good.
Let me go back.
This is just off the top of my head, but we have upcoming
webinar: how to use Scaffold.
And then I can
make this a link, so I can link to, say, I
have a page where I have like that. So that's
just like some use case you can
use. I'm just showing you like all the different things you could
do with this top badge, but usually it's just,
you know, something that, that gives the user
some-- It'll say something like our features.
And then let me get rid of this stuff.
So yeah, usually it'll just be something about like our features,
then actually it might be like
a lightning bolt or something like that.
So that, that's, uh, your top
badge, and then if you wanna get rid of it,
you just delete it, and then it all disappears.
So let me actually go
back here. This should not be showing, so
I'll just look. That's just a bug we found.
We find these...
So I, I gotta update that, but then if I
type stuff in here,
you'll see you can get all these options again. So
let me remove this
and then delete this again, and you'll see now
it's Not showing.
So let me go back here and show
you your heading.
So your heading, you can add, uh, your text,
you can change the color to whatever you want.
Primary.
Uh, I like to do default.
Um, and in Scaffold
Pro, you have to keep in mind that you have
light mode and dark mode. So you could choose a
color that you say,
uh, you think looks great in--
You know, you could see, like, it looks--
You think it looks great in
light mode like this, but you just have to be aware that you wanna
test to see how it looks in dark mode. So I'll go
to Development Options,
Dark Mode,
Apply Changes,
and see how it looks like that.
So let me actually go back here
to my heading.
Um, and I'm gonna go back to
Default.
And you can change your, uh,
heading tag here. So your heading tag
for SEO
is completely independent of the size. So
you could change your tag to whatever you want.
And then this, uh,
number, this number dial
right here is how you change how large or small
you want it to be.
So that's just great for SEO because, like, you
can, you can have--
Your, your tag
and your size are completely just separate.
So that's really useful. So you can style it however
you want and set the tag however you want,
and they're both independent of each other.
Something that's cool is, uh, this feature,
Add Highlighted Text.
So right here it say, "Launch your product with
Scaffold." So I wanna copy Scaffold
here. I'll copy it,
and I'll say Add Highlighted Text,
and I'll paste that in there.
And then now I can choose whatever color
I want With Scaffold to be.
And then an extra thing I can also do
is I can add an underline,
which adds like a little, uh...
It, it just adds like a little, um,
style there. I don't know why, for whatever reason, HubSpot...
Okay, there we go. Now it's showing. HubSpot was, like, being
glitchy for a second.
But-- And I could change the color to whatever I want.
So now it's, you know, red or whatever.
So that's just like,
you know, your heading, you, you have-- If you wanna add
like an-- If you wanna
really show something, you want so-something to
grab the user's eye,
that's how you can kind of adjust things. I don't think this
looks good the way it is right now. I'm just quickly
showing you
some of the stuff you could do.
And you'll see this, like, predefined in some
of the, uh, page sections.
But if I go back here, and then we have subheadings. So you
have your subheading,
same as everything else. If I just delete it,
it'll be removed.
Uh, and then y- like everything else, you
have your color,
you have your size,
and then this one has an Add Link
option. So if I say, uh,
you know, for whatever reason, if I wanted to have a
link right there,
then I can do that,
and now we have the link. And if you wanna
change the link col- you can
set it to link to whatever you want. You can
set it to open a new window.
And then if you wanna change the link color, you could change the
link color if you want to.
Um, but
that's basically it. So you have
here on the content, top badge heading,
uh, subheading, and you have all these different, uh, ways
that you can edit them
in here, the size.
But then there's also some more, like, intricate,
um, settings in here. So you could change, like, the
font weight,
uh, you could change the letter spacing
in here,
um, and then you could change, like, the margin.
So say I wanna do...
And, and what you'll notice if you've seen any
of the other videos, you know that,
uh, there's a lot of settings, anything that has to do with, like,
how the,
um-- Not anything, but a lot of things that have to do with
how the page is rendered and how things
look like. Things like, um,
especially margin above and below.
You have laptops and desktops, tablets
and cell phones. So you have the--
You have-- You can set it differently for different screen
sizes. So you could say, I want a margin
of below of
four on a smartphone, you
want a margin below of six
on a tablet, and a margin below of eight
on a desktop or laptop. And
you-- If-- The reason you wanna do that is because you
want things to render differently for different screen
sizes. A, a huge margin might look great
on a laptop,
but when you're on a cell phone, it might be too much scrolling
and make things too spaced out.
Another cool thing is on all of these,
you could say, "Hey, I actually, uh, don't want this
ta- top badge to be on a smartphone.
I don't want it to, to show there."
So I can hit Hide on Smartphones,
and then when I preview this, you'll see
the top badge isn't there.
So that's a-another feature that you could see
a, a lot of, uh,
a lot of our different settings you have here. You can,
you can hide things on different screen sizes
or show them on different screen sizes.
Then you have your spacing and alignment.
Uh, if I do full width container,
it'll make it, like, the full page w-
uh, width.
And then you can have your, uh, you know, your text
alignment. Same thing, you have different screen sizes,
so you can make it left aligned on a laptop
and center aligned on a cell phone. So right now it's
left aligned,
and then we'll go on a cell phone,
and it's centered.
So, um,
you have your page animations and stuff like that too,
but that's basically it. It's a pretty simple module.
Uh, best way to learn with all of these
is to just go in there
and experiment and see how, uh,
things are.
And if you run into any issues, we have a
full, uh, list of documentation
videos and, and tutorial videos,
and then you can always reach out,
uh, and find us on our support. You can open
a ticket.
- [Introduction](https://scaffold.terrier.llc/docs/introduction)
- [Getting Started](https://scaffold.terrier.llc/docs/getting-started)
- [Building Pages](https://scaffold.terrier.llc/docs/building-pages)
- [Modules](https://scaffold.terrier.llc/docs/modules)
- [Blog Setup](https://scaffold.terrier.llc/docs/blog-setup)
- [Release Notes](https://scaffold.terrier.llc/docs/release-notes)
[](https://scaffold.terrier.llc/)
[mailto:email@email.com](mailto:email@email.com)
Copyright © [Terrier Digital LLC](https://terrier.llc/)