Web Implementation Guidelines Group Component Builder Information (v3+)

Component: Columns 1.2

This builder will allow you to generate a custom version of the Columns component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Attributes, Classes, and CSS Variables

(attribute)
Mode of the columns (width)
(attribute)
Color theme used
(attribute)
Width of component
(attribute)
If the order of the columns are reversed in a row, defaults to false
(text attribute)
Padding of the text inside the component, defaults to 0 0 40px 0
(text attribute)
Gap in pixels or percentage between the columns, defaults to none
Custom CSS Variables and Styles (advanced use only)
Width of the sidebar

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

Creates a single row of items that you can use to display information, with information of different widths.

Full Version: 1.2

Type: web component

Date Created: 04/24/2025

Version notes:

Github repository: https://github.com/web-illinois/ilw-columns/

Javascript file: https://cdn.toolkit.illinois.edu/ilw-columns/1.2/ilw-columns.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-columns/1.2/ilw-columns.css

JSON information: ilw-columns.1.2.json

Web Implementation Guidelines Group Component Builder Information (v3+)

Note: this page is not using the toolkit because it is meant to test individual components in isolation.