---
title: Cards
description: Display collapsible content sections for FAQs, product details, or grouped information in a clean, user-friendly format.
---
[Skip to content](https://scaffold.terrier.llc/docs/cards#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)
# Cards
## Showcase content in flexible, structured cards — perfect for highlighting services, team members, or key offerings.
---
###### VIDEO TRANSCRIPT:
Okay, let's look at the cards
module. Now,
the cards module and the row module
are both the powerhouses
of the Scaffold theme.
Uh, whether you're on Scaffold Lite or Scaffold Pro,
these two modules are extremely flexible,
extremely powerful,
and, uh, I'm just really excited to show
you what they can do. So let's jump into it.
Okay, so here
we're on,
uh, in, in our page editor,
and I just wanna show you real quick how flexible
and versatile
the cards module is.
So you have
just some-- You can have some employees here.
These are speakers for an event.
So, you know,
pretty similar. You can kind of see just some logos
added in there.
Then we have some, uh,
different cards built here.
We have some feature items, similar
feature items, staggered.
Uh, we have some colors here.
We have some testimonials here. We
have industry cards here,
pricing cards. This that looks like this.
We have more pricing cards,
um, just some
different, you know, feature cards, and then we
have some other stuff here. So this isn't
even all of them
that are pre-built on Scaffold Pro, and then some
of them are also on Scaffold Lite.
But you can just see this is all the same module.
It's very flexible, and
I mentioned this in another video that's
kind of the general module overview
video, but this
theme is built on Bootstrap, so this
is where it becomes important is,
uh, with the cards module and the row module
specifically.
So just a quick summary is like Bootstrap
is what makes your website,
uh, it's a framework to build your website. HubSpot's
built on Bootstrap, a lot of websites are built
on Bootstrap, and it makes it very responsive,
and it gives you, uh,
a quick way to lay out your website. So
what-- Bootstrap is set up in rows
and columns. So we have a row here and a
row here, and
you can have each
row can be a unit of twelve
wide. So
and so each column,
when added up in a row, needs to equal twelve.
So here, this would be
three, six,
nine, and twelve. So each card here
has a value of three.
It, it-- You don't have to get too lost in it. Uh,
you know, and you could look on YouTube and things like that, like
Bootstrap basics or Bootstrap
grid basics to understand it,
but that's just an, a quick explanation
of how some of this stuff works. But I wanted to show you,
maybe I'm trying to think of the best card
to kind of edit in here,
um, for quick changes. So
I'm gonna go to this one. I like
this one right here.
So you could see here,
um, I added some...
We have some styles here.
Sorry, my
camera froze up for a second. But
when I click in here,
you see we have card one, card two, card
three, card four. So this is-- And if I want to
rearrange them,
now you could see how they rearrange. Now that looks
kind of weird because on this card, I
have, you know, a margin up top
to kind of give them that staggered look.
So let's bring that back,
and then you'll see at the top,
as soon as you click on the module, there's row
settings. So here
is where you set how many numbers you want,
how many numbers of cards you want to show
on a row.
You can set how much spacing they have, which is
the amount of space in between each card, and then
the padding,
which is the,
the amount of padding inside the card, like this
margin. For,
you know, you have the content, and then you have this padding
around. So
you could see here,
like you'll notice this across the website
and also too, I'll say it a million times,
the best way for you to learn is just to
go in there, clone things, break them, mess
around, and you'll, you'll learn. But
I'm excited because once you learn how to use this
cards module, and I'll try to stick to,
uh, some of the more advanced stuff to show
you how to do it,
the-- you can unlock so much. It's
so flexible. The amount, you know, the amount of things
you could do with this and the row module is really crazy.
So anyway, you'll see here in the,
in the row settings that you have three different
settings. You have laptops and desktops,
tablets,
and, uh, smartphones. And that's
so we can set how many
ro- how many cards we want in a row
on, on larger screens,
how many cards we want in a row on tablets,
and how many cards we want in a row
on a cell phone. So on, you know, on a la- on
a laptop, there's gonna be four,
on a, uh, tablet, there's gonna be
two, and then on a cell phone, there's gonna be one. And then
in these individual cards as well,
the margin settings, every setting is divided
into those three categories. Not every
single setting, but a lot of the stylistic settings,
you have those three
distinctions of how do you want it to look on a laptop,
how do you want it to look on a tablet,
how do you want it to look on a smartphone?
I've done a lot of the hard work by predefining
these things in these page sections,
but it's just for you to know it's there if you wanna customize
things and, and things like that.
So, uh, and then you have things like universal
card settings. So this is for every card in
the row.
You want,
uh, what the border width, what do you want the border
radius? If you wanna give it a background color, if
you want it to lift on hover, which is what you
have here, add border width. So there's things,
again, you're just gonna have to poke around. But
I wanna show you
what I'm most excited about with this. So actually, let
me go here,
and can I get rid of these?
Okay, this one has no margin.
I wanna straighten these out, so I'm gonna get rid of the
margin top on this one.
This one doesn't have a margin,
and I'm gonna get rid of the margin top
on this one.
And then you could see these already were set to zero.
There's a margin bottom of two for tablets.
But, um,
so okay, now these are straightened out.
So what I'm gonna do is I'm gonna go back
to the first one and show you how some of this
stuff works.
So you could see here
I'm in card one. So if I go back here,
I click in the module,
I have card one, card two.
I click in card one,
and now you can see icon, heading, text, text.
So you can see here how there's an icon,
uh, a heading.
So what if I wanted to add,
uh, let's say I wanted to add
a button?
Oh, actually,
there's a, there's a
issue with that because the whole card is linked,
so you can't put a link within a link. But it--
I'll mention that later. So anyway,
I, I want to add a list,
and then let's say I wanted to add,
uh, an image.
And so you could see this is how it works. You
go inside the card,
and you can add items within the card. So
that-- So back here, you can add a card,
and then when you have the card, you click inside of it
and you can add things, you can rearrange
things. This is how it moves.
So that's pretty simple to understand.
That's... You're probably gonna get your best way
of learning by just doing it.
So let me get rid of some of the stuff I added here.
And also too, on each one of these items,
you have the styles.
So you can change the font weight, you can change all that stuff,
and then you could change the margin up top.
You can hide it if you wanna, if you wanted to.
So if I go here, hide on laptops and desktops,
you could see it disappears.
So that's just something to keep track of.
A-again, you're gonna figure this out by messing
around with it, but
I don't wanna go on too long with this stuff that's,
like, kind of like
more intuitive,
because I wanna show you
what really unleashes this module
to be a, a powerhouse.
So here at the center
or at the, at the main area, when you click inside
here, this is the first thing.
You see we have universal card settings here.
So we have this row setting where we
set how many cards we want per row,
and then we also have, like, settings like the color
and the border and stuff like that.
And it just applies evenly. We want four cards,
boom. Each card has a width of three, so it equals
12 when they're all combined. We want them all
with a white background. We want them all with a border, this
and that. So that makes it easy to fly through
and edit it.
But what if there's one card you wanna highlight? What
if there's one card you wanna be different with? What
if all these things?
So what you do is you click inside here,
and then, uh,
we have Add Link. Let me actually...
Let me get rid of that for now.
And then you have-- So this, by the way,
this just creates-- The whole card can
link to something. So if this was highlighting,
so it says Freelancers,
you could link this whole card. So rather than
the user having to click the specific button,
they can just hover over it and click it,
and it'll take it to where they need to go.
But anyway, let me remove that.
So if I go here, Create Unique Card Width,
now
I can make this card width whatever I want. All the
rest of them will s- will keep their default
value. But here, if I go
make it 12,
and then what if I actually go back here?
Let's see.
What if I go back here and I say that I want
three per row?
So now we have this highlighted one up top.
For whatever reason, you can have more text, you can have more
whatever, and then you have these three below.
So that's one of the cool things is
w- by clicking inside the card, you could choose
to override.
So now if I remove it,
now you'll see it's back 'cause we selected
we want three per row.
So now we have three here and then one on the row
underneath. But when I go back to Select Unique Card
Width, and you
can change it to whatever you want,
you know. So now if I do
eight, there's gonna be,
you know, this here and then that one there, and that can fit
on a row. And of course, you have this option
for laptops,
tablets, and smartphones.
If I wanted to create unique text alignment,
so here
is where you set your text alignment for the whole module.
So I want it to be,
you know, s- uh, left aligned, centered.
But like e- like everything else,
when I click inside the card, I could say, "Hey,
I wanna override that. This one-- This card's special."
So I say, "Let me make it center."
And like everything else,
you have it three options.
Do you want it to look like this on a cell phone?
Do you want it... Smartphone. Do you want it to look like this on a tablet?
And do you want it to look like this on a laptop and,
and desktop? So \[lip smacks\]
and then, uh,
create unique card settings. Here I can
say I, I want the shadow
to be, uh, more, or I want
the border to be more,
or I want the border radius to be less.
So this is where you can really customize things. I
could say I want the background to be blue.
I can change the opacity on it.
So you could see right now I'm not creating
anything beautiful. I'm just showing you
this is what unlocks-- This is what makes
the cards module, and more so the
row module, 'cause it's, it's a little bit more,
um, flexible than this
is. But this is what makes some really crazy
flexible modules, because you have the
default section where you go here
and you set all the settings and you ins-
you go into the cards.
But having the flexibility to
say, I wanna break away
for this card or for this column when
we're in the row module, I wanna break away
from the universal styling and do something
unique here, it's, it makes it very
flexible. So that's how you get kind of,
um, you know, that's how you,
that's how you get certain things
that are more dynamic like this, where you have three
with this, and then you have three here and
then two there.
So anyway, I don't wanna go on too much further.
I just wanna show you the basics
of what you can do on this cards
module. There-- You could see there's plenty more
you could do that I...
There's basically endless ways that
you can use this module, uh, in, in your,
um, website. There's obviously some
features that are on Pro that aren't on Light,
um, I think like embed codes and rich text
areas
and, uh, videos and a few other
things like that.
But that's it for now. I hope
it wasn't too just all over
the place. I really just wanted to show you... The main thing
I wanted to show you is that you have the universal card settings,
and then in the,
in each individual card,
you can override them
and have fun with it.
So that's it.
- [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/)