Roles
Roles work by applying CSS classes to components. For example, a component with a role named foo
will get the .anvil-role-foo CSS class applied to it.
For themes that have Roles, you can add new roles in the Roles Editor (under “Roles” in the App Browser). You can write CSS rules in a CSS file in the Assets Editor to define how Roles affect components.
(For Material Design, theme.css is a good place: search for .anvil-role-card for examples.)
Roles modify the look and feel of components by applying CSS classes. Some Roles come pre-defined in Themes.
For themes that have Roles, you can add new roles by clicking “Theme” in the Sidebar Menu, then choosing “Roles”. This will bring up the Roles Editor in a new tab. You can write CSS rules in a CSS file uploaded under “Assets” to define how Roles affect components.
(For Material Design, theme.css is a good place: search for .anvil-role-card for examples.)
Roles modify the look and feel of components by applying CSS classes. Some Roles come pre-defined in Themes.