Work in progress...

Component-Based Grid System: Usage Guide

‍

1. Overview

This is a grid system built with Webflow components, designed specifically for creating Tables within the project.

2. Grid Structure & Terminology

The grid is made up of two components:

  • Grid Parent - the wrapper component that holds the layout
  • Grid Cell - the individual cell component placed inside the parent
3. 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.

4. Adding the Grid to a Page
  1. Insert the Grid Parent component onto the page.
  2. Inside it, you'll find a slot - insert the Grid Cell component into that slot.

This gives you the base structure of a Table.

5. Customizing the Layout

Here's what you can customize within a Grid Cell:

Content & Visibility

  1. Toggle the table Header visibility on or off.
  2. Edit the Header text.
  3. Change the Rich Text list style - choose between a dot, plus, or dash as the bullet marker.
  4. Edit the cell content, following the tag guidelines shown in the field's help text.

Styling with ClassesYou can assign a custom class to a cell to control its appearance - 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- - 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.
  2. Create a new class named u-bg-color-[number].
  3. Bind the background color value of that class to the new variable.
  4. 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:

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.

6. Responsive Behavior

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

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mag

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore mag

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ma

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ma

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ma

Title

  • Item A
  • Item B
  • Item C

Title

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  • Item B
  • Item C
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp ostrud

‍

Title

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp ostrud

Title

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp ostrud

Title

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp ostrud

Title

  • Item A
  • Item B
  • Item C

Title

  • Item A
  • Item B
  • Item C

Title

  • Item A
  • Item B
  • Item C

Title

  • Item A
  • Item B
  • Item C

Title

  • Item A
  • Item B
  • Item C
Automated Analysis

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Heading

Title

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp ostrud

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Title

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp ostrud

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

Title

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp ostrud

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp ostrud
  • Item B
  • Item C
Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit

H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit