The style tool is a compact and visual representation of common styles. It allows you to edit the following properties:

• Margin
• Border, including line style, color, thickness, and radius. By default border radius affects all 4 corners. You can toggle to individual corners by hovering over the top-right border and clicking the link icon that appears.
• Padding
• Background, including color, a gradient, or an image.
• Alignment
• Width and height, which include the border but not the margin. The width and height have 3 non-number settings:
  • Max fills the entire parent.
  • Edge-to-edge fills the entire parent, ignoring its padding.
  • Full-bleed fills the entire screen.
• Font, including font family, color, weight, and line height. For the text component, you can also edit the fonts for highlights, links, and code.

You can adjust any number by clicking and dragging the mouse, or by clicking and editing the number with your keyboard. The units are not measured in pixels, but in rem, which is a unit that automatically adjusts based on screen size to keep your layout looking great on all devices.

Saved styles

Right above the style tool is the Styles dropdown. A saved style remembers all the options you set for that style, so you can reuse it on multiple components. When you edit the styles of a component with a saved style, all other components using that style will be updated as well. If you'd like a component to use a similar, but not identical style to another component, first set that style on the new component, then do one of the following:

• Select Custom from the style dropdown. This will keep all the values of the style, but detach them from the saved one. Editing any property will just change this component, and no others.
• Select Add as new style from the style dropdown. This will give you two options:
  • Copy will use the same values in a completely new style. Changes to the original style will not affect it.
  • Reference will create a new style that is linked to the original one. Any values you change on the new style will override the original, and only be visible in the new style. However, any values that are changed in the base style will update both the original and new styles (unless overridden by the new style).

Mobile styles

For websites and announcements, the content can be styled separately on mobile and desktop. If you click the Mobile button, all edits will be performed just on mobile. By default, mobile styles are all set to Auto which means "use the same values as on desktop. However, you can selectively override any property to a different value for mobile.