Builder IFrame

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

theme (attribute)

Color theme used

accent (attribute)

Accent color used for the left border

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]

--ilw-color--background

Global style: Background color

--ilw-color--text

Global style: Text color

--ilw-color--border

Global style: Border color

--ilw-color--border-light

Global style: Light border color

--ilw-color--link

Global style: Link color

--ilw-color--link-hover

Global style: Link hover color

--ilw-color--link-visited

Global style: Link visited color

--ilw-color--heading

Global style: Heading color

--ilw-color--heading-link

Global style: Heading link color

--ilw-color--heading-link-hover

Global style: Heading link hover color

--ilw-color--heading-link-visited

Global style: Heading link visited color

--ilw-color--control

Global style: Control color

--ilw-color--control-text

Global style: Control text color

--ilw-color--control-accent

Global style: Control accent color

--ilw-color--control-accent-text

Global style: Control accent text color

--ilw-color--table-border

Global style: Table border color

--ilw-color--table-background

Global style: Table background color

--ilw-color--table-row-stripe

Global style: Table row stripe color

--ilw-color--table-head-background

Global style: Table head background color

--ilw-color--table-head-color

Global style: Table head text color

--ilw-color--focus--background

Global style: Focus background color

--ilw-color--focus--text

Global style: Focus text color

--ilw-color--focus--outline

Global style: Focus outline color

--ilw-margin--side

Global style: Side margin in pixels

--ilw-panel--color

Global style: Panel color (depreciated)

--ilw-panel--highlighted-color

Global style: Panel highlighted color (depreciated)

--ilw-panel--focused-color

Global style: Panel focused color (depreciated)

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.

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.

Copied to clipboard

This is the additional HTML used to test the item.