Each element on a card view has a set of style properties that it inherits from its class. Even if you don’t specify a class, the element has a default class specification. For each variant there are a set of style properties you can modify. The inspector is where those overrides are done.
In this lesson we will go through overriding some basic styles in the styles override experience.
Starting Out
Start by creating a new app in Airkit Studio and adding a second label to the initial card view. When done you screen should look something like this:
Setting The Class
Select the label and let's change the class. In the inspector on the right (refer to this article for information on basic layout of the studio in App Builder). Select the “Style” tab. Change the Style Variant to largeHeadline.
Notice how the size of the text is affected by your change. It is now inheriting all of its properties from the largeHeadline class.
Override The Styles
While largeHeadline is a good base class for what our text if we want to modify this specific instance of text, we can do this by overriding the style. Below the Style Variant selector you will see a bunch of editable properties on the label. We can make our text bold and italic by selecting those options under the font section. Your Window should now look like this:
This modification is only going to affect this instance of the largeHeadline label. To demonstrate this, select your second label and set it’s variant class to largeHeadline. Your window should look like this:
Notice how the second label is not bold or italic. We have overridden the property on specific label. We have not redefined the class. If we want to change the properties on both labels, we could modify the variant in the Theme Builder.