You can apply several classes to any component. Classes should be separated by a space " ". We use Bootstrap 4 as a base, so any class available in the bootstrap utilities, is also available to you. They are very useful for spacing, padding and flex.

That being said, you should try to not change too much the default design of Let's Role. It's especially important if you want your sheet to become officialized.


highlight-1, highlight-2

Change the background color to different shades. (Varies depending on the sheet skin)


Hides a component by default, as if it did not exist = does not take up any space. Does not work on Container components.


Hides a component by default, but maintains the space it occupies. Useful if you wish to maintain alignment between different lines that don't contain the same elements. Does not work on Container components.


Show the pointer hand cursor and turn the text orange when hovering over the component. Exactly the same visual effect as when checking the "Clickable" option for a Label component. If you use it on a column or row, it applies to all components inside it.


To add padding (internal spacing) or margin (external spacing), see this documentation.


text-tiny, text-small, text-medium, text-large, text-giant, text-gargantuan

Various sizes of text.


Set the font weight to bold.


Italicize the text.


Switches text's font to a monospace alternative. Simulates an extra typeface for your sheet. Useful for pretty UI!


A title style (bold, uppercase, text-medium)

text-uppercase, text-lowercase, text-capitalize

Display the text in a different case than the original text. (text-capitalize replaces the first letter of every word with a capital letter)


w-25px, w-50px, w-75px, w-100px, w-125px, w-150px, w-175px, w-200px, w-300px

Force the width in pixels of the component.


h-25px, h-50px, h-75px, h-100px, h-125px, h-150px, h-175px, h-200px, h-300px, h-400px, h-500px, h-600px, h-700px

Force the height in pixels of the component.