Card's Tag

Step 2:

Div, Icon, Alignment, and Size

1

1. Video

1. GIF

2.1. Create new child -Text- inside of the Div: "cardtag"

New Text name : cardtagtext

2.1. Written steps

-Inside the Element Tree-

A. [Click] the Icon 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 "searchmenudiv5":

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

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

-Inside the Icon's Properties Panel-

C. [Click] the current name of the Icon 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.

2.2. Set -Div's- Alignment of: "cardtag"

Main: Axis center

Cross: Axis center

2.2. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Main Axis center button, inside the Alignment section:

• In the Top-Down first row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

B. [Click] the Cross Axis center button, inside the Alignment section:

• In the Top-Down second row of buttons, choose the Left-to-right second one.

• The items are packed to each other toward the center.

2.3. Set -Div's- Size of: "cardtag"

Width: Wrap

Height: Wrap

2.3. Written steps

-Inside the Div's Properties Panel-

A. [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.

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.

2.4. Set Text of: "cardtagtext"

Selected Text: Guest favorite

2.4. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon container and [click] the Icon:

• You can use the Icon name to find it through the SearchBar.

• You can also find it through each Material category's dropdown.

Step 3:

Background Color, Radius, and Padding

3

3. GIF

3. Video

3.1. Set -Div's- Background Color of: "cardtag

FFFFFF

3.1. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Background toggle and [click] Fill:

• Fill allows you to select either a material color or a gradient as background.

B. [Click] Background color and [Type] the desired color:

• You can type a 6 characters HEX code without the initial #.

3.2. Set -Div's- Radius of: "cardtag "

25

3.2. Written steps

-Inside the Div's Properties Panel-

[Click] the Radius container, and [type] the new value:

• The Radius applies to all four sides of a Div.

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

• The default Unit is in Pixels.

3.3. Set -Div's- Padding of: "cardtag "

Top: 6

Bottom: 6

Left: 12

Right: 12

3.3. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Padding 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 Padding 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.

C. [Click] the Padding Left 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.

D. [Click] the Padding Right 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.

3.4. Set -Text- Size of: "cardtagtext"

16

3.4. Written steps

-Inside the Icon's Properties Panel-

[Click] the Icon Size container and [type] the new value:

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

Step 4:

Position, and z-index

4

4. Video

4. GIF

4.1. Set -Div's- Position of: "cardtag"

Absolute

6.2. Written steps

-Inside the Properties Panel-

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

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

• The Div's final position is determined by the values of top, right, bottom, and left.

• It is positioned relative to its closest positioned ancestor or initial containing block.

4.2. Set -Div's- z-index of: "cardtag"

1

6.3. Written steps

-Inside the Properties Panel-

[Click] the z-index container and [type] the new value:

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

• You can only use positive values.

• It changes the default auto value into a particular stack level.

4.3. Set -Div's- Position of: "cardtag"

Top: 15

Left: 15

4.3. Written steps

-Inside the Div's Properties Panel-

A. [Click] the Position 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 Left 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.