In this lesson, we're going to be making some custom design changes to our Key Features section.

We'll choose a different icon set, perhaps change the color to our brand color, we'll update the text, and we'll add some link elements so a person can learn more about these various features.

Let's first start with these icons. I open the property editor, head over to the Appearance tab, let's see what we have here. So it says Icon Fa tasks. Now, if I click on this, I see that Bubble is offering me some different icon libraries. Let's try Material, which is a library created by Google and here are all the icons that are available to me. I can pick anyone I like that potentially could be a project management icon.

Let's have a look at some other options. We have, for instance, Phosphor icons, which I really love. I click Phosphor. Here are all of my options, I can scroll down and pick whatever I'd like.

Now, Bubble also exposes the style of the icon so at the moment we have regular. We could add fill and then have a fill icon.

Right, let me just use the undo button to go back to Font Awesome because I want to make these icons reflect my brand a bit closer. So to save myself some time, I'm going to hold down shift and select all of these icons together. Then I can simply go ahead and change the color.

What else can I do? Well, I can go to the Layout tab, I can make these a bit smaller. I think these will look far better at around 32 pixels. There we go. While I'm here, I can see that we have some bottom margin of 16 pixels that was removed from this icon. So I'm going to click back on this icon and in the Layout tab of the icon, I'm going to choose 16 pixels.

Now, I want to change the text to be less bold, specifically the title text so I'm going to use a similar method. I'm going to hold down shift, highlight all of these text elements, and I'm going to go to the Appearance tab and I'm going to bulk edit. So currently we have a Heading 3 (Overridden), which means it will inherit whatever I set down here and I've just changed the weight to 500. But we learned previously that actually, if they are attached to a style, it's actually better to edit the style directly. So let's do this.

I'm going to have a look at what other styles are available to me, maybe a Heading 4 or perhaps even a Heading 5. I can see that's a bit larger. Let's adapt a Heading 5.

Head over to Edit style. So it was 20 pixels. I think we chose medium and black. Let's go back. Okay, great. Heading 5 looks good. I'm going to hold down shift and just make sure all of these are set to a Heading 5.

Now, we can change the style from the single source of truth in the Styles tab.

Okay, the subtitle text is fantastic and we have a shadow. I'm wondering what these cards look like with less shadow. So I'm going to do this: currently, we have a style here, I'm going to detach the style, I'm going to create a new style. I'm going to call this Card as it's a card element. Then I'm going to go ahead and edit the style of the card. Scrolling down, I can see the shadow style. Now, what I'm going to go for is something a bit softer so I can see I have 10% of black. I'm going to try 7%. I'm also going to increase the blur radius—this is just personal preference—to 16 and I'm going to play with some of these as well. Maybe try 4 on the spread, maybe bring this down to say 4%. What I might do is give it a very light border color as well from one of my gray styles.

Let's have a look! So we are comparing this card with this card, and yes, I prefer the new style I just set. It appears to be floating slightly more, maybe it's a bit softer in the shadow as well. So now that we have our style, I'm going to highlight all of these and then choose Card. And there we go, we've just bulk adapted and attached a new Card style element for our Key Features.

What about a link element down here to take us to a new page? Let's pretend that we had a page called Project Management, Task Tracking, Due Dates, etc. Very good for SEO. If I head over to the visual element section, there is a link element. I can pick up the link element and drop it inside. Let's simply say Learn more and this is where Bubble asks us, "well where is the destination?" and we would simply just set the destination. The destination could be an internal page or it could be an external URL. It's just going to be an internal page for us and here we can look for where our internal page is. We can just pretend that it is a page called components and there we go. We have further options down here as well.

Now, it's a little bit bold for me so I'm going to edit the Link Light Primary style. I'm going to say that this is going to be 400, quite light, and significantly smaller at 14 pixels. Let's head back and that's looking good, but I want it centered. So what I'm going to do is go to the Layout tab and I'm going to remove fit width to content because the link element and the text within the element are actually two different parts. The link element is what I have highlighted and that element will grow if I type some more text. So we could say Learn more about project management but I just wanted to distinguish the difference between the element and the text within.

Let's head over to the Layout tab and I'm going to remove fit width to content because I want it to span edge-to-edge and that will put it in the center. Now, it's almost touching this element here so I'm just going to add some bottom margin of about 8 pixels, maybe even a bit more 16 pixels just to push it down a little bit more. Fantastic!

Now, if I wanted to add Learn more to some more cards, I'll simply copy and paste it into these other cards and then increase the margin with that text. But don't forget, another thing I do is just to make sure that in the Appearance tab that I have the relevant destination page selected for the link element.