You are currently viewing the new Beta Editor Docs.
Switch to the Classic Editor Docs
You are currently viewing the Classic Editor Docs.
Switch to the Beta Editor Docs

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.

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.

Roles modify the look and feel of components by applying CSS classes. Some Roles come pre-defined in Themes.