The second tab in the Component menu is the Style tab. Here you can alter the appearance of a component. Styling options differ between components. Below is a non-exhaustive list of common styling options.
Size and position
| Option | Description |
| Grid size | Changes the width and height of the component’s container. |
| Pixel size | Affects the size of components that are contained within a horizontal or vertical list, meaning their size is no longer determined by the grid. |
| Position | The origin of the grid is in the top left corner. This corresponds with “0 x 0”. See the Template grid page for more information. Increasing the left and right number will move the component to the left and lower it, respectively. |
Style
These are the possible action views:
| Action view | Description |
| Normal | The normal view. |
| On hover | When hovering with the mouse over the component. |
| On focus | When the cursor is in the input field. Usually applies to form components. |
| When active | When a link or one of the component’s buttons is clicked. |
You can reset each option below to its default values by clicking the refresh icon next to the option’s name.
These are the styling options:
| Option | Description |
| Border | Adds a border that surrounds the component. Options: – Border type: the general appearance of the border, for example dotted or solid. – Color: the color of the border. – Width: alter the width of the border. – Radius: increasing this value will round the corners of the border. By pressing the unlink button in the middle, you can change the border on every side of the component separately. |
| Padding | Creates extra space within a component. By pressing the unlink button in the middle, you can change the padding on every side of the component. |
| Background | Adds a background to the component. This can be a solid color or a (non-)repeating image. Options: – Background color: choose a solid color as background. – Background image: choose an image as background. Provide a link to it or select it from the media library. – Background attachment: sets whether a background image scrolls with the rest of the page, or is fixed. – Background position x: move the background along the x-axis (positive value is to the right) – Background position y: move the background along the y-axis (positive value is downwards) – Background repeat: choose whether or not the background should repeat, and how. – Background size: alter the size of the background. – Background origin: set the origin of the background. |
| Font | Changes the font for components that contain text. Options include: – Font type: select a font type from this drop-down menu. – Size: select the size of the font (in the same menu as the font type). – Color: the color of the text. – Weight: make your text lighter or bolder. – Stretch: increase the horizontal width of each word. – Variant: choose a variant of the font. – Caps variant: alter the capitalization of the text. – Text alignment: change the positioning of the text in its container. |
| Inputfield border | Similar to Border but specifically for input fields within a component. |
| Overflow | This specifies what happens if a component overflows this component’s box. Choose whether to clip content or to add scrollbars when a component’s content is too big to fit. |
| Shadow | Adds shadow to the edges of the component. Options: – Color: the color of the shadow. – Offset x: offsets the shadow to the right, following the horizontal x-axis. – Offset y: offsets the shadow downwards, following the vertical y-axis. – Blur radius: blurs the edges of the shadow. The higher this number, the further towards the center of the shadow the blur penetrates. – Spread radius: increases the size of the shadow. |
| Cursor | Choose the type of cursor that appears when the user hovers over this component. |
The image below shows the styling menu for a Password component.
