---
title: Carousel Cards
description: A dynamic, scrollable card slider for showcasing testimonials, events, or featured content.
---
[Skip to content](https://scaffold.terrier.llc/docs/cards-full-width-0#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)
# Carousel Cards
## A dynamic, scrollable card slider for showcasing testimonials, events, or featured content.
---
###### VIDEO TRANSCRIPT:
Okay, let's take a look at the
carousel cards module.
So the carousel cards
module
is another, uh, Scaffold Pro
only module,
and it
is what it sounds like. It's a card, but it's on a
carousel, so you can have,
uh, you know,
three or four or five, whatever,
and it'll automatically,
uh, you know,
rotate
on, on the page, or the user can use
these, uh, you know, little buttons here to navigate.
One thing I've mentioned on a few other
module videos \[clears throat\]
is that when
you're in the page editor, when you click on the navigation,
it's very snappy.
Uh, when it's on the actual page itself, live
on the website, there's like a smooth animation
to it. So
when you're in the page editor, a lot of these like animations
and stuff aren't, um... it just--
they're, they're kind of not loaded on the, on
the page editor to make it more
efficient for you to l-
uh, edit the page. So just something to be
aware of. It's not as snappy on the live
website. It's just like that on the editor. On the live
website, there's like a smooth animation.
But you could see
there's a few ways you can use a carousel. Uh,
the two sections that I've built, pre-built
here is one to highlight upcoming
events or upcoming webinars in this case,
and then another to show,
um, testimonials and things like that.
If you saw--
Let me move my c- uh,
camera real quick.
If you saw, um,
the full width cards,
uh, module, this is very similar. It's,
it's, uh, in a lot of ways, it's very similar
to the full width. It's just now you have
a carousel, so you have mult-- rather than the cards
being stacked one above each other, they're just on
the same, uh, area, and
the user can scroll through them.
But you have here, you have your carousel settings, so you
could have like border radius,
uh, and, and things like that.
You can make it
zero, so it's more squared off or whatever like
that. You can add the card shadow,
\[clears throat\] so you can have no shadow or a large shadow.
Um, and then you have your image alignment here. So
these images are set as like background
images, so you can,
uh, adjust the height of the image
if you want it to be,
uh, centered on the top or the bottom
or the center. I, I think the best way is usually
just do everything,
uh, alignment in the center,
but you have these options.
And, uh, you can also, when you're in the actual
image itself,
you can choose image settings here,
whether you want it to show on the left
or the right.
And you can also, if you wanted to, like hide it
for whatever reason on certain screen sizes. So
for example, you might have, uh,
you might have a,
uh, a big image that you think takes
up too much space on a, on a smartphone,
so you can say,
you know, to hide this image on smartphones
so then when it's, when it's rendered on a phone,
you just have the content. You don't have an image taking up
space. That's just one use case for it.
But let's actually click into each carousel
item and show you how it works. It's pretty straightforward.
You have your image here that you add.
You can have the location of the image,
and then you have your, uh,
your content settings here. So you
can add whatever you want. You can have it... So this
one, we have a badge up top. We have a heading.
We have some text, some more smaller text,
and then a plain,
uh, button here to register.
On this one down here,
we have, uh,
we have our image of our, uh,
testimonial, whoever the source of our testimonial.
We have the company logo as an image.
We have, uh, text and then a small heading for their
name and then some small text
for their, uh, job title and company.
So, uh, real quick to show you
how some of these image settings work,
or this might actually be in
spacing and alignment.
So I go to spacing and alignment here.
This is where you can adjust the width
of your content and the width
of your image.
So, uh, I've mentioned this in
every module video so far,
but it's worth saying that this is built on
Bootstrap.
So Bootstrap is a popular framework that,
uh, the- uh, Scaffold theme is built
on. HubSpot's built on it. Many
modern websites
or most modern websites are built on Bootstrap
or something similar.
And, uh, basically all you need to know is
that it's built on rows.
So this is a row right here,
and each row can equal 12.
And there's d-- You can assign,
uh, how many, how the width
of each thing. So you can see here,
uh, the total carousel width is ten. We don't
need to worry about that.
But you can see right here,
the content column is set to eight,
which is this right here.
Now the image column is set to four, so eight
plus four is 12.
Yeah, if I wanted to make this
three and make this
nine,
now you can see, uh, the image is a little smaller
and we have more space for content.
If I set this to ten,
well, you see now that breaks it. Now it's set
to two different rows because we've exceeded
12\.
So that's just the, uh,
easy way. This is gonna get more intuitive as you
use it. Uh, if I say even if
I go here six
and six
and you could do something like that, which is more like this
one split. This one right here,
total carousel width
is just if you wanna make it,
uh, full width like this one, the one above
it, or if you wanna make it,
you know, you can make it how-- whatever size you want,
basically.
But, um,
you know, you have your padding.
Uh, like everything else, you can have your different, uh,
settings on different screen sizes.
So you also have alignment, so I can set the alignment
for everything to be on the top or the bottom,
um, and things like that. So
like everything else, it, it's-- you're probably gonna
learn the most by going in here and actually experimenting
and, and just like messing around with it. But let me go
back to the content here to show you,
uh, how some of this works. So let me actually go back
to this one.
Uh, we'll go to carousel item
two and, uh-
We'll see here. So like this is where you add the
content.
You can, you can rearrange it however you
want. Say I wanna add a new piece
of content and, uh,
you know, you can add basically,
uh, a few different things. You can add a heading,
text item, list. So let me add a list here.
Uh, lists are really interesting 'cause here we
have a regular list, right?
And if I wanted to--
we have list orientation, so right now it's vertical,
like a column,
but then if I set it to horizontal, now they go
across.
Uh, let me set it back to vertical. You have
your list color, so you can make it, uh,
so you can change the text color of the list
to whatever you want, but then you can also change the
color of the icon itself.
Uh, and then you have--
you can make it a solid check mark or,
or a outline
like this. You can change the size
to different sizes.
And then something that's cool too is right now we have it set
for check, check marks. We can change the color,
but you can also set it to icons if you want.
So, uh,
icons are, are
a pretty cool way of doing it. And to change the icon,
what we would do is we would actually click inside the
list item,
and here is where we would change the
text. So we'd say, uh,
amazing
feature
one. Let's just change it to that. You can see it's updating right
there. We can change if we
want it to be all uppercase.
I'm gonna change it back to regular.
And then you have two different,
uh, icon options. So you have Font
Awesome, which is cool 'cause it's built in here,
it's integrated,
and, uh,
we can select, you know, whatever we want.
There's the Airbnb logo.
Or you can just select Bootstrap icon. So the
same way this is built on Bootstrap,
Bootstrap also has an icon library.
And what-- it's a little more complicated, but
what you would do in this case is you hover over here
and you select,
uh, you find whatever icon you
want. Let's do this, uh,
let's do this airplane one.
And then you just copy this code right here.
Let's go back here.
And we paste it in,
and now we have an airplane.
And then something else that's cool is you can add highlighted
text. So if I say,
um, I really wanna do
highlight the word feature in here.
I can paste feature,
and now I can make it bold, I can make it italic,
I can make it,
um, let's do this dark color.
So now that just like, um, you
know, it's just a way to highlight certain things in your list
items. So that, that was,
um, just something to show you that this is
more about the
module itself, but you could see also
it's, it's kinda cool to learn how the
different components of the module work.
So like anything else,
I encourage you to go in
to, um,
into Scaffold
and clone some of these sections, clone some of these,
uh, modules inside of
Scaffold, inside your theme,
and kinda just mess around and, and see how you
like it. And, uh, if you run into any
issues, you can always
reach out to support.
- [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/)