Creating a Generic Heading Component Using Styled System Variants

In this lesson we’ll create a generic heading primitive component, that we could use to render headings of different levels in our app. We’ll use Styled System to create this component.

We’re going to use Styled System variants to define styles for each heading level. The number of levels depends on your app’s complexity, and it’s something you’ll need to discuss with your designer. In this lesson we’ll create three levels of headings. We'll make it possible to change the HTML element (h1, h2, h3) independently from the visual heading level.

We’ll use following libraries:

• styled-components
• Styled System

You can either use this lesson’s Git repository or install them manually in your project:

npm install styled-components styled-system

Useful links and documentation:

• Styled System docs
• Styled System variants docs