---
title: Cards Full Width
description: Feature cards in a full-width layout for bold visual storytelling or product highlights.
---
[Skip to content](https://scaffold.terrier.llc/docs/cards-full-width#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 Full Width
## Feature cards in a full-width layout for bold visual storytelling or product highlights.
---
###### VIDEO TRANSCRIPT:
All right, let's take a look at the cards
full width module.
So this is a module that's only
on Scaffold Pro,
and it's, uh, what it sounds like. It's
a full-width card. So you may have seen the cards
module where you can add,
you know, however many cards you want up to
twelve in a row.
Well, this is full width, so you have one card here, one
card here, and one card here.
And we have them split down the middle where you have,
uh, an image on one side and,
you know, your, your content on the other.
So let's click into this real quick and show
you how it works. Let me just move my
image
right there. Perfect.
Okay. So,
uh, you could see here you have
daily planner, daily planner,
monthly overview, monthly overview, PlanBetter.
So that's how you identify, you know, which cards
are which. You see your heading here, and then you see
here. And you can,
you can add new cards, you can clone them,
you can rearrange them,
and that's, you know, how, how you see
what you're working on. So,
uh, on the top level here, we have card
settings. So this is where you could change things like
the border radius, you can make them all
square,
or you can, uh,
you know, give them a,
a little border radius or make them pretty rounded. Let
me do something in the middle here,
around three. That's perfect.
Uh, and actually,
you know what? Let me change
the color. Well, I'll do that in a second. So
on all of these, just like everything else,
if you watch any of these other tutorial videos,
you'll see that almost every setting,
not every setting,
like... But a lot of settings have,
uh, three individual
settings where it's you have laptops and desktops,
tablets, and smartphones. So this is to make
your page as mobile responsive as possible.
M- like if you're setting a margin, if you're setting
a width, if you're setting,
uh, text align, you wanna be able to change it on
different screen sizes
so you can ensure that your website
looks great on different screens.
I've already done most of the hard work by
pre-building a lot of these modules and,
and testing them on different screen sizes and making
sure that these settings are,
uh, the way, you know, appropriate.
But just keep that in mind when you're creating
things from scratch or editing things,
you're gonna wanna make sure you
look at all these different screen sizes
and, uh, and,
you know, adjust them however you see
fit. So
what this is right now, this is just the spacing
in between cards.
So, uh, right here, if I set it
to ten,
I'm gonna bring it back down to eight,
and then you can, you know, adjust this per screen
size. So on a smaller screen, you might want,
uh, less, you know, less spacing,
so it's less scrolling for the user.
Um, but let's now click into
a card specifically. So if I click here on the top
one, daily planner,
uh, you'll see here at the bottom, we have settings.
So this is where I can change the color.
And you'll see too that
the top badge, the button,
the list items, normally you can change the color
of these things individually,
but the way this module works is you change
the color of the card and everything automatically
updates to be,
you know, with that color theme in the card.
So you see we have the blue icons, the yellow background,
the yellow badge and icons
and, you know, the green with the green button, so on and
so forth. And then you'll see laptops,
desktops, and tablets again.
So this is for
your content itself right here.
So, uh,
uh, I've mentioned in some other videos that this
theme is built on what's called Bootstrap.
And basically, all you need to know is that Bootstrap
is set up in a way that you have twelve
columns in a row. Everything is done by rows,
and you have twelve columns in a row, and that's how
you, uh, adjust things. So
you can set your column width or
it needs to equal twelve. So right here
we have a content column, which is this right
here, is set to five.
Then we have an offset of one, which
is right here. And then we have our image column
width of five as well.
So five plus one plus five
is eleven.
So because we're under twelve, everything
works. If I change this to a higher number,
now we're on, uh,
you know, two different rows 'cause we've exceeded
twelve.
So just something to keep in mind. And then this is just
like an offset. I can offset,
you know, how far I want that to be.
If I wanna do an offset, if I wanna change
the image width,
I can ch- make that wider.
I can make it smaller.
Um, I c- if I want to offset it,
I can offset it.
So this is something will be more
intuitive as you, as you play around with it.
But just wanted to show you that real quick.
Uh, and then
here it's, it's pretty structured. So
you have your top badge, your heading, your subheading,
and your image, and then anything extra, you can
add extra content here. So you have your list items,
your buttons.
But just to show you how this works, you have your
top, uh, top badge here. If I wanna remove
it, all I do is just delete it and it's
no longer there.
Uh, heading.
You have your heading here. You can choose if you want it to
be uppercase or lowercase or just regular.
And like every heading in Scaffold,
you can change your heading tag to
anything you want and then independently
change the display size.
So this is very useful for SEO because
y- you can make something
look like an H1 tag,
but, uh,
w- in terms of size, it could be a big,
it could be a big heading,
but it could actually be an H5 tag or
whatever. So this is very important that users
can-- That the size of the heading and
the tag are,
uh, not completely married, and you can, you can
edit those individually.
One other thing I wanna show you real quick is,
uh, you see, you see here you have your top badge,
your heading, and your subheading.
When you go into styles, you have
ways to adjust those as well. So you
can add, uh,
ch- change the font weight, you could change the margin
above and below it.
And the reason we have this set up this way is
that you wouldn't have to change
these things individually on each
card, because that makes it difficult to
have consistent styling. You might change it on this
card and this card and forget to edit it on this
one. So that's why certain things,
uh, that are structured,
uh, within here, within the card,
like top badge, heading, subheading,
it- You can edit them in the styles tab
where things that,
uh, aren't as structured, like you, you can
choose whether you wanna add it or not.
When you click inside it,
uh, that's where you have your styling and stuff
like that. But,
uh, I don't--
Like anything else, the best way for you to learn this,
I d- I can't go on
with every little detail. The best way for you to learn
is just to go in HubSpot and,
you know, edit this module, clone it, and mess around
with it. But the last thing I'll show you is
how the image works. So here we have,
uh, again, our top badge, our heading,
our s- uh,
our subheading,
and then we have some of the extra content that we added
down here, but we have our heading right--
or sorry, our image right here. So this is where
you select your image, your alt text.
Uh, this
has a transparent background, so you can't really see the
border radius, but if it was another image, you could
change the border radius.
You can give it a shadow,
um, and then you have your image settings,
so you can adjust your alignment, the width,
uh, how much margin is ab-above or below
it. But the most important thing is right here,
the order.
So you have order
one, which is either on the left or the top,
or two, which me-means it's either on the
right side or the bottom.
So what this means is that on
a larger screen, if I select one, I'll
select that right here,
on a larger screen, it's gonna be on the
left, and on a smaller screen, it's
going to be on the top. So you,
you-- on a cell-- on a smartphone, you would load-- it
would load with the image on top
and the text below.
And like anything else,
you have
the setting on individual screen sizes.
So you have this one setting for,
um, laptops and desktops, one setting
for tablets, and one setting for smartphones. So
the reason it's like this
is because on a
larger screen,
uh, this looks really good, this alternating
like, you know,
l- uh, right, then left, then right. It's
like very,
uh, appealing and, and draws in the
eye and breaks up the page a little bit.
But on a smaller screen, you'd wanna make
sure that everything's consistent as a user
is scrolling. So you would have like text on top,
image below, text on top, image below.
So this is a good example. We have this one,
this card one,
where it's set to this number two, right
or bottom,
number two, right or bottom,
and number two, right or bottom,
regardless of screen size.
But if you go to this next card,
and we go to image,
and we go to image settings, you'll see that this one
on a larger screen, it's set to number
one, left or top.
But once we get down to a tablet size
when it's-- they're stacked,
we change it to number two,
and it's number
two, right or bottom on a smartphone. So it's
just to show you what that looks like right-- real quick. We
have, you know, left or sorry, right, left,
right. But then when we go on a smartphone,
you'll see that it's,
uh, content above, image below, content
above, image below, content above, image below.
So that's just a quick example of like
why it's good to test things in different
screen sizes because
like, you know what, let me just actually show you real quick.
If I go here,
and I go to the second one,
and I go to this image,
and I make it
so it's,
uh, left or top,
and I go to tablets, do the same thing,
and I go to smartphones and do the same thing,
and now let's preview it.
We s- You see we have the t-- uh,
content and the image, and then we have the image and
then the content.
So y-you might think that
looks fine, but for me, I think when you get on a smaller
screen, you want consistency
among your, uh, page elements there.
So that's basically it. There's, uh,
a lot more to go into. Again, it-- the
best way to learn is just by doing it yourself and
poking around.
But, uh, yeah, if you, if you have any
questions with this module, you can always reach out to us
and contact 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/)