Card Container

Veritran Docs

Card Container

The Card Container component allows you to set a carousel of cards. To insert a Card Container component in the screen, go to the Left Panel in the Visual Builder. Go through the list of components to find the Card Container component or click the search bar and type its name. Then, drag and drop the component into the canvas and configure its attributes in the right panel.Building Tabs and Left Panel

Once you drag the card container into the canvas, you must include several other components within it to be able to use the main component. Follow the steps below to configure the components' hierarchy in the treeview (see image).

Drag and drop the Card Container component into the canvas.
Drag and drop a Card Panel Container within the Card Container.
Drag and drop a Cards Group component within the Card Panel Container.
Drag and drop as many Card components as necessary within the Cards Group component.
Drag and drop a Panel container within each Card component.
Drag and drop an Image and a Text Label component within each Panel added to each Card component.

Important

The Card Container component can only be used in mobile apps (both for Android and iOS devices).

After defining the structure, complete the attributes of the card container. Refer to the sections below to learn more.

Attributes

In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.Right Panel

Design

In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.

In this section, you can configure basic attributes of the component. Refer to the table below to learn more.

Cards View	Number of cards displayed in the app within the card container. To set the number, click the arrow and choose an option from the drop-down menu: select oneCard , twoCard or threeCard to display one, two or three cards, respectively.
Visible	Attribute that defines whether the component is visible in the app. Click the arrow and choose an option from the drop-down menu. Select true so that the component is visible in the app or false so that it is not visible.
Important For Accessibility	Attribute that defines whether the screen reader reads or ignores the value defined in the Accessibility Text attribute of the component. Click the arrow and select an option from the drop-down menu. Choose true so that the screen reader reads the component or false so that the screen reader does not read the component. The default value is false.
Accessibility Text	Alternative text. Add a short text to describe the component to users who may not be able to see it. The text will be read by iOS Voice Over or Android Talk Back. You can also add the accessibility text to the translations dictionary or select an existing translation if there are languages selected in your context settings.TranslationsSettings

In this section, you can configure the size and position attributes of the component. The only attribute to be configured is Position Type, which refers to the position of the component. Refer to the table below to learn more.

Position Type

Click the arrow and select a type from the drop-down menu. Refer to the table below to learn more about the options available.

Absolute	Position of the component determined by the X and Y axes.
Fixed	This value is not implemented.
Relative	Vertical and horizontal displacement from the original position of the component.

Actions

In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.

In this section, you can set different effects on the component's attributes and the animations through which the effects take place. First, you must select the attributes for which you want to set effects. Refer to the table below to learn more.

Alpha	Component’s transparency or opacity. Enter the value to set the initial opacity of the component before the animation is executed. The value can range from 0 to 1, considering 1 as the value that grants the highest level of transparency.
Scale	Component's dimension. Enter the value to set the initial scale of the component before the animation is executed. By default, the scale value is 1, which equals the component’s original size. The value can be any number starting on 1.

Advanced

There are no attributes available for configuration in the Advanced tab for the Card Container component.

In this section:

Was this helpful?

Would you like to provide feedback? Just click here to suggest edits.

Veritran Docs

Card Container

Important

Attributes

Design

Tip

Actions

Advanced

Search results