Styling Controls
Common styling controls frequently used in TheGem elements are described here. For specific controls or specific control behaviour of TheGem elements check the article “Element Overview”
Margin
Margin is used to control external spacings (top, right, bottom, left) of the element or part of the element. It can be specified in px, %, rem or em.
Spacing
Slider control, similar to margin, but controls only one specific external spacing, mostly top or bottom spacing.
Padding
Padding is used to control internal spacings (top, right, bottom, left) of the element or part of the element. It can be specified in px, %, rem or em.
Border Type
Select whether to enable border around the element or part of the element as well as specify border type. This control opens additional controls to select border width and border color.
Border Radius
Specify the radius of the element or part of the element
Background Type
Most of TheGem elements and their parts can have three different background types: color, image, gradient.
Position & Alignment
With this two controls you can specify the position and/or alignment of some element’s parts inside the element (for example text content, image, icon etc.)
Typography
Grouped control allowing you to customize different font settings for the text parts of the selected TheGem element.
Color
Colorpicker to specify color of some part of the selected element. In colorpicker you can add colors to “Favorites” by selecting some specific color and clicking on “+” button
Shadow
With this control you can add shadow to some part of the selected element (for example to add shadow to container or to image inside container).
Normal / Hover
Here you can switch between normal and hover states of the part of the element. In this way you can make different styling settings for the same part of the elements, for example change color settings for text or backgrounds, adds shadow for hover state, rotate icons etc.