Components

Components are the building blocks of Cards, there are 20 different components found in the component library. Components are selected within the component library and drag and dropped into the edit panel. Once a component is in the edit panel, it can then be customised by interacting with the properties section.

Component Properties

Every Component has a range of properties that can be edited and adjusted to suit the desired function and look of your card. The properties are accessible in the Selected Component Properties Panel (panel 5 of Fig. 1. Card Designer Interface).

Properties are editable either by typing directly in the corresponding input box or by clicking the calculator icons on the right to enter a formula.

When a property is changed, there are two ways this will be shown- in the card preview itself (you may have to click the ‘Preview’ button to refresh these changes), and in the Selected Component Properties panel. The changed property in the Selected Components Property panel will either:

Contain the change visibly in the corresponding property’s input box Have the input box grayed and unable to be typed into (this indicates that the property has been changed using a formula - it is editable again by clicking the small calculator icon)

Generic Properties

While all components have some unique properties, there are also generic properties shared universally among most components.

Name

The name field is used with some components to help identify it on the card designer.

Align Content

Align content allows you to align the elements inside the component to the right, left or center of the component’s bounds.

Margins

Margins are used to adjust the position and/or spacing of a component, measured in pixels. For example, if you would like to move a component downwards, you would give it a higher value on Margin Top. You can also use negative values.

Padding

Padding is the internal spacing of a component. Below is a visual distinction between padding and margin, with the component being the blue block in the image.