Interaction & Responsive Design
In Macaron, you can make components interactive (hover effect etc) and responsive (media queries) by adding a variant to a component.
A variant is a visual state that is applied to a component. The condition for a variant can be CSS selectors (for the root element of the component), media queries, or both.
Create a variant
To create a new variant, select the component or the default variant, click the top-left + button in the Component tab in the side bar.
A variant with the
:hover pseudo-class will be added. You can change the selectors/media queries in the Conditions panel.