Component-Based Grid System: Usage Guide

This is a grid system built with Webflow components, designed specifically for creating Tables within the project. Further down this page you can find live demos of these components.

1. Grid Structure & Terminology

The grid is made up of 2 components:

• LP | Parent Grid - the wrapper component that holds the layout
• LP | Cell - the individual cell component placed inside the parent

‍

2. Getting Started

To find the grid components, open the Components tab in Webflow and start typing LP in the search field. The filter will show all matching components. You'll see a list of components used on the current page.

2 other components: LP | Metrics card and LP | Rich Text Metrics are used in a 2-column row.

‍

3. Adding the Grid to a Page

1. Place the LP | Parent Grid component inside the standard Section component on the page.
2. Inside it you'll find 3 row slots which keep all Cells in a single row.
3. Insert the LP | Cell component into one of these slots.
4. Style LP | Cell and copy/paste this element if you want to keep the same styles for the other cells.
   Use current live demos as a reference.

This gives you the base structure of a Table.

‍

4. Customizing the Layout

Here's what you can customize within a LP | Cell

I. Content & Visibility

• Toggle the table Header visibility On/Off.
• Edit the Header text.
• Change the Rich Text list style: choose between a dot, plus, or dash as the bullet point.
• Edit the cell content, following the tag guidelines shown in the field's help text.

‍

II. Styling with Classes

‍You can assign a custom class to a cell to control its styles, for example, to change the background or text color.

How to use the Class Name field:

• Type any class that already exists in the project.
• To change the background color start typing u-bg-, to change text color start typing u-color- . A dropdown will appear with matching class options to choose from.

‍

If the color you need doesn't exist yet:

1. Add the new color to Variables: inside the Color Palette and in the Themes tab.
2. Add any element on the page
3. Create a new class name on it using this naming template: u-bg-color-[number] or u-color-[number].
4. Bind the background color value of that class to the new variable.
5. Enter the new class name in the Class Name field for the desired cell.

‍

Controlling Cell Width

Assign width classes to control how many columns a cell spans. The project uses separate classes for each breakpoint, for example:‍

• ‍col-desktop-7,
• ‍col-tablet-9,
• ‍col-landscape-11
• col-portrait-12

You can preview all available grid and cell width options in the Grid section of the Styleguide page in the project.

‍

5. Responsive Behavior

By default if a table exceeds the screen width, horizontal scrolling is enabled on small screens, starting from the mobile landscape breakpoint.