---
title: Tabs Vertical
description: Display stacked vertical tabs for structured, interactive content presentation.
---
[Skip to content](https://scaffold.terrier.llc/docs/tabs-vertical#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)
# Tabs Vertical
## Display stacked vertical tabs for structured, interactive content presentation.
---
###### VIDEO TRANSCRIPT:
Let's take a look at the tabs vertical
module. The
tabs vertical module is pretty
simple. It's, uh,
s- fairly straightforward. It is, uh,
it's, it's a module with tabbed content,
so, uh, you may have already seen the tabs,
uh, horizontal
video or module, and this is basically
the same thing, but you just have just
tabs set up vertically. So you have one, two, three.
You can add more, you can add li-- you can have less, you
can have more, however you want it.
But this is a great way to have users
engaging with your website. One, it minimizes
scrolling, so it's just not like an endless scroll
to look at content.
And it's a way to, uh,
it creates engagement with your users.
So they're like looking at your website, they're clicking around,
and they're engaging with the content.
So it's pretty straightforward. You can see here we
have our different tabs.
Each tab has a title,
an icon,
text, and an image here.
So here you have your vertical tab for small
business, for small business, for startups, for...
So we wanna edit the first one, and then of
course, you can always just rearrange them if you want,
you know. If you wanna arrange them however way you
want, you could do that.
But if I click in here to edit it,
you see we have our title,
um, and we can, you know, adjust our
title size. So
normally you want each title to be the same size,
but you could have one that's like three times
longer than the rest,
and you wanna make it a little smaller, so it doesn't take up
too much space. So you can adjust the title tag, the
display size,
the color, all that good stuff.
You can make it uppercase if you want.
You can just have it regular lowercase, whatever
you want. But then you have your text
here. Let me just move my camera,
so I'm out of the way.
And you have your text here,
um, and then you have the icon.
So there's two different,
um, icon libraries you can work with. You
can work with Font Awesome,
which is native in HubSpot, so you just click
Replace, and you find your icon library
there, and you could search and find what you
need. And then if I go
to Bootstrap,
uh, you may have seen on the other modules that
this whole website is built on something called Bootstrap,
which is a framework.
But Bootstrap also has an icon library.
So if I wanted to add a Bootstrap icon, I'd go
here, and I can view the icon library
by clicking on that link.
And then I could find whatever icon I want.
Uh, say I wanna do this alarm clock,
and then I copy this right here. It has it ready
to go. I just click that copy icon,
and then I go back to the page editor,
and I just paste it in there.
And now that one's set.
So the, it, you have options of,
you know, how you want your icon to look. You can change
the color, things like that. So you can have each
one, you can have a different color,
you can have them all the same color, whatever you want.
And then here we have the image,
and you can adjust your image sizing and stuff like
this here. And you can have different sizes
for different screen sizes,
uh, different, you know, screens.
And then if you wanna change some
of the styling here, you could see
you have the basic style options that are
on every module, like spacing, alignment,
background.
On HubSpot
Pro, you have-- or sorry,
Scaffold Pro,
you have the animation settings, which is like the scroll
animations when the user's scrolling down the page.
It's like all the page elements can like fade
in or zoom in or
whatever. It just
gives your website a nice little extra touch.
Then here you can change,
uh, some of the things of like the font weight for these
titles.
The, if you wanna change the font family,
you could change that.
Uh, and then if you go to tab styles here,
you can change the icon size.
You can make them smaller, you can make them larger.
You could change the border radius of the tab,
so we can make them like squared off like that.
And then you can also add like a shadow to the
image if you want. Oh, and also you'll notice the border
radius is the same for the tab and the image
here. So if we set them both to five, you'll see
they both match the border radius.
They'll be more rounded or square or whatever you
want. So,
um, modules like this, like,
uh, you know, that are custom or
really built for one specific task,
they're built for one specific,
uh, thing,
are pretty simple to understand. They're very intuitive.
They're, they're, they're really d-
doing one thing. So with simplicity,
uh, you know, it, it's just easier to understand the
more complex modules. They're flexible,
but then it could be a little, uh, take
a little more time to understand it. So
this is a very straightforward module,
uh, but I still recommend you do what I say with every,
every module where
you clone it, you mess around, you see
what you could do, try to figure it out.
If you break things, you break things, whatever,
and you just, you know,
learn that way.
So straightforward module, pretty
easy to use,
and, uh, if you,
if you run into any questions or have any problems, you
can always reach out to us
on our various support channels.
- [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/)