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.