Understanding containers and their properties

Modified on Wed, 22 May 2024 at 11:27 AM

Containers are the most important and powerful component in any Digital Card because they have a major hierarchy. Any edits made to the main Container will affect everything within it. The term "Container" signifies its function of "containing" other elements, making it easier to remember.


Containers are the only components that can contain other components, and practicing with them will allow you to make easier edits.


To begin, identify the Container by selecting any component. If the component says "Container", you have found the correct component to begin editing. To enter the editing mode for any component, click the pencil icon when the component is selected, or double-click within it.


Disclaimer: Keep in mind that any changes you make to a Container will affect the appearance of all components placed within it.


Features of Containers.

General Properties.
  • Change the look of the Container by adding a background image. Click Upload, and then use the Position, Size, and Repeat options to define how the image will appear.
  • You can specify an action when the Container is clicked, such as directing to a website.

Style Properties.

Positioning:
  • Absolute Position: This option places the selected Container inside the nearest Container. Moving it will not affect other objects. This option is rarely used and should be avoided if you do not want to lose control of the Container.
  • Alignment: Left, center, right, and justified alignment options for the Container.
  • Horizontal, Vertical, and Layer Position: Move the Container horizontally and vertically, and adjust its depth order to decide whether it is on top of or behind other elements.

Items Alignment:
  • Options for determining the alignment of objects within the Container.

Sizing:
  • Change the Container's aspect by adjusting its width.

Border:
  • Corner Rounding: Define the squareness or roundness of the border.
  • Border Width: Apply a stroke effect to the borders.
  • Border Color: Choose any color from your brand or the color palette.

Shadows:
  • Horizontal and Vertical Offset: Move the shadow horizontally or vertically from the center of the module.
  • Blur: Apply a blur effect to the shadow.
  • Shadow Color: Define the color of the shadow.

Coloring:
  • Apply solid or gradient colors to any module. You can also make them transparent by erasing the color code.

Margins:
  • Define the invisible space around the borders of components and Digital Cards.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article