Row

Introduction

Welcome to the Row component documentation! As part of the page builder in App Platform, the Row component allows you to organize and align content horizontally within a container. This structural component is essential for creating clean, orderly layouts that enhance both the aesthetics and the functionality of your web applications.

Why we developed it

The Row component provides a flexible framework for aligning UI elements horizontally across the screen. It is fundamental to creating responsive, grid-based layouts that adapt to different screen sizes while maintaining the integrity of the design.

What it could be used for

• Structuring content into horizontal blocks within a webpage.

• Aligning multiple elements, such as buttons, images, or text, within a single horizontal line.

• Creating a base for grid systems that require precise control over the placement and alignment of components.

• Supporting responsive design principles by organizing content in rows that adjust to screen width changes.

Example \ Use Case

You could use the Row component on a service overview page to align icons or buttons that link to different IT services you offer, such as cybersecurity, cloud infrastructure, and network management. Each service could be represented by an icon and a short description in a separate row element, ensuring that the page is easy to scan and that users can quickly find the service they need. This usage not only makes the page visually attractive but also enhances user navigation and improves overall site organization.

Adding a Row to a page

1. Access the Canvas: Open the page you're working on in edit mode, in App Platform.

2. Drag-and-Drop: Locate the 'Row' component in the component library, then drag and drop it onto the canvas.

Configuring the Row component

1. Select the component: Click on the added 'Row' component to select it.

2. Properties Panel: On the properties panel, you'll find various configurable options:

   • Layout

     • Height: Adjust the height of the component.

     • Alignment: Set the alignment of the content placed within the row component; 'Space between', 'Start', Center' or 'End'.

     • Reverse order: Toggle to reverse the order of the components within the row component.

3. Live Preview: The canvas provides a live preview of your configured component(s) once you've made changes.

If you have any questions or need assistance, feel free to reach out to our support team. - Happy designing! 🎨🚀