Custom variables collection
In this lesson, you’ll learn about the custom variables collection used within our Pro Blocks and how to adjust it to your needs. We’ll walk through changing section padding and heading styles.
Instructions
- Start with the landing page you created in the previous lesson.
- Notice that the section padding is set to spacing/24, and the heading uses font-sans and bold.
- Open the Variables panel.
- Hide the UI and organize the view to see things more clearly.
- Navigate to the 4. custom group.
- Find the section-padding-y variable and change its value from spacing/24 to spacing/32. You’ll see the padding update live on the right.
- Go to the heading settings.
- Change the font family from font-sans to font-serif for each heading size.
- Update the font weight from bold to medium.
- Review the result: the padding changed from spacing/24 to spacing/32, and the heading now uses a serif font with a lighter weight.
Up next
Section Title component
In this lesson, you’ll learn how to use and customize the Section Title component in Pro Blocks to match your layout and style needs better.