1. Home
  2. Docs
  3. NoCode-X Documentation
  4. Components
  5. Component style

Component style

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

OptionDescription
Grid sizeChanges the width and height of the component’s container.
Pixel sizeAffects the size of components that are contained within a horizontal or vertical list, meaning their size is no longer determined by the grid.
PositionThe 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 viewDescription
NormalThe normal view.
On hoverWhen hovering with the mouse over the component.
On focusWhen the cursor is in the input field. Usually applies to form components.
When activeWhen 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:

OptionDescription
BorderAdds 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.
PaddingCreates extra space within a component. By pressing the unlink button in the middle, you can change the padding on every side of the component.
BackgroundAdds 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.
FontChanges 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 borderSimilar to Border but specifically for input fields within a component.
OverflowThis 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.
ShadowAdds 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.
CursorChoose the type of cursor that appears when the user hovers over this component.

The image below shows the styling menu for a Password component.

Styling menu for a "Password" component.
Was this article helpful to you? Yes No

How can we help?