Builder IFrame

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

theme (attribute)

Color theme used. There is no orange theme because there would be a lot of bright colors on the screen.

width (attribute)

Width -- constrained to the container (default), full width, or full width but text is constrained (auto), or text is constrained to the page width (page).

horizontal (attribute)

Whether or not to use the horizontal layout. Recommended to not use this unless there are a few tabs.

rounded (attribute)

Whether or not to use rounded corners for the tabs.

default (text attribute)

The ID of the tab that is open on load. This defaults to the first item in the list.

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-tabs--display

Flex or block for the tabs list (controls horizontal or vertical layout)

--ilw-tabs--tablist--display

Flex or block for the tabs button list (controls horizontal or vertical layout)

--ilw-tabs--tablist--width

Width of the tabs button list in vertical layout. Defaults to 350px.

--ilw-tabs--max-width

Max Width of the tabs control, defaults to auto.

--ilw-tabs--padding

Padding of the entire tab control.

--ilw-tabs--border-radius

Border radius of the control.

--ilw-tabs--color-control

Color of the control in a rounded tab.

--ilw-tabs--color-control-text

Color of the text in a rounded control.

--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:

Content: The inset version of the content block can be used to format the text inside the tabs.

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.

<div slot='tabs'><button role='tab' aria-controls='panel1'>Tab #1</button><button role='tab' aria-controls='panel2'>Tab #2</button><button role='tab' aria-controls='panel3'>Tab #3</button><button role='tab' aria-controls='panel4'>Tab #4</button></div><div id='panel1'> <h3>Degree Programs</h3> <p>There's no <a href='#'>academic experience</a> quite like Grainger Engineering. Ranked the #6 college of engineering with 13 top 5 programs from US News and World Report, we have a reputation of being the best of the best. But a lot goes into those numbers. Engaging professors. State-of-the-art facilities. Groundbreaking student resources. Brilliant classmates. Supportive environment. Endless opportunities. Whether you're a first year undergraduate or working toward a PhD, our programs are designed to help you become the engineer you want to be.</p> <p>Second paragraph</p> <p><a href='#' class='ilw-button'>Sample button</a></p></div><div id='panel2'> <p>Panel #2. There's a <a href='#'>link that goes somewhere</a> here.</p></div><div id='panel3'><p>Panel #3</p></div><div id='panel4'><p>Panel #4 There's a <a href='#'>link that goes somewhere</a> here.</p></div>

<div slot='tabs' role='tablist'><button role='tab' aria-controls='panel1'>Tab #1</button><button role='tab' aria-controls='panel2'>Tab #2</button><button role='tab' aria-controls='panel3'>Tab #3</button><button role='tab' aria-controls='panel4'>Tab #4</button></div><ilw-content id='panel1'> <h3>Degree Programs</h3> <p>There's no <a href='#'>academic experience</a> quite like Grainger Engineering. Ranked the #6 college of engineering with 13 top 5 programs from US News and World Report, we have a reputation of being the best of the best. But a lot goes into those numbers. Engaging professors. State-of-the-art facilities. Groundbreaking student resources. Brilliant classmates. Supportive environment. Endless opportunities. Whether you're a first year undergraduate or working toward a PhD, our programs are designed to help you become the engineer you want to be.</p> <p>Second paragraph</p> <p><a href='#' class='ilw-button'>Sample button</a></p></ilw-content><ilw-content id='panel2'> <p>Panel #2. There's a <a href='#'>link that goes somewhere</a> here.</p></ilw-content><ilw-content id='panel3'><p>Panel #3</p></ilw-content><ilw-content id='panel4'><p>Panel #4 There's a <a href='#'>link that goes somewhere</a> here.</p></ilw-content>