Today we're going to be going over how to add a card component to your high level landing page. To tell whether or not your department uses a high level landing page for the homepage, what you need to do is go to the index page for your department's folder. And then once you are there, if you scroll down, you can tell based off the design. You will notice that this homepage does not have a left rail with navigation off to the left side and it has a child grid. By confirming these things, you will be able to tell that you are in fact using a high level landing page. The card component is going to go below the child grid component and will be about where I'm currently moving my cursor. So with that, let's get started. You're going to want to begin by editing your page. Once you have done this, you are going to want to make sure that the include components check box is selected. Once you have done this, you will scroll down to the component section for the page edit window. Here you will see that there is already a WYSIWYG component selected. What I'm going to do here is select add a new group. Here in the new component where it is empty, we are going to expand that and then click on the select box and then go down to generic cards. Generic cards is the name of the card component. So once you have selected this, you will see another little card section appear below. The things that you're able to toggle here are the headline, which is going to be the main headline for the card section. And so let's just give this a generic title. Let's just say card component. Whoops. Card component headline. Next, if you want an image for your card, you are going to go here and just select an image like you would um select any other image on the site. So, if you have an image in your site's images folder already, you can just go here. And for the sake of this, I'm just going to select a random image, but you can use whatever you want. I'm just going to use this generic photo of Barge Hall. Going to select that. If the image conveys meaning, you are going to want to leave this toggled on no and then provide an image description. The image description is very important for accessibility. For users who use things like screen readers who aren't relying on their vision for whatever reason to convey the context on the page, it is going to read the image description that you provide. So make sure that what you're providing is accurate. If your image is decorative and it does not convey any meaning, you can simply change this to yes and then that image description field will go away. I'm going to leave it on yes because in this case it is a decorative image. For the card title, this is going to be the title displayed for the specific card that you are selecting. So here I'm just going to put card one. And then for the content section, this is where you are going to put the body of the content for your card. So, whatever you want it to primarily say. In this instance, I'm just going to put some placeholder text.

And then I'm going to make this take up some more space. And then for options, if you want these cards to link out to anything, you're going to want to select include link. And then when you're doing this, it's just like creating a link anywhere else on the site. So for demo purposes, I'm going to make this an internal link. And then I will just link to another site. So this is just a random page. It has no actual meaning uh outside the sake of demo purposes. So now that I have done all of this, I can go ahead and preview my draft.

And then if you scroll down, you will see we now have a card component. Ignore this table above. That's from some separate testing that we were doing. But this is what the card component is going to look like. So you will see here the card is being stretched out across the entire width of the page. That is something you're going to want to keep in mind. the cards do expand to take up that entire width. However, what we can do is we can go in and we can actually create up to three cards within the card component. Currently, the card component does not support more than three cards. So, what I'm going to do just to show you what that looks like, um, I'm going to copy these cards except I will name this one card two and this one card three. And we will preview our draft again.

And this will give you an idea of what the card component looks like when you have three cards selected for your high level landing page card component. With these learn more buttons, if you click these, it will take you to whatever you are linking out to from your card. And once you've decided everything looks good, all you need to do is go ahead and submit your changes. And there you have it. That is how you create a card component on your high level landing page. If you have any questions, don't hesitate to reach out to Web Services and we will try to help you as best as possible. Thanks.