Web Implementation Guidelines Group Component Builder Information (v3+)

Preview: Tabs 1.0-beta

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

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and theme =

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and theme = blue

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and theme = gray

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and theme = white

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and width =

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and width = full

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and width = auto

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and width = page

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and horizontal =

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Preview: default and horizontal = true

Degree Programs

There's no academic experience 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.

Second paragraph

Sample button

Panel #2. There's a link that goes somewhere here.

Panel #3

Panel #4 There's a link that goes somewhere here.

Details

This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.

Full Version: 1.0.1-beta

Type: web component

Date Created: 10/09/2024

Version notes:

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

Javascript file: https://dev.toolkit.illinois.edu/ilw-tabs/1.0.1-beta/ilw-tabs.js

CSS file: https://dev.toolkit.illinois.edu/ilw-tabs/1.0.1-beta/ilw-tabs.css

JSON information: ilw-tabs.1.0-beta.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.