Coordinate Card

This layout offers an absolute layout design structure.

You can drag and drop plug-in objects to an absolute position on the card. The end application reflects the same as in the coordinate card page design.

Field Name	Description
Columns	The card occupies the specified number of columns on the page grid.
Rows	The card occupies the specified number of rows on the page grid.
Position X	Applies to the horizontal placement of the card on the page. When the value is `0`, the card is placed on the left-most side of the page. As you increase the value, the card moves away from the left side of the page.
Position Y	Applies to the vertical placement of the card on the page. When the value is `0`, the card is placed at the top of the page. As you increase the value, the card moves away from the top of the page.
Layout Type	Choose from the following card layouts before starting to design your pages: `Coordinate`: Objects dropped on this layout stay where they are on the page. `Flexbox`: Objects dropped on this layout are automatically arranged on a single line. See Flexbox Card.
Style	Select these check boxes to format the objects: `Rounded Corners`: Adds a rounded corner instead of a pointed corner. `Custom Colors`: Adds color.
Function	Layout functionalities: `Card`: This is the regular flexbox layout option without any additional functionalities. `Interactive Map`: This flexbox layout includes an interactive map functionality. See Interactive Map.
Aspect Ratio	By choosing to preserve the aspect ratio, the elements within the card do not get stretched or distorted whenever the card is resized, overall aspect ratio is maintained. The aspect ratio is applicable only to the usable area within the coordinate card. Select the check box for Preserve Aspect Ratio. Width / Height Ratio of Usable Area: Enter the height-to-width ratio (or aspect ratio), which is applied to the usable area. For example, if the usable area on the card has height of 10px and a width of 20px, the height-to-width ratio will be 1:2. Horizontal Alignment: To horizontally align items within the coordinate card, choose from options - Left, Center, or Right. Vertical Alignment: To vertically align the items within the coordinate card, choose from options - Top, Center, or Bottom. For plug-ins with dimensions specified in pixels (px), the dimensions do not change when the card is resized. For plug-ins with dimensions specified in percentage (%), the dimensions adjust proportionally when the card is resized.
Background Image	See Set Background Image.
Scale Line Connector	This option is set at card level. With this setting, the line connector works similar to percentage %. All the other plug-ins that are connected using line connector need to be in % when user is expecting to scale based on browser page dynamic height and width changes.
Show/Hide	Select +Add Conditions to create conditions to show or hide the card. See Apply Conditions.
Height	This value dynamically sets the height of the plug-in on a coordinate layout. The plug-in dimensions are determined by the layout mechanism being used (coordinate or flex layout). The height and width values are not considered from the plug-in manifest.
Width	This value dynamically sets the width of the plug-in on a coordinate layout. The plug-in dimensions are determined by the layout mechanism being used (coordinate or flex layout). The height and width values are not considered from the plug-in manifest.
Unit	Apply a unit of measurement for the height/width values. Pixel (px) values reflect the exact pixel size on the screen. Percent (%) values reflect percentage of the parent container's size.
Rotation	Enter a numeric value to set the rotation angle of the plug-in around its center point. The value represents the number of degrees the plug-in should be rotated clockwise. For example, a rotation value of 90 would rotate the plug-in 90 degrees clockwise.
X Relative	Determines the horizontal positioning of the plug-in with respect to its original position within the coordinate layout. `offsetLeft`: The plug-in is moved horizontally towards the left, with respect to its original position. `offsetRight`: The plug-in is moved horizontally towards the right, with respect to its original position.
Y Relative	Determines the vertical positioning of the plug-in with respect to its original position within the coordinate layout. `offsetTop`: The plug-in is moved vertically towards the top, with respect to its original position. `offsetBottom`: The plug-in is moved vertically towards the bottom, with respect to its original position.
Lock Aspect	When you resize a plug-in, you have the option to maintain its aspect ratio. When set to `true`, the aspect ratio of the plug-in is locked. When set to `false`, the aspect ratio of the plug-in is not locked.
Offset Left	Enter a numeric value to set the horizontal offset or displacement of the plug-in from the left edge of the coordinate layout. The value represents the number of units (pixels, points, etc.) the plug-in should be offset from the left edge.
Offset Top	Enter a numeric value to set the vertical offset or displacement of the plug-in from the top edge of the coordinate layout. The value represents the number of units the plug-in should be offset from the top edge.

Scroll bars appear when the card size is smaller than the plug-in size.

Set Background Image

To add a background image:

Select the check box for Background Image.
Select image Source Type from these options:.
- File: Browse your local system and choose an image file to upload.
- URL: Enter a URL address of the image you want to add as a background.

The following settings allow you to control the appearance of the background image.

Fit	Determines how a background image is scaled to fit within its layout. Auto: Displays the image at its original size. Cover: Scales the image to cover the entire layout area while maintaining its aspect ratio. The image may get cropped. Contain: Scales the image proportionally to fit within the layout area without the need for cropping.
Repeat	Determines if/how a background image should be repeated to fill the layout. None: Image is not repeated. It is displayed only once covering the available area. Repeat: Image is repeated both horizontally and vertically (grid-like pattern) to fill the layout area. Repeat X: Image is repeated only horizontally along the x-axis. Repeat Y: Image is repeated only vertically along the y-axis. Space: Image is repeated only as much as possible without cropping, and the space between the repeats are distributed evenly. Round: Image is repeated only as much as possible without cropping, and the repeats are resized to fill the available space.
Horizontal	Determines how a background image is positioned horizontally within its layout. Left: Image is aligned to the left side. Center: Image is horizontally centered. Right: Image is aligned to the right side.
Vertical	Top: Image is aligned to the top. Center: Image is vertically centered. Bottom: Image is aligned to the bottom.