0:00:00
Hey, what’s up everybody? In today’s BRX training, you’re gonna get to follow along as I build a brand new testimonial section frame for frames. We actually get to kill two birds with one stone here. We get a premium BRX training. We get a new frame developed. And actually, within this section, there’s multiple frames that we have to develop. So you’re gonna get to come along and I’ll explain everything as I go.
0:00:25
But let’s go ahead and get started. All right, so first let’s take a look at our inspiration for what we’re going to be creating here. So we’re gonna need an intro, which we already have an intro frame. So we’re just gonna pop that in. And then we need to build these testimonial cards. We need to build this two column layout right here. And we need to build a CTA card. And that CTA card is actually going to be sticky within this section.
0:00:54
So the idea is that in the general context of a page, now this, you could make this the entire page if you wanted to. Like if you had a testimonials page, this one frame could serve as the entire page layout. Or you can use this section within a, another page, okay, and as you’re scrolling down and you encounter this section, you can go through all of the testimonials. It’s almost like this section of content freezes and you’re just scrolling through testimonials until you get to the end, and then it lets you access the rest of the page.
0:01:30
That’s kind of the effect you get when you do a sticky sidebar like this. Or you’re gonna be able to take just this column of testimonial cards and insert that into a section. We try to make things as modular as possible. And of course, you can use the CTA card anywhere on the website that you like. It doesn’t have to be part of this specific section. So there’s a little bit of thought and planning that goes into frames like this. And I think it’s going to be really good for you guys to see how we would approach building a frame like this and the modular nature, the BIM classes, all the little details that go into it. Really, really good, solid training. So let’s go ahead and get started. I’m going to pull this over to my second screen so I can just leave it here as my kind of the, you know, the inspiration that we’re building from. And then you guys will be watching what’s going on in the canvas on this side.
0:02:30
So I’m going to start by adding a section and I’ve already created the frame and bricks. We just have our blank canvas kind of ready to go and we are going to be calling this let me get out of that preview. It’s going to be testimonial section India. So what I’m going to do is we prefix all of our frames classes with FR. So this is going to be Testimonial Section India, just like that, and I’m going to copy that class. I’m also going to come over here and make sure this says Testimonial Section India. I try to cross as many T’s and dot as many I’s as I go because it does tend to, at least for me, it tends to limit the things that you miss or mistakes, things like that. Okay, so the next thing that we need to do is we need to add our intro frame right off the bat. So I’m just gonna go up here to the template library I’m gonna type in intro and we’re going to use this centered intro right here and I’m gonna drag that up ahead of our other frame. Now right off the bat you see these two containers are touching each other that’s no good. So I’m gonna select the class and we’re actually going to use a variable, a row gap called container gap. And so that’s going to give us the same container gap spacing that we have in every other frame. Of course this variable happens to be editable from the ACSS dashboard. Okay so we have our intro to our section now we’re going to create our two column layout. Now what we want to think about, let me bring this back onto the screen here in terms of our inspiration.
0:04:08
What we want to think about is, you know, does this grid, which is going to be a two-column grid basically, does this grid, do people, should people be able to insert that into any section that they want to? Or should it be unique to this section of content? Well, the answer almost always is that it should be its own unique grid. They should be able to take that as like an individual frame and use it anywhere they want on the website. So what we’re gonna do is we’re going to call this Testimonial Grid India.
0:04:45
So instead of being like Testimonial Section India and then the grid is a child of that. Testimonial Grid India is actually its own frame that can be used as a standalone item. And then we’re going to do the exact same thing with the classes. Testimonial Grid India. So it’s not Testimonial Section India double underscore grid, it’s FR Testimonial Grid India. Okay, now what are we going to do? We’re going to insert two blocks. So the blocks are going to be, one is going to be my left side, my left column, and the other is going to be my right column. So what I’m going to do here on Testimonial Grid India is actually create my grid structure. So we’re going to do root, we’re going to do a display of grid, and we really need to think about this here. I would say if we did maybe 5FR, 2FR something like that that’s probably going to be a little bit too small. Maybe if we do 4FR, 3FR no that’s going to be too big. Let’s try 6FR, 4FR that might be getting kind of in the sweet spot here. I think our CTA column, let’s do 6 and 3. 6 and 3 is probably good to go. Okay so content now we’re gonna do a column gap and this is gonna be a grid gap okay and we’re just gonna carry that over to the row gap as well. What I actually may do in a minute is switch that up.
0:06:29
We’re gonna see how everything looks and feels. It’s about the exact size gap that they have in that example. But I tend to like a little bit more, when you have a sidebar kind of situation, I like to have my content a little bit further away from it. Again, we’re gonna see how this looks and feels in just a minute. Okay. So this is gonna be, this left side is going to be the the body container of this grid and then this is going to be the sidebar of this grid. So what I’m going to do is do fr and it’s testimonial grid India and then this is going to paste over here, but change this to sidebar.
0:07:19
So everything is getting a class. Everything is using BIM. We have our sidebar ready to go. I’m just going to use a sticky. Actually, we’re not going to do it on the sidebar. We’re going to add a block, this block inside the sidebar, which I’m going to name these now over here. So this is going to be sidebar and this is going to be main and then this is going to be our card Well, our card is actually its own frame. And so it needs to be CTA card alpha. We don’t have a CTA alpha yet And then i’m going to give it a class of fr cta card alpha And even if you guys are not right, you’re obviously not developing your own frames, right? But you see what I’m doing here.
0:08:04
When you’re using BIM, sometimes a lot of people have the question of, is it a child of this parent or is it its own thing? Well, you have to kind of think through and grade it. It’s like, can I use this as a standalone item somewhere else? Then it shouldn’t be put into BIM as a child element of something else because that parent may not exist when I go to use that this somewhere else. It needs to be its own parent effectively. It needs to be its own standalone component. So you see that’s exactly what I’m doing here, right?
0:08:36
The grid, some people would would have made that a child of testimonial section India, but I did not choose to do that. I made it its own standalone item, FR testimonial grid India and then of course Your your main and sidebar those have to be children of this grid, right? So they get attached as children But when we got down to a card that is in this grid We see that it’s actually a standalone element of our CTA card alpha and then over here We’re gonna add a block and guess what this block is gonna be. It’s gonna be let me open this up It’s going to be testimonial card India. So it is not part of this section or this grid, it is a standalone component called FR testimonial card India.
0:09:28
So I basically, and you can see this one up here, is not a child intro of testimonial section India, it’s its own element, FR intro alpha. So we’re creating a frame, but within that frame, we have one individual component, a second individual component, the grid, a third individual component, the CTA card, and then the fourth individual component, a testimonial card. Hopefully this helps you understand when you’re using BIM. All right, what’s a parent versus a child versus a standalone component?
0:10:07
Because these are decisions you are gonna constantly have to make throughout the development of any given project. Okay, so I’ve got CTA card alpha, I’ve got testimonial card India, I’ve got everything labeled properly in the structure panel. So we are ready to move on. I think what I’m gonna do is build out the actual card here. So I’m gonna be looking at, I’ll bring this back on the screen for a second.
0:10:31
I’m gonna be looking at just what boxes do I need? What containers do I need in order to build this? Now, it’s very specific to have like a, this would really only be for B2B websites where you would have a company logo inside the testimonial. I’m actually gonna leave that out because it’s gonna be easy enough for people to add on their own. And it has such a limited use case that it’s almost like every time someone went to use a testimonial card, if they’re not building B2B sites, they would have to remove that element.
0:11:05
So, or we can go through the thought process. The thought process could be, well, it’s easier to remove than it is to put there. So should we include it and allow people to just simply delete it if they don’t need it? These are questions that come up all the time when we’re building frames. And it’s like, there’s not necessarily a right answer or a wrong answer. There’s pros and there’s cons.
0:11:31
Do the pros outweigh the cons? All right, I think we’ll keep it. I think we’ll put it in and if people don’t want it, it’s easy to remove. It doesn’t take much effort at all to remove. And usually people are going to be building sections like this with a loop if they’re smart and so it’s only one card they’re going to be dealing with. So okay, let’s go ahead and put it in. So I’m gonna need a container right here. That’s gonna house a image. Actually, I need a, this is so, let’s say in blocks basically.
0:12:12
So a block to wrap all of that top row. That’s gonna be our header. Excuse me. That’s gonna be our header. Then we’re gonna have our body block. And that’s gonna house our rating, our headline, like our standout, it’s like a, not even really a heading, right? It’s like a call out, basically. It looks like a heading.
0:12:34
I don’t know if we’re gonna actually semantically make it a heading. And then we’re gonna have the text of their testimonial. So I need to start out with two blocks. So let’s put those in real quick. Let’s go ahead and shrink that down. Okay, so I’m gonna go block block. If I can type block block. So there’s your header and there’s your body right there. Let’s go ahead and give those BIM classes.
0:12:56
All right, so this is gonna be fr-testimonial-card-india and I don’t like typing that over and over again, so I’m gonna copy it and then this is gonna be the header and then this is going to be the body. Okay, perfect. Let’s go ahead and label those. So this is going to be header. This is going to be body. And then I want to bring back our example. So now within this header I need a block that’s going to group this content together. Really what you’re trying to do is layout content and group content. Sometimes you You can lay things out without extra containers, but you actually need extra containers simply for the purpose of grouping items together.
0:13:45
It makes sense that if I wanna move this person’s name, title, headshot, like to somewhere else in the card, I can move it all together, right? It doesn’t like come apart when I start to move it. Like, you know, I’ll show you in just a second. So I want to group this together, but in order to group this together, it’s going to need its own wrapper. And then it’s going to need a wrapper inside the wrapper to stack this content on top of each other while these two things go side by side.
0:14:15
Okay. And then because we already have a header container and then this exists is basically think of this as one component. This group of items is one component. This is a second component. It’s easy to take those two components and move them apart from each other with Flexbox. All right. So this is how you want to think about laying out content is if I can group things together, it’s going to make these layout scenarios a lot easier. You could probably accomplish this layout as three items, right? A headshot component text and and you know whatever this is called a title a name and title component and then a logo component that’s three components that saves you a div but in saving yourself a div you’re creating the problem of now these things can’t easily be spaced out because if Because if you do like space between it’s gonna put this component in the middle away from this headshot They’re not they’re no longer together right so you see why grouping items together is You know it’s very helpful All right, so let’s go ahead and we’ll move this over here so inside of this header what I need is a block that is going to be the Container and actually I don’t even know.
0:15:37
I don’t need a block. Really, what I just need there is a div. Alright, so I’m going to add a div and that’s going to help us visualize because now that div is not going all the way across full width. So there’s my container for my person component basically, and then I’m just going to duplicate that and that is going to be the container for my logo now.
0:16:01
The next question is, do we need a wrapper for that logo? No, not technically. Technically you don’t need a wrapper for the logo. The problem is an image can’t have pseudo elements before and after elements right? And if somebody somewhere someday, see we’re building these frames for lots and lots of people. I don’t know if somebody’s ever going to want to use some sort of little accent design that requires a pseudo element, and because we didn’t wrap the logo, they have to add the wrapper themselves, and it’s just, it’s extra work. The best practice is just wrap your images. Anytime you’re using an image, just wrap it.
0:16:47
It takes no extra work in the moment to wrap it. But what you’ll find is that if you don’t wrap your images and then you come back later to add like a pseudo element, embellishment of some sort, you’re like, oh, I can’t do it. Now it’s like extra work in that moment. All right, I gotta add a wrapper. I gotta add a class for the wrapper. Okay, now I gotta put the thing in the wrap. Okay, now I can add my pseudo.
0:17:10
See, it’s like you’re just giving yourself extra work in the future when it takes almost zero time. I’ve already added the wrapper. Like I’m already deciding after the fact, do I need the wrapper or do I not need the wrapper? It’s already there. Why don’t I just keep it, no harm, no foul? Yeah, it’s an extra DOM element, but in the grand scheme of things, the way we’re keeping everything as clean as possible, we’re using a builder that doesn’t create deception.
0:17:33
These little one or two extra DOM elements are not an issue at all. You shouldn’t even give it a second thought. Okay. So the next question is what are we going to call these things? Right? So FR testimonial card India. And we’ll do, um, we’ll do, we can call it info wrapper, but the word info doesn’t convey what the information is really about. Right.
0:17:59
Um, I could call it like a by now it’s not a bio it’s so we can’t call it bio profile wrapper profile wrapper because we have added profile cards okay let’s call it a profile wrapper so we’re gonna do profile wrapper so that’s gonna wrap the profile information for this person and then this is gonna be called logo wrapper because there is a logo involved. And now what we’re going to do is grab our header and we are going to set this to flex and we’re going to set this to row and then we are going to set this to space between and you’re going to see that these two items fly apart. OK. And if we look back right here we see that’s exactly what we want. One thing here, one thing over here, alright?
0:18:53
Now, some people learn best when there’s elements already on the page. I understand that. I’m doing this for a very specific reason. Because the more you’re able to visualize and think in blocks, a lot of times the easier this stuff is for you. Because if you have to start adding elements in order for this all to make sense, you end up having to do a lot of working backwards.
0:19:19
Because you add elements that don’t have wrappers, that they really needed, and then, so you’re just, you’re doing a lot, it’s very disorganized, right? So you’re taking two steps forward and then one step back. Two step forward, one step back, you end up making mistakes. If you can learn to visualize in empty blocks and build a component with just the blocks that you’re going to need before you actually add any elements. It really does step your development game up in my opinion. Okay. So now what we have is we have this left side now I’ll try to maybe I can put these like side by side.
0:19:56
Let me bring this in. Okay. Somewhat. This will work. So you see we have now we need an image which also by the way is going to have a wrapper and Then we need another wrapper for this Content right here. So really what I need is two more blocks Inside of this block and these can actually be blocks because they’ll only be the width of this, you know of this div So I’m just going to add a block block Okay, and it’s putting that inside. Now let’s go ahead and label these things.
0:20:29
So we have profile, okay, and I’m getting a bit of lag here, so this is one of those times where we’re gonna save our work. We’re gonna go ahead and refresh, and then we should be back to what we want. So I have profile, this is gonna be the avatar wrapper, and then this is going to be the Profile content. We’ll just say content wrapper. Okay Perfect. All right. So I’ve got w I’ve got fr testimonial card India profile wrapper This is going to be the avatar wrapper. Okay avatar wrapper. This is going to be the content wrapper And then this is going to be the profile content wrapper.
0:21:11
We don’t want it to get, we don’t want anything to get confused here. So profile content wrapper. And I could actually, if we really wanted to make this a super consistent and I love the fact that you can just edit classes right here inside of bricks, it’s the profile avatar wrapper. Okay. Cause it’s in the, it’s in a profile, it’s in a profile wrapper.
0:21:31
These kind of keep that as a component of this all right perfect so we’ve got our profile component made now what do we need to do with that profile component basically the same thing that we did with our header we need to make sure that this is um display as flex and then we need to have it as horizontal which is the default and then we’re free to put a gap in there which we will do in just a minute um okay now let’s take a look again at where did my, oh no, did I close my, no I didn’t, there it is. Okay, I just can’t get it, let me do this, this, okay. So now what I wanna do is I need a wrapper for my stars and then I need a text and a text. And this is again, are we going to make this a heading?
0:22:23
I don’t think semantically that it makes sense for that to be a heading. It just kind of needs to look like a heading and be sized like a heading. So we’re gonna do a wrapper and then text text. And then we’re gonna do this in our body right here. So I’m gonna go ahead and do another div and then I’m gonna do text text. So there are two text elements and another div. So this is effectively where we’re at.
0:22:49
I’m going to go ahead and start adding the other elements as well. So we’re going to add an image in here. We’re going to add text to text. So this is going to be text and text again. And you’re seeing that we are getting some weird stuff going on with the width of this, which we’ll tackle in just a minute. We’re going to put an image in here. Perfect. And let’s just fill this for right now. So we can go to our placeholders, and we’re gonna put logo Ipsum in there.
0:23:22
Perfect, and then we’re gonna come over here, and we’re gonna add one of our avatar placeholders. It’ll be this little dude, we’ll insert him. Perfect, now notice that we have not put a class on our image yet. So I’m gonna go ahead and put a class on there. We don’t want to forget anything. Every single element has to have a class. So this is going to be avatar. Perfect. Um, and I, I’m changing my mind on this. We’re not going to go profile avatar wrapper. We’re just going to do avatar wrapper. There’s no other avatar in here.
0:23:53
So this, we’re just going to keep things short and simple. That’s always a benefit too. All right. So we’ve got profile, wrapper avatar, wrapper, and then avatar. That all makes perfect sense. Okay, on our avatar, what we’re gonna do is make sure that it’s a figure, like while we’re here, we’re trying to cross T’s and dot I’s before we move on to something else. We’re gonna object fit cover it. We’re gonna make sure that it has no caption attached to it by default.
0:24:20
The alt text is gonna be determined by the media gallery. And then we’re going to come over here, and we’re going to give it a width And we can’t use rim units because we don’t know if somebody has their root font size set to 100% or 62.5% So we do everything in M units instead, and I’m going to go ahead and bring this down to 5 M We’re going to take a look at This you can actually see it’s very quite small in our little preview there or our inspiration. Okay now I’m wondering why our avatar wrapper has gone so crazy because it is a div. All right display of flex okay of auto. Perfect, OK, and. Got our image with our avatar wrapper. Now what we need to do is.
0:25:21
The question is, you know we want to add our our avatar radius here so we have a avatar radius variable and typically what we do is we can add that to the image. Sometimes we add it. It’s like do you add it to the wrapper? Do you add it to the image? Actually in this case it is better to add it to the wrapper. So I’m going to add this to the wrapper. So we’re going to go to style. We’re going to go to border. We’re going to go to radius down here. And then this is fr avatar radius. I believe that’s our variable. I’m going to have to look that up in just a minute. And then very important here, we have to set the overflow to hidden or nothing is gonna happen.
0:26:08
All right, so overflow is hidden on that. This is all looking really good. Now we wanna make sure that this is actually loading the thumbnail size of the image. We don’t wanna be loading an image that’s far too big for what we need. And there’s gonna be a situation here where we actually need to make sure that the avatar kind of grows in height as the text grows in height. Let’s go ahead and put some content in. So this is gonna be person’s name. It’s kind of a lot to think about here. This is gonna be person’s title and you can see that these things don’t have classes yet. So this is gonna be profile name and then And then we’re going to say profile title.
0:26:50
Okay, perfect. All right. So let’s take a look at this content wrapper and the avatar. The avatar wrapper is not as tall as it should be. So avatar wrapper, we’re going to do a flex grow on here of one, or actually what we can do is on our profile wrapper, we’re going to set that to stretch. And it’s gonna be this stretch right here. And I’m guessing that that’s stretching our wrapper, but it’s not quite stretching our image.
0:27:26
So what we’re gonna start out with trying is a flex grow of one on here. And you see immediately that our image grows to fill the container. So what I did before, previously, I’m gonna remove that just so I can walk you guys through that, because I know we’re also looking at a very small part of the screen right now. So when I have this profile card wrapper, which is containing the image wrapper and all this text, it was not set to stretch, which means that the wrapper for the image, if I can get like its border, okay? You can’t see it unfortunately because this green thing is in the way. The wrapper for the image is not extending to the bottom of the main wrapper container because the main wrapper container is not set to stretch. So by setting this to stretch, now the wrapper is going to the bottom of the container but the image isn’t going with it because the image is not being told to fill its container. Well if we grab the image itself and we go to flex grow of one we’re telling it to grow to fill the size of the container that it’s in and the headshot goes and it does that. Okay the only thing left to worry about here is the width of the avatar because now it’s going to no longer be a perfect circle if people want it to be a perfect circle.
0:28:50
So what I’m actually going to do is we’ll do a width of we can actually keep the width at 3M. I’m going to go down and go to CSS and we’re going to declare at the root here and now we’re getting lag again. Cause I do have a lot of DOM elements going on now and bricks. The struggle comes when you start working with a bunch of different DOM elements. I’m going to save our work. Especially when you’re flipping back and forth. I’ve noticed that. The more you flip back and forth from one DOM element to the next, the more lag trouble you run into.
0:29:23
And now we’re actually having trouble saving, which this normally does not happen. And I’m wondering if bricks just, we lost bricks somewhere in here. Okay, it finally saved. Let’s go ahead and refresh. Hopefully we didn’t lose anything. Doesn’t look like we did. Okay, so I’m gonna grab that avatar wrapper right there. And we set a, or actually we’re working on the image.
0:29:48
So we set a width on the image. We’re gonna go down here. We’ve declared at the root level. We’re gonna do an aspect ratio of one over one. And we’re gonna see, okay, it’s not behaving So let’s see if it’s something to do with our wrapper here if I take away that width of auto Okay there there we go Probably what I need to do is not set this width and not set this Flex grow one flex for one is necessary not set the aspect ratio of one to one here and then I say width of 3M on the wrapper itself.
0:30:35
Okay, avatar wrapper. I don’t know, I actually don’t know why it’s not abiding by this aspect width of 3M, height of 3M, nope. Okay, well, what we can do is set an explicit width and height so we can do 3M and 3M, it’s gonna give us a square aspect ratio. And actually it’s not. What is actually going on here? 3M and 3M and you’re not looking like a square that makes no sense whatsoever Okay Troubleshoot troubleshoot troubleshoot 3m Well, okay that makes sense because the height is actually controlled by the height of the container hmm, okay Got it. Got it. Got it. Got it. Got it. Okay. So what we need to do here is Take away these Okay That’s good back to our image our image. We’re gonna say is aspect ratio 1 over 1 And take away its flex grow property for just a minute I want to see what we’ve got going on here.
0:32:02
Okay. Let’s go ahead and bring this down now. Now that doesn’t have a flex grow instruction on it. Let’s go ahead and bring it down to the 3m. And now we are keeping a perfect square. Doing this at the image level. Okay, now what I’m going to do, we’re going to undo a lot of stuff that we’ve been doing. So I’m going to go back to this flex container here and I’m going to take off stretch. I actually do not want it to stretch now and we’re going to make sure that no flex grow is set on that. It’s not. What we can actually do now is make sure that we are aligning these items to the center and we’re going to make sure that this does not have any widths on it or anything else nothing. Okay.
0:32:48
Layout width of auto still seems like that’s going to work. Okay. Now what happens if I get a 4M? That’s probably going to be exactly where we want. Okay. Sorry. Had to redo some stuff there. Just got, got ahead of ourselves. Okay. Next thing I’m going to do is on that profile and I’ll just call this profile wrapper. And we’re going to create a gap, so our column gap is just gonna be something very simple like one M. We might be able to use card gap here, so FR card gap.
0:33:28
And just see if that’s too much. It does look like it’s a little bit much. Let’s look at our sample here. No, no, that’s actually, it’s, it’s almost perfect. Okay. What I want to test out is on our avatar wrapper. If we want that to be 50%, let’s say, is it going to look right? We just need to make sure. Yes. Okay. It’s going to look right. So I’m going to set that back to what it was. Unfortunately, it’s not letting me undo all of it. Okay. Avatar wrapper, save. Okay.
0:34:05
Now what we want to do on this header is also align items to the center. That’s going to put this logo in perfect alignment with everything else that’s going on up here. And then I have the profile name. We’re going to go ahead and start styling this up. Really all I want to do here is make the font weight bolder to indicate that, you know, there needs to be some stuff going on there. I actually do want to make this smaller as well. So a little text S action there. And we’re starting to look really good. Now, on our testimonial card altogether, what I wanna do is create the spacing between our header and our everything else that’s going on.
0:34:46
We’re just gonna do that with a gap. So testimonial card India, we’re probably going to use the same gap, which is FR card gap. So this is the spacing that we use in all of our cards effectively. And then inside of our body, we’re going to use that exact same gap, FR card gap. And that’s going to space the rating out from this and from this. So we’re getting nice, even spacing everywhere that we can always tighten up or expand, you know, even later on after these cards are completely designed. This is our rating wrapper, remember.
0:35:19
So this is gonna be FR Testimonial Card India rating wrapper. And then inside of this, what we’re gonna need is some icons. So we’re gonna do a little icon element. And man, I’m not, I need to remember, FR testimonial card India, double underscore, let’s copy that. So this is a rating icon. Perfect.
0:35:45
And we’ve got our rating wrapper and our rating icon. So that all makes perfect sense. What I wanna do is choose font awesome solid. I’m gonna search for star and we’re gonna go ahead and put our star in. And then what I’m gonna do is I’m gonna map this to a text size of like text M and see how that looks. And I feel like that’s pretty decent. I mean, maybe text L. If we really wanted to follow kind of what we’ve got here.
0:36:20
All right, you can see the size comparison there. It’s almost exact. This is a different icon pack. So it’s a little bit softer of a star. Maybe we can actually do One of these other ones we do let’s look at what the star looks like in ion There you go. There’s a much sharper star Okay, I’m pretty good with that. So I’ve got this attached. We’re actually going to set the color here to action Which is just black because this is a wireframe set. Duplicate 345. OK, and then I’m just going to call this a rating wrapper. And then you can see that there’s icons in here and then on the rating wrapper, we’re gonna see how that does to space those items out.
0:37:18
The display needs to be flex on here, otherwise your gap is not gonna work. And that is actually looking pretty good. Okay, let’s bring our example back. So we’ve got our call-out text, and then our main testimonial. So this is gonna be testimonial or I’ll just say main text. How about that? That just keep things nice and short and sweet.
0:37:46
I think everybody knows what that means. Okay, this is a call out quote, something like that. And then over here, we’re gonna use website ipsum. We’re just going to grab that and drop that in. Okay. And we actually need more of it. So let’s use a little bit more content there. Perfect. Okay. So things are starting to really take shape now. One thing that we’re going to want to do with Testimonial Card India all together is add padding because we want to probably to give this, you know, wireframe a little bit more structure, if we look at this, we’re gonna wanna give it a very light background color. So I’m gonna do that in the background section.
0:38:33
We’re just gonna use our frames placeholder color, which is BG light. And notice now that everything is touching the edges of this card, that’s no good. So we’re gonna go up to layout, and we’re gonna use FR card padding, which is the padding that we use on all of our cards, which is also globally controllable from the dashboard. And then we’re going to hit save and I’m going to go ahead and refresh after this saves. Next thing I’m going to do is on this card India, I’m going to go ahead and add a border radius.
0:39:02
We’re going to do FR card radius. And then we’re going to make sure that that’s on all sides. You see that gets our whatever our card radius is set to in the back end. It’s going to set it to that. This I just realized does not have a class on it. So fr testimonial card India double underscore logo. So we have a logo wrapper. Then we have a logo. And what I’m going to do is make that logo a specific width. Let’s try 12 M. It’s a bit big. Let’s do eight M. That’s probably more reasonable. So I’m gonna go ahead and hit save there. And then if they don’t want this, guys, like when you add it in, this is gonna be the logo wrapper.
0:39:48
Literally, you can just test this out. Can we delete the logo wrapper? And does the card break? And the answer is no, the card doesn’t break. So you can see in like a split second, somebody can determine, Oh, we don’t want logos for these cards. Just get rid of it and you move on with your life much, much, much faster than adding it back in if it wasn’t there. Right. So all good. So we’re going to go ahead and hit save. We’ve got everything labeled properly up. We don’t right here.
0:40:14
So this is going to be our call out texts and this is where you’re going to see most of the lag guys is when you’re in either the right panel or the left panel. Consequently, you see none here. This is the call-out quote, right? You see no lag when you’re in the canvas. You only see the lag in these panels. That’s how we pretty much know that this is a Bricks related thing. Okay, so call-out text, this is gonna be our main text right here.
0:40:46
I try to name everything in the structure panel exactly as it’s named at the class level. Okay, so if somebody’s like a main text what is that? Well they can go over here and see oh there’s the main text right there. All right, so let’s see let’s just take a step back for a minute and see how we’re looking. Our callout needs to be styled. So remember I said we need to kind of style this as a heading 3, but it’s not really semantically a heading 3. Semantically it needs to be a paragraph, and semantically this needs to be a paragraph, and semantically this needs to be a paragraph, and then this needs to be a paragraph. Okay, so all of that is good. This semantically is a figure. This semantically needs to be a figure. We almost missed that. Let’s grab the class here. We’re not going to set this to cover. We don’t need that to happen. We do need no caption by default. And we’ll go ahead and hit save on all of that work. Now I feel comfortable collapsing this down, going through and going to our main and duplicating this card.
0:42:01
We’re gonna need to do this for a couple different reasons. Number one, we need to see, oh, there’s no space between them. Okay, so what I’m gonna do is go to the main, grab my class, and we’re gonna row gap this out, and we’re gonna use grid gap. Okay, because this is a, it’s not really a grid because it’s one column, but it could be a grid. And if we do wanna turn it into a two column grid at any point in time, it’s already going to have grid gap attached to it.
0:42:30
So that’s all nice and handy. And it doesn’t really matter. You know, it’s effectively the same kind of spacing you would use in a grid. So I’m going to use grid gap. Notice that I’m not adding like top margins to things or any of that. I’m using gap as much as I possibly can. Okay, so that was one reason I wanted to add that, but the second reason I wanted to duplicate those cards is because I need to be able to have room to scroll to test out our sticky. All right, so we’re going to come over here and we have CTA card alpha. So now what we need to do is actually build this element called CTA down below. Now the question is do I need any wrappers inside of this component?
0:43:22
And the answer right now is yes, really only one though. Okay, maybe, maybe two, maybe two. I’m going to go with two. So we’re going to have a content wrapper, and we’re gonna have a CTA wrapper, okay? And I’ll show you why in just a second. Okay, so I’m gonna come in here with a block and a block. So this is gonna be my content wrapper. So this is gonna be FR CTA card alpha, and then I’m gonna copy that for the purposes of just moving quicker. So this is our, we’ll call this content wrapper.
0:44:03
And then down here, we’ll call this CTA wrapper. And I’m not gonna call it a CTA wrapper because it’s a CTA card. We’ll call this action wrapper. All right, this is gonna be the content wrapper. I’m just labeling these things now. This will be the action wrapper, okay? So this is gonna be the content and this is gonna be the buttons. So why don’t we just come down here and add the button, but also add the link while we’re at it, which is just the text element, okay?
0:44:35
And this is gonna say, we’re gonna open that up. This is gonna say button, this is gonna say CTA link, just like that. This text is gonna say call to action. And for the action wrapper, let’s think about all this stuff here, okay? The action wrapper, we’re going to align everything to the center, and then on our typography, we’re gonna center all text as well. And then up here, we’re gonna add, let’s look at our example again.
0:45:06
We are gonna add an H3. This is gonna be an H3, and this is gonna be a paragraph, okay? So we’re gonna add a heading and we’re gonna add a text element just like that and then in our content wrapper so I’m gonna select my content wrapper there I’m gonna go ahead and center that text and I’m going to center all of the content inside of there as well. Okay so now what I’m gonna do is I’m going to give this CTA card alpha a background color. So we’re gonna come in backgrounds and we are going to go to frames, BG light as our placeholder.
0:45:49
Obviously we need to go to layout and add our FR card padding now. So this has some nice padding that’s the same as all of our other cards. All right, perfect. So now what we wanna do is space out our content. And now you’re going to see why I chose to add these two wrappers inside of this card. Okay? Oh, and there’s one more semantic thing. In fact, just because I remembered it, we have to jump over and do it now.
0:46:15
And it was a mistake that I made. Before I can duplicate these items, I’ve got to make sure that this structure is semantically accurate. So this, um, so we have the main and we have the sidebar. This main semantically is going to be the unordered list wrapper for our list items, which are our testimonial cards. So I’m going to change this to UL and then because it adds styling in there, I can either use the list none class or what I’ve been doing lately is just going and adding the style at the root level.
0:46:51
We’re going to say the list style is none and the padding left is zero and that should clear that styling up right there. Perfect. Maybe just do padding zero altogether. Perfect. And we’re going to need a margin of zero because it likes to add some margin in there too. Just default list styling is really annoying. Again, the list none class, if I, let’s just take this off and say list none, it’s gonna do exactly the same thing. What I just did manually, the list none class just does automatically.
0:47:30
Okay, so now let’s go back and actually now what we need to do is testimonial card India, which is a list item in that list, needs to have an LI tag. So custom tag of LI. Now the structure is proper. Now I can go ahead and duplicate, duplicate, duplicate many different times. And that’s gonna give us our nice long list of testimonials.
0:47:53
Okay. Now what I’m gonna do is come over here to our CTA card alpha, and our row gap is gonna be set to fr card gap. And that’s gonna space out this content from our action content. And then what I wanna do is put the exact same gap in here, our content wrapper, fr card gap. And instead of typing and expanding it every time, I’m just gonna copy it.
0:48:19
And then I’m gonna go to my action wrapper, and I’m gonna come down here to row gap and add the exact same gap. And now we have very even spacing on all of our content, but you’re probably asking yourself, Kevin, you could have just done that without giving those things wrappers. Correct. However, let’s go and explore. Notice they have everything evenly spaced with much larger gaps, but there are people who may want a very small gap between this button and the link while these large gaps are retained? Well, guess what? You can’t do that unless those two items are grouped together in their own wrapper, right? You could want a different gap here than here, and you can’t do that unless these two items are grouped. And then you see down here, you may want to have a lot of padding toward the bottom of that card while these items stay up here. You may eventually maybe want to have a lot in the middle and then group these to the bottom.
0:49:18
There’s a lot of different things that could be done. Having these extra wrappers adds more flexibility in how you’re able to create uneven spacing in this card should somebody want it. And there are many, many times where somebody would want uneven spacing. In fact, let me show you. Let’s say I have even spacing here and even spacing here, but I want a bigger gap between them. The fact that those two things are grouped together means that I can come down here and say space XL, and now watch what happens when this snaps into action here.
0:49:53
Now I have much larger spacing between those two groups, and that’s not possible if those things weren’t grouped together, okay? I’m gonna reset this back to fr card gap and hit enter and go from there. Okay now what I’m thinking is hmm what else do okay now we need to stickify this thing. Now I can’t make it sticky because the sidebar is highlighted right now and you see the green border that’s my sidebar that’s not my card. In order for this card to be sticky, it has to have a sidebar channel that it can move up and down in, which means we need to go to our parent grid, our main container, and we need to set this to stretch.
0:50:40
And actually align cross-axis. Okay, let’s go down here. What do we have? Yes, it is a grid, okay? Yeah, this should be working. All right. Oh, there’s another bug in Bricks. I can’t actually put the cursor where I want. I’m gonna go ahead and hit save. That happens sometimes.
0:50:57
I haven’t figured out what the trigger for that is. But I’m gonna grab my parent wrapper, my grid, and go to CSS. Now I can put it where I want. Align items to stretch. And now my sidebar, if I highlight it, man, Bricks is getting really, it’s really causing issues right now. Now you see I have a full channel in order for that sticky element to move up and down in. Okay.
0:51:29
So I’m going to go ahead and grab my sticky element now, and we’re just going to put a class on there of sticky, and that should pretty much take care of all of the stickiness for us. So I’m going to go preview this on the front end and look at what we’ve got. Okay now I want to show you how this would interact on a larger page. Okay so what I’m going to do is add a section and we’re going to give that a bg of base just like dark, dark, dark sections and then I’m just going to duplicate that a few times. I’m going to drag one of them to be above. Come on bricks. There you go. Then I’m going to duplicate that a few times. Perfect. Then we’re going to go ahead and save. We’ll take a look at this on the front end.
0:52:16
What is it doing to me? Save, refresh, they’re there. Okay, well, they should be showing up on the front end. Oh, there they are. Okay. It was just refreshing right in that exact section. So now, pretend there’s content up here. So I’m scrolling down, scrolling down, then I get to this area where it’s showing me testimonials. Then look, it looks like this section locks into place as I go through the testimonials, and then when I’m done, I get to continue on down the rest of the page.
0:52:57
It’s just kind of a cool visual effect. It’s fairly dynamic, and it’s all driven by that sticky element. And what’s fantastic about this sidebar thing and having this be sticky is the fact that you get to use this as a call out like, hey, we’re reading all these great testimonials, do you wanna work with us? Do you wanna hire us? Do you wanna buy this product or whatever this section is being used for?
0:53:22
The call to action just sits there and follows the person as they are reading the testimonials, which I think is absolutely fantastic. We got a couple more things to clean up, but I just wanted to show you that kind of how it would be used. All right, so we’re gonna delete all of these. Perfect. Alright now I did see this callout quote. We’re going to want to make that bold so we’re going to choose a font weight of 700. Perfect. We’re just going to leave that for right now. That’s perfectly fine. I want to make sure it’s a paragraph tag. It is. Over here we want to give this a, because this does need to be a link.
0:54:05
So we’re actually going to just do link to external URL and then a pound sign. It’s kind of how we do all of this in frames. We just make sure that there is an active link. This allows people to test like keyboard navigation and things like that. We do want to put a button primary on here. And then we never added our classes for, because I’m doing a lot of talking for our CTA card alpha. So this is going to be frctacard alpha double underscore text and I want to copy this double underscore.
0:54:37
Okay put it in here and then this is going to be for the heading. Perfect. We need to make sure that that is an h3. It is now with this button I want to put an extra class on here, a button. We’re not going to use it, but it’s just there. And then this is going to be the CTA link. Okay. Yep. Just like that. Perfect. Okay. I’m liking where this is going. Um, I don’t think I put my card radius on here yet. So I’m going to go to border, border, F R card radius pop that in expand it save okay now what we can do we’re pretty much free to go ahead and review now the good thing about this is you know the way that it’s structured it’s all it’s a UL it’s the LIs this is very easy for somebody to turn into a query loop and they don’t need to have all these cards here manually.
0:55:40
The query loop will actually build this out from dynamic data on the back end. They would just need to create the custom fields for these different info areas and put that in dynamically. They’re ready to rock and roll with a fully dynamic testimonial section. Okay. I’m thinking, I’m thinking that we’re ready to review now. I do know I missed one thing, which is our responsiveness on our grid. So I’m just going to grab the CSS that was our grid, and I’m going to come to this breakpoint and say, probably at that breakpoint, definitely at that breakpoint.
0:56:23
Let’s try here first. I’m just going to go grid template columns of 1FR. 1FR. Thank you. If I can type today. We’re going to go ahead and save, and this is exactly what’s going to happen. Then our CTA is just chilling down there at the bottom. Because it’s a block, it’s just going to automatically expand to take up the entire space. Over here, it stays as a sticky sidebar type situation. At this one it’s there.
0:56:54
I’m just not sure, because these break points aren’t super accurate. We’re gonna actually take a look at how this, how this behaves on the front end. So I’m gonna open this up, we’ll bring this down. Start bringing our screen in, and just see if we get a little too squishy. Man, it’s, it’s close, right? Some people are going to be like, that’s too squishy. Some people are going to be like, no, that’s okay.
0:57:25
So this is a situation where we just got to let people decide. At least there’s no breakage of what we’ve got going on. See this logo is getting kind of close. It gets kind of close. Now, one thing you can do here, because I used space between, but I did not add any protection. It is possible that those things could touch at some point in time. Maybe on like the tiniest of mobile screens, you could run into issues, right?
0:57:54
You can put a buffer in. And so you can say the column gap here is FR card gap. And this is gonna act as a buffer, even though you’re not going to see it it does act as a physical buffer if they ever got too close together FR card gap would keep them apart and then at this very last breakpoint you could actually say you know what we’re going to allow this to wrap over here okay it’s no wrap everywhere else because we don’t really need it to wrap but it could we could allow it to wrap here if they ever do collide on like a smaller screen. Okay, so I’m just thinking through some different scenarios here.
0:58:32
These all have icons, so those colors can all be changed with one class. All right, we’re looking pretty good here. Let’s go ahead and inspect our structure. Bring this up and inspect. Thank you. Oh, I don’t know what’s going on. There we go. Okay, it was refreshing. So let’s go ahead and inspect. All right, so we have our main grid right here, which is a div, Testimonial Grid India. We’re gonna open that up and see our unordered list inside. We’re gonna open that up and see a very clean set of list items. They all have the same class on them. Come in here, we’ve got our header and our body. Inside of our header we’ve got our profile wrapper. Okay, we should see some figure tags in here. This is all good. This is our content wrapper. That’s all good. I don’t ever think that that needs to stack. It’s always gonna be perfectly fine. There are situations where, you know, if a person’s name gets really long, this person’s name is really long.
0:59:42
Okay. What happens here? Okay. There’s where it forced it to wrap. Oh, and you see when we wrap, oh my gosh, we actually have a problem, don’t we? So this is why it’s important for us as frames developers to, I feel like there’s almost going to be a training, right? Like for the frames team. It’s important for us to test out different things. What happens if somebody puts in a tall photo instead of a wide photo?
1:00:14
What happens if the person’s name is really long? Like it is important for us to think about these things. And I see a problem here is that there’s no gap and it also doesn’t really make sense for this logo to kind of be stuffed between the person and their rating, right? It would probably be cleaner if that logo was at the top. Okay, so right here, there’s really no problem. Right here, there’s no problem. This breakpoint, there’s a problem.
1:00:38
All right, so what we’re gonna do now, just because you can, I can go all the way back to desktop and I can set a row gap here. And that’s gonna fix this breakpoint too, because that change cascades all the way down. Now what I want to have happen is that this specific breakpoint I actually want my logo wrapper because I can’t just do my logo it’s got to be this whole unit right which is a wrapper and a logo I want that to be an order of minus one and watch what’s going to happen here it’s going to flip the logo to being above the person’s info and then above their rating and that is going to look very very clean my friends. Okay what I might want to do because now look what’s going on down here when the person’s name isn’t really long it’s causing more problems isn’t it? So what I what I actually want to have happen here is Is this entire profile wrapper should be a hundred percent width We’re just gonna force this to happen in every single card Now look at what’s going on with these other cards We’re forcing it to happen on every single card for maximum consistency So this is literally just what’s going to happen to this card structure When it goes from this breakpoint to the final breakpoint.
1:02:03
I think that’s going to be the cleanest way to handle that. Okay. So I’m going to switch this back to person’s name. And I do notice that that gap is changing because of our, it’s because of the fact that we’re using Flexbox. And as content in one column gets bigger, I’m going to duplicate this again. That gap and the photo are getting larger. We don’t want that to happen. So I’m going to go back into my structure here of avatar wrapper with this auto. I’m going to take that off. And what I want, because this is effectively a I can set it’s, what did we put on here? Avatar with the 4M.
1:02:53
If I put 4M as the flex basis on this, it fixes everything. And now the person’s name, I think it fixes everything. No, this one is still… Okay, let me just think for a second. All right, I figured it out, wanted to come back and show you. Basically all I needed to do was on this container, which is the profile wrapper container, I just set that to 100% width so that basically all of them always stretch all the way across to the logo. Okay?
1:03:40
And you still see that they’re gapped between that container and the logo container. And then what I did is I came in on my avatar wrapper, and that’s where I reset my flex basis to be 4M. So if I take off that 4M, that wrapper tries to be equal width to this container, which is housing the text, but by setting the basis of that container to 4M, it’s going to shrink back down to be 4M, and then the image is just gonna conform to the size of its wrapper, okay?
1:04:13
So I’m gonna go ahead and hit save, and then if we view this on the front end, you see if we actually measure this. So it’s a 63 pixel image when this name is really long, and then if we check this one, which is short, it’s also 63. So they exactly match now. There’s no issue where a longer name creates a bigger gap and a bigger image, like what was happening before.
1:04:35
See, Flexbox can be very tricky in those kinds of situations, right? So it’s important to understand how Flexbasis works and just kind of how to finagle the Flex items and the Flex wrapper to make it behave exactly the way you want it to behave. So now we take a look at what’s going on. So we’re checking our, let’s go down here now, checking our mobile. And look, it’s never, see, it was going to impact that name right there, but it never does because our gap protection is in there, doing its job.
1:05:11
And then when we finally stack, we see, oh, and now we’re back to our logo. That’s interesting. Now we’re back to our logo not being first. Did something change? Let me just close that preview window and open a brand new one. No. Oh, there it is. Okay. Okay. Okay.
1:05:29
I see what’s going on. Got it. Got it. Got it. Got it. So we’re actually just doing this at the wrong breakpoint. So I’m going to remove that there and I’m going to go to this breakpoint and this is the breakpoint where we are going to put order minus one on the wrapper. Now we hit save and now we go here.
1:05:55
Refresh, refresh, refresh, come on. Wow, if I do this, it like happens instantly. I don’t know what’s going on with that refresh. Now it’s exactly the way that we want it to be, okay? All right, I’ve pretty much, the only thing here is when it gets really long, look what happens to our image. It no longer, you know, I mean, I don’t think anybody’s name is ever really gonna be that long but I also don’t know if there’s anything we can do about it.
1:06:32
We can, I mean there’s always something we can do about it. All right I’m thinking look how much the preview differs. Look at this mobile preview versus what we’re looking at here. I mean, it’s, it’s, I can’t even get to this view. Here’s the stack come down and see, this is like that. It still looks like this and now look at it in bricks. Okay. I guess that’s a little bit better there. I really can’t view that in, in bricks, but let’s get to here and let’s just see if at this last break point, if we can add this to stretch, well, see, this is gonna break, yeah.
1:07:16
We probably don’t wanna do this to people. Because if they have this as a circle, like 50% border radius, this is gonna cause a whole, it’s gonna make like an oval. That’s gonna look absolutely awful. Let’s just leave it alone. Let’s leave it alone. It’s good enough the way that it is. If people wanna make individualized perfection adjustments, they’re absolutely free to do that But all in all I mean look at how long we’ve been recording an hour and 15 minutes and a lot of that was banter I don’t know 15 minutes of banter an hour. So this is an hour to build this entire frame Which is actually multiple components Guys, that’s an hour of work saved for you. If you add this one individual frame, like this section to your site, that’s an hour saved.
1:08:08
That’s, how much do you bill? Like, oh, 125 bucks, 150 bucks an hour, 175 bucks an hour? That’s how much money you just saved. And that’s if you could have built this in an hour, the way that I did. You know, and get the list structure done properly, right? Get all the BIM in there. I know you could build this faster if you just race through, style everything in the ID level, or use utility classes, yada, yada, yada.
1:08:32
I get it. But if you were doing BIM, and you had the proper list structure, like everything the way that I did it, and accounting for all the extra stuff that I accounted for, would you have been able to do it in an hour? Or would it have been an hour and a half? Or would it have been two hours? Would it have been five hours if you’re a beginner, right? It’s just being able to add this frame saves a tremendous amount of time.
1:08:55
So I’m gonna go ahead and save this up. And now guys, the thing is, I can’t publish this. There’s a lot of, I just did a lot of stuff. And your brain when you’re developing, it’s like editing your own copy or editing your own blog article. If you leave it for a few days and come back, probably a good idea, right? I happen to have a team, and then our rule with frames is you can’t approve or publish your own frame. So what I have to do is in Basecamp, in fact, why don’t I just bring this up. So I, this would have been moved along the in progress, I should have done that, okay, because we have our development board right here, right? So the frame that I was working on, testimonial section India and CTA card alpha.
1:09:42
So I can now move this along to ready to review. And I can assign it to somebody and say, hey, Andrea, this is ready to review. And then I can come down and hit save changes. And I wanna make his life super easy. So I actually grab the direct link to the builder in Bricks and I go over back to Basecamp and I drop this as a comment down below so he can just click on this it opens it right up for him he doesn’t have to go search for it or find it or anything like that and he can actually review everything that I’ve just done. I’m gonna give it one more look over and we’re just gonna start from the top by closing all of this so testimonial section India, FR testimonial section India that’s all good. I’m gonna open I’m going to check intro alpha, which by the way, was its own frame.
1:10:30
And we see here there was intro alpha is very old, right? So it still uses this utility class of FR content gap. So I’m, you know what I’m going to do what I’m supposed to do in these situations, which is I am going to do the extra work of going and finding intro alpha, and I’m going to open it and I’m going to edit it and we’re going to fix it so that this doesn’t continue to happen. So I’m going to get rid of content gap here and in intro alpha. Oh look it already had it. So it just had a utility class on there for no reason. I’m going to hit save now that utility class does not exist and I can close that and then what I can do is here I can get rid of that fr content gap and good fixed nice. So I don’t really have to inspect intro alpha because it’s already been inspected a gazillion times I’m gonna move on and look at testimonial grid India. I’m gonna see that we’re using grid gap properly I’m gonna come down and I’m gonna see what my grid structure looks like I’m immediately gonna see if this grid is responsive it is Okay. Now I’m gonna open the grid up and we’re gonna look at main and sidebar First thing I’m gonna see is do we have our proper classes.
1:11:39
Testimonial Grid India Main, Testimonial Grid India Sidebar. All of that looks good. Now I’m going to open Main. I see that we have some cards in here. Okay. Testimonial Card India. I’m going to see that it’s an LI. I need to go check. Is Main a UL? It is. Okay. Now I’m going to open Testimonial Card India. I’m gonna see that we have a header and it has a header class. Body has a body class. I’m gonna open the header. I’m gonna look at my profile wrapper and I’m gonna look at my logo wrapper.
1:12:12
Both of those have classes. I’m gonna open that up. I see that we have avatar and content wrapper. Do those classes exist properly? They do. I’m gonna open avatar and see my image. It has a class. It’s a figure set to no caption set to cover I’m gonna look and I’m gonna see okay. It is aspect ratioed I’m gonna go to my wrapper, and I’m gonna see what we’ve got going on there So I see there’s no overflow, and I see this is where we’re setting the radius all of that is good I’m gonna open my content wrapper. Oh look what I found Uh-oh, I found text. That’s not labeled in the structure panel.
1:12:53
So this needs to be person’s name. This needs to be profile title. We’ll just call this profile name because that’s what the class is. So profile name, profile title. And you know what this means? I’ve got to delete all of these cards because they all have the same structure panel problem in them. And then I’m going to continue reviewing this. So I’ve got my logo wrapper. That’s all good. And then I’ve got my image and that’s all good because it’s the logo. We’ll just go ahead and put logo on here just to limit any sort of confusion because my brain was just confused right there for just, I was like image, logo, what’s going on? Okay. So Let’s open the body Okay, we see our rating wrapper class good our icons are in there They all have classes. That’s fantastic Then we have our call-out text. We have our main text then we’re gonna go check our sidebar We have our CTA card alpha, which is sticky. I see a content wrapper. I see an action wrapper All of that looks good.
1:14:03
Yeah, okay, I was thinking about something else. Heading, oh, look again, basic text. No, no, no, no, no, that’s just text. Okay, action wrapper has a button and a CTA link in it. I see action wrapper, I see alpha button, I see alpha CTA link, all of that looks fine and dandy. Okay, now I’m gonna close all of this up and then I’m gonna go back to my testimonial grid, my main, and then I’m now free to duplicate my cards again. One, two, three, four, five, six, seven.
1:14:43
We don’t really want seven. Let’s go ahead and hit save at six. And let’s go ahead and check again on the front end. We’ve done a nice little quick review. Let me just close that out. Reopen it from here. Nice. Everything is looking sharp. So I feel like this is ready for our team to review. I’ve assigned it to Andrea.
1:15:07
Hopefully you guys got a lot out of this tutorial. If you have any questions, drop them down below. Happy to jump in and help. Peace.
