Component: Card

Step 1:

Div, Size, Margin, and Position

1.1. Create new child -Div- inside of the Screen: "Card"

New Div name: carddiv

1.1. Written steps

-Inside the Element Tree-

A. [Click] the Div Icon:

  • The button is located at the top of the panel, below the Screens.

  • The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "Home":

  • The new element will appear as a child of the Screen.

  • The Div will be created with the default name "Layer #".

-Inside the Properties Panel-

C. [Click] the current name of the Div and [type] the new one:

  • The new name should be lowercase, without any spaces or special characters.

  • The name will be updated in the Element Tree after you have [clicked] away.

1.2. Create new child -Divs- inside of the Div: "carddiv"

New Div 1 name: cardtag

New Div 2 name: cardimages

New Div 3 name: cardinfo

1.2. Written steps

-Inside the Element Tree-

A. [Click] the Div Icon:

  • The button is located at the top of the panel, below the Screens.

  • The Icon will turn blue, and your pointer will change.

B. Drag your pointer and click "Home":

  • The new element will appear as a child of the Screen.

  • The Div will be created with the default name "Layer #".

-Inside the Properties Panel-

C. [Click] the current name of the Div and [type] the new one:

  • The new name should be lowercase, without any spaces or special characters.

  • The name will be updated in the Element Tree after you have [clicked] away.

1.3. Set -Div's- Size of: "carddiv"

Width: Wrap

Height: Wrap

1.3. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Fill button, inside the Width section:

  • The horizontal size of the Div will be the 100% of the screen.

  • You cannot use Fill size in the case there is a parent element in Wrap size.

B. [Click] the Wrap button, inside the Height section:

  • The vertical size of the Div will become its child's maximum combined size.

  • You cannot use Wrap size in the case there is a child element in Fill size.

1.4. Set -Div's- Margin of: "carddiv"

Top: 18

Bottom: 18

1.4. Written steps

-Inside the Properties Panel-

A. [Click] the Margin Top container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

B. [Click] the Margin Bottom container and [type] the new value:

  • You can also change the size value using the up and down arrows.

  • The default Unit is in Pixels, you do not need to change it.

1.5. Set -Div's- Position of: "carddiv"

Relative

1.5. Written steps

-Inside the Properties Panel-

[Click] the Rel button, inside the Position section:

  • In the row of buttons, choose the left-to-right third one.

  • The Div is offset relative to itself with a new stacking context.

  • Its child elements are positioned relative to the parent.

Save.

Click the Save button.

PreviousComponent: ButtonNextCard's Tag

Last updated