Preview: Columns 1.3
These are a preview of components with individual items triggered. Because this is automatically generated, some of these components may look similiar to each other. This is also used by the Axe Monitor process to validate accessibility.
Preview: Base level for default
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and mode =
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and mode = 1x1
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and mode = 1x2
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and mode = 1x3
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and mode = 2x1
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and mode = 3x1
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and mode = 1x2x1
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and mode = sidebar-left
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and mode = sidebar-right
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and theme =
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and theme = blue
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and theme = orange
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and theme = blue-gradient
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and theme = orange-gradient
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and theme = gray
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and theme = white
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and width =
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and width = full
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and width = auto
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and width = page
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and reverse =
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: default and reverse = true
Lorem ipsum dolor sit amet
Consectetur adipiscing elit.
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: Base level for image
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and mode =
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and mode = 1x1
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and mode = 1x2
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and mode = 1x3
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and mode = 2x1
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and mode = 3x1
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and mode = 1x2x1
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and mode = sidebar-left
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and mode = sidebar-right
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and theme =
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and theme = blue
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and theme = orange
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and theme = blue-gradient
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and theme = orange-gradient
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and theme = gray
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and theme = white
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and width =
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and width = full
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and width = auto
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and width = page
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and reverse =
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: image and reverse = true
Lorem ipsum dolor sit amet
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: Base level for columns with content component
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and mode =
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and mode = 1x1
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and mode = 1x2
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and mode = 1x3
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and mode = 2x1
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and mode = 3x1
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and mode = 1x2x1
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and mode = sidebar-left
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and mode = sidebar-right
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and theme =
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and theme = blue
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and theme = orange
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and theme = blue-gradient
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and theme = orange-gradient
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and theme = gray
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and theme = white
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and width =
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and width = full
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and width = auto
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and width = page
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and reverse =
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Preview: columns with content component and reverse = true
Column 1
Consectetur adipiscing elit.
Donec posuere dui mauris, eu scelerisque mauris mattis in. Nunc sed leo arcu. Nulla non eleifend sapien.
Column 2
Nunc sed leo arcu. Nulla non eleifend sapien.
Details
Creates a single row of items that you can use to display information, with information of different widths.
Full Version: 1.3
Type: web component
Date Created: 10/17/2025
Version notes:
Github repository: https://github.com/web-illinois/ilw-columns/
Javascript file: https://cdn.toolkit.illinois.edu/ilw-columns/1.3/ilw-columns.js
CSS file: https://cdn.toolkit.illinois.edu/ilw-columns/1.3/ilw-columns.css
JSON information: ilw-columns.1.3.json