Component: Icon Panel 1.0-beta

This builder will allow you to generate a custom version of the Icon Panel 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.

Additional Components

In addition to the main component, the following additional components and/or CSS/JS modules have been added to help you build your version of the component:

Icon: You can use the icon component inside the icon panel.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

theme (attribute)

Color theme used

border (attribute)

Border color used

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-icon-panel--padding

Panel padding [default: 1.125rem 2.25rem 1.375rem 1.375rem]

--ilw-icon-panel--icon-size

Icon size [default: 5rem]

--ilw-icon-panel--margin

Margin around panel [default: 1.6rem 0]

--ilw-icon-panel--border-width

Width of left border [default: 8px]

--ilw-icon-panel--column-gap

Gap between icon and text [default: 1.375rem]

--ilw-icon-panel--font-size

Font size for panel text [default: 1.125rem]

--ilw-icon-panel--line-height

Line height for panel text [default: 1.667]

--ilw-icon-panel--icon-vertical-space

Space above icon [default: 0.75rem]

--ilw-icon-panel--mobile--padding

Mobile version padding [default: 1.125rem 1.8rem 1.375rem 0.5rem]

--ilw-icon-panel--mobile--icon-size

Mobile version icon size [default: 3.7rem]

--ilw-icon-panel--mobile--column-gap

Mobile version gap between icon and text [default: 0.8rem]

--ilw-icon-panel--font-family

Font family for panel text [default: var(--il-font-sans)]

--ilw-icon-panel--link-font-size

Font size for link slot [default: 1.25rem]

--ilw-icon-panel--link-font-weight

Font weight for link slot [default: 700]

--ilw-icon-panel--link-line-height

Line height for link slot [default: 1.2]

--ilw-icon-panel--heading-font-size

Font size for heading [default: 1.875rem]

--ilw-icon-panel--heading-font-weight

Font weight for heading [default: 600]

--ilw-icon-panel--heading-line-height

Line height for heading [default: 1.2]

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

Description for builder.

Full Version: 1.0.0-beta

Type: web component

Date Created: 10/01/2025

Version notes:

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

Javascript file: https://dev.toolkit.illinois.edu/ilw-icon-panel/1.0.0-beta/ilw-icon-panel.js

CSS file: https://dev.toolkit.illinois.edu/ilw-icon-panel/1.0.0-beta/ilw-icon-panel.css