Documentation
Low-code
Low-code
  • What is Agua?
  • Quick Start
    • AirBnb: Tutorial
      • Component: Button
      • Component: Card
        • Card's Tag
        • Card's Images
        • Card's Info
      • Home Header
        • 1. Banner
        • 2. Divider
        • 3. Desktop Menu
          • 3.1. Site Menu | Elements
          • 3.2. Site Menu | Style
          • 3.3. Search | Elements
          • 3.4. Search | Style
        • 4. Tablet Menu
          • 4.1. Menu | Elements
          • 4.2. Menu | Style
  • Daily Use
    • Basics
      • Initial Setup
      • Project structure
        • .agua folder
      • Project persistence
        • Saving your project
        • Deploy Locally
  • Help and Community
    • Support
    • Latam Community
    • Global Community
Powered by GitBook
On this page
  • Step 1:
  • Div, Size, Margin, and Position
  • Save.
  1. Quick Start
  2. AirBnb: Tutorial

Component: Card

PreviousComponent: ButtonNextCard's Tag

Last updated 1 year ago

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.