Component properties, variants, and slots

Components are reusable building blocks that help your team build on brand, but they often need to be flexible, too. We’ll start with a component for a process section. That component will hold other card components through a component slot. The card component will have dark and horizontal variants to offer team members design choices. The cards and larger component will use properties to make the content customizable. So let’s get started with those properties.

Here’s another copy of that section, except there are no components yet. We’ll start with a card. Right click and choose Create component. There are four recommended properties. The image, so we can change it on an instance, and the text for step number, title, and description so we can customize those. Rename them and click Create.

But let’s add another property ourselves. Click the image and we see we already have that image property. We can replace the image on each instance. But let’s make it entirely optional. Click the purple dot next to Visibility and then New Switch property. We’ll set the default to visible and then click Create. Let’s step back out of component editing mode so we can test it. And there it is. We can show or hide the image. We also have all the other properties we set that let us customize content.

Ok, onto Variants to create some style options. Notice below we can drill in one more level and open the component canvas. Click plus variant, below, to add a new variant. And then name it. Now in the Style panel, we’ll set a new background color and text colors. These changes only affect this variant while keeping the other base variant styles. While we’re here, we can add a horizontal variant and adjust the layout so the image and text sit side by side. And to better picture it in a layout, we can drag the green frame border. That’s a visualization, not a style change. Ok, back out again. And again. And there it is. We can switch the card between the base and its two variants.

Alright, lastly, a slot. Our cards need a place to go. Right click the entire section and Create component. Notice there are a lot of suggested props. That’s because we have a lot of raw elements and only one card component, for now. Deselect them all and only add and name props for the section title and subtitle since the team may want to update those. Now open the Navigator panel and inspect the current layout. We have a styled div block holding all our cards. It uses a class called steps-cards, remember that. From the Add panel, we’ll add a Slot. Then we’ll move it into the right place in our hierarchy. It needs to be at the same level as the card holder, not a card within it. And it can be styled like other elements. So we’ll apply that steps-cards class. And we could even choose which specific components are allowed in the slot. In our case, card-step. You, the designer, will still be able to add and test other components and even single elements in the slot. But this new slot is essentially replacing the whole block below, so we can do something scary and just delete our three cards, and the div that held them.

Before we test, there’s one more setup step. Step out of component editing mode and, from the Add panel, add a Page slot. Then move it to the right place in our page hierarchy. And move our section component into it. This lets marketers add cards to the component slot inside our section.

Now, time to test. From the global menu, we’re going to preview all of this from the Marketer role, our main user. Click on the section component and update the title text to test a property. Open the Components panel and drag a step card into the slot. That worked, and now that we’re here, we can confirm this is the only component allowed. Copy and paste more step cards into the slot. Edit the content and images on each card to make the steps unique. Then try switching between variants.

And that’s it. We made our components flexible with component properties, variants, and slots.