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 |
| Size | Size this component by specifying the width & height. This can be done by using different units: px: A fixed way of sizing your component %: Size your component by choosing a percentage of the size of the parent of this component. vh/vw: Size your component by choosing a percentage of the viewport grid: Size your component by using a grid unset: Use the default browser behaviour of sizing this component. |
| Position | Position this component by specifiying the x & y coordinates. This can be done by using different units: px: A fixed way of positioning your component %: Position your component by choosing a percentage of the size of the parent of this component. vh/vw: Position your component by choosing a percentage of the viewport grid: Position your component by using a grid |
| Z-Index | The Z-Index value determines which components appear on top of others when they overlap in a two-dimensional space. Components with a higher Z-Index value are displayed on top of components with a lower Z-Index value. |
| Horizontal alignment | The Horizontal alignment lets you configure whether your component positions itself by using the left side of its parent or whether it uses the right side of the parent. Example: A component with x: 10px and Horizontal alignment set to “left” will position itself 10px from the left side of its parent. While a component with the same x value & Horizontal alignment set to “right” will position itself 10px from the right side of its parent. |
| Vertical alignment | The Vertical alignment lets you configure whether your component positions itself by using the top side of its parent or whether it uses the bottom side of the parent. Example: A component with x: 10px and Vertical alignment set to “top” will position itself 10px from the top side of its parent. While a component with the same x value & Vertical alignment set to “bottom” will position itself 10px from the bottom side of its parent. |
| Position is fixed | Setting a position to fixed will make sure a component scrolls along with the user. |
| Hidden | Setting this value will hide or unhide a certain component. |
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. |
