Component Preview

All Component Preview

These are autogenerated pages that list all components with their default view.

Individual Component Preview

This is an autogenerated preview set of links that will allow the aXe monitor to review the components. Each link includes variations of the component.

Accordion (web component) 1.0: This is an accordion where you have headers and each header can be opened to display more information.
Accordion (web component) 1.1: This is an accordion where you have headers and each header can be opened to display more information.
Accordion (web component) 1.2: This is an accordion where you have headers and each header can be opened to display more information.
Accordion (web component) latest: This is an accordion where you have headers and each header can be opened to display more information.
Award List (web component) 1.0-alpha: Stylized list of awards with categories.
Award List (web component) 1.0: Stylized list of awards with categories.
Back to Top (web component) 1.0-beta: The Illinois component back-to-top allows you to provide a simple way to skip either to the top of a page or to a designated point in the page (such as the page content area).
Back to Top (web component) 1.0: The Illinois component back-to-top allows you to provide a simple way to skip either to the top of a page or to a designated point in the page (such as the page content area).
Back to Top (web component) 1.1: The Illinois component back-to-top allows you to provide a simple way to skip either to the top of a page or to a designated point in the page (such as the page content area).
Back to Top (web component) 1.2: The Illinois component back-to-top allows you to provide a simple way to skip either to the top of a page or to a designated point in the page (such as the page content area).
Breadcrumbs (web component) 1.0: The breadcrumb component provides a list of formatted links that provide the path between the site’s home page and the page the reader is currently viewing.
Breadcrumbs (web component) 1.1: The breadcrumb component provides a list of formatted links that provide the path between the site’s home page and the page the reader is currently viewing.
Breadcrumbs (web component) 1.2: The breadcrumb component provides a list of formatted links that provide the path between the site’s home page and the page the reader is currently viewing.
Breadcrumbs (web component) 1.3: The breadcrumb component provides a list of formatted links that provide the path between the site’s home page and the page the reader is currently viewing.
Breadcrumbs (web component) latest: The breadcrumb component provides a list of formatted links that provide the path between the site’s home page and the page the reader is currently viewing.
Call To Action (web component) 1.0: Call to action component to prompt visitors to perform an action or a few related actions.
Call To Action (web component) 1.1: Call to action component to prompt visitors to perform an action or a few related actions.
Call To Action (web component) latest: Call to action component to prompt visitors to perform an action or a few related actions.
Card (web component) 1.0: A card component that can be used as a container for grouping information.
Card (web component) 1.1: A card component that can be used as a container for grouping information.
Card (web component) 1.2: A card component that can be used as a container for grouping information.
Card (web component) latest: A card component that can be used as a container for grouping information.
Carousel (web component) 1.0-beta: Changing slides with images and text.
Carousel (web component) 1.0: Changing slides with images and text.
Carousel (web component) 1.1-beta: Changing slides with images and text.
Carousel (web component) 1.2: Changing slides with images and text.
Columns (web component) 1.0-beta: Creates a single row of items that you can use to display information, with information of different widths.
Columns (web component) 1.0: Creates a single row of items that you can use to display information, with information of different widths.
Columns (web component) 1.1: Creates a single row of items that you can use to display information, with information of different widths.
Columns (web component) 1.2: Creates a single row of items that you can use to display information, with information of different widths.
Columns (web component) 1.3: Creates a single row of items that you can use to display information, with information of different widths.
Content - Inset (web component) 1.0: The Content component with the inset mode enabled
Content - Inset (web component) 1.1: The Content component with the inset mode enabled
Content - Inset (web component) 1.2: The Content component with the inset mode enabled
Content - Inset (web component) latest: The Content component with the inset mode enabled
Content - Introduction (web component) 1.0: The Content component with the introduction mode enabled. Note that the emphasized piece needs to be in an emphasized tag
Content - Introduction (web component) 1.1: The Content component with the introduction mode enabled. Note that the emphasized piece needs to be in an emphasized tag
Content - Introduction (web component) 1.2: The Content component with the introduction mode enabled. Note that the emphasized piece needs to be in an emphasized tag
Content - Introduction (web component) latest: The Content component with the introduction mode enabled. Note that the emphasized piece needs to be in an emphasized tag
Content - Lede (web component) 1.0: The Content component with the lede mode enabled
Content - Lede (web component) 1.1: The Content component with the lede mode enabled
Content - Lede (web component) 1.2: The Content component with the lede mode enabled
Content - Lede (web component) latest: The Content component with the lede mode enabled
Content (web component) 1.0: The Content component.
Content (web component) 1.1: The Content component.
Content (web component) 1.2: The Content component.
Content (web component) latest: The Content component.
Footer (web component) 1.0: The standard footer component for the Urbana-Champaign campus.
Global Button Styles (anchor) (stylesheet) latest: The Global WIGG Stylesheet contains styles for a single button. This is using the 'a' element.
Global Button Styles (anchor) (stylesheet) 3.0: The Global WIGG Stylesheet contains styles for a single button. This is using the 'a' element. Note the -1, -2 versions are obsolete.
Global Button Styles (button) (stylesheet) latest: The Global WIGG Stylesheet contains styles for a single button. This is using the 'button' element.
Global Button Styles (button) (stylesheet) 3.0: The Global WIGG Stylesheet contains styles for a single button. This is using the 'button' element. Note the -1, -2 versions are obsolete.
Global Button Group Styles (stylesheet) latest: The Global WIGG Stylesheet contains a group of buttons.
Global Button Group Styles (stylesheet) 3.0: The Global WIGG Stylesheet contains a group of buttons. Note the -1, -2 versions are obsolete.
Global Image Cover (stylesheet) 3.0-beta: The Global WIGG Stylesheet contains styles to create an image that covers over the entire area of the parent element.
Global Image Cover (stylesheet) 3.0: The Global WIGG Stylesheet contains styles to create an image that covers over the entire area of the parent element.
Global Screen Reader (stylesheet) 3.0-beta: The Global WIGG Stylesheet contains styles to make an item visible for a screen reader but not displayed.
Global Screen Reader (stylesheet) 3.0: The Global WIGG Stylesheet contains styles to make an item visible for a screen reader but not displayed.
Grid (web component) 1.0-beta: Creates a grid of items that you can use to display information.
Grid (web component) 1.0: Creates a grid of items that you can use to display information.
Grid (web component) 1.1: Creates a grid of items that you can use to display information.
Header Mega Menu (web component) 1.0-alpha: Mega Menu for the top of the page.
Header Menu (web component) 1.0: Menu for the top of the page.
Header Menu (web component) 1.2: Menu for the top of the page.
Header (web component) : The header component implements the standard campus header, and can contain navigation, search, and additional links.
Hero (web component) 1.0: The Hero Image component adds a large picture at the top of the page. It is used to draw attention to the page and can be used to set the tone for the page.
Hero (web component) 1.1: The Hero Image component adds a large picture at the top of the page. It is used to draw attention to the page and can be used to set the tone for the page.
Hero (web component) latest: The Hero Image component adds a large picture at the top of the page. It is used to draw attention to the page and can be used to set the tone for the page.
Icon Panel (web component) 1.0-beta: Description for builder.
Icon (web component) 1.0-beta: A wrapper class to pull the icons from https://cdn.brand.illinois.edu/icons.html
Icon (web component) 1.0: A wrapper class to pull the icons from https://cdn.brand.illinois.edu/icons.html
Icon (web component) 1.1-beta: A wrapper class to pull the icons from https://cdn.brand.illinois.edu/icons.html
Icon (web component) 1.1: A wrapper class to pull the icons from https://cdn.brand.illinois.edu/icons.html
Icon (web component) 1.2: A wrapper class to pull the icons from https://cdn.brand.illinois.edu/icons.html
Modal (web component) 1.0-alpha: The modal component provides a modal that opens on top of a web page.
Modal (web component) 1.0: The modal component provides a modal that opens on top of a web page.
Modal (web component) 1.1: The modal component provides a modal that opens on top of a web page.
Page Title (web component) 1.0: The component ilw-page-title provides a background image and gradient overlay options for the text of the title of a particular web page.
Page Title (web component) 1.1: The component ilw-page-title provides a background image and gradient overlay options for the text of the title of a particular web page.
Page Title (web component) 1.2: The component ilw-page-title provides a background image and gradient overlay options for the text of the title of a particular web page.
Page Title (web component) latest: The component ilw-page-title provides a background image and gradient overlay options for the text of the title of a particular web page.
Page (web component) 1.0-beta: The Page component, containing styles and margins for other components.
Page (web component) 1.0: The Page component, containing styles and margins for other components.
Page (web component) 1.1: The Page component, containing styles and margins for other components.
Pagination (web component) 1.0: This component provides standardized styles for page counting links (First, Previous, a numbered set of pages with the current page highlighted, Next, and Last)
Pagination (web component) 1.1: This component provides standardized styles for page counting links (First, Previous, a numbered set of pages with the current page highlighted, Next, and Last)
Pagination (web component) latest: This component provides standardized styles for page counting links (First, Previous, a numbered set of pages with the current page highlighted, Next, and Last)
Profile Card (web component) 1.0-beta: A card component built to show a profile card.
Profile Card (web component) 1.0: A card component built to show a profile card.
Profile List (web component) 1.0: A compact version of the profile.
Profile (web component) 1.0: A profile of a faculty, student, or staff member with contact information, biography, and other information.
Quote (web component) 1.0: This component represents a quote or testimonial, with optional attribution of author and source. The quote or testimonial is intended to be intermixed with copy and the quote is highlighted and called out.
Quote (web component) 1.1: This component represents a quote or testimonial, with optional attribution of author and source. The quote or testimonial is intended to be intermixed with copy and the quote is highlighted and called out.
Quote (web component) 1.2: This component represents a quote or testimonial, with optional attribution of author and source. The quote or testimonial is intended to be intermixed with copy and the quote is highlighted and called out.
Quote (web component) latest: This component represents a quote or testimonial, with optional attribution of author and source. The quote or testimonial is intended to be intermixed with copy and the quote is highlighted and called out.
Section Nav (web component) 1.0-beta: Secondary navigation for a section of a website.
Section Nav (web component) 1.0: Secondary navigation for a section of a website.
Section Nav (web component) 1.1: Secondary navigation for a section of a website.
Section Nav (web component) 1.2: Secondary navigation for a section of a website.
Section Nav (web component) 1.0-beta: Secondary navigation for a section of a website.
Section Nav (web component) 1.0: Secondary navigation for a section of a website.
Section Nav (web component) 1.1: Secondary navigation for a section of a website.
Section Nav (web component) 1.2: Secondary navigation for a section of a website.
Spacer (web component) 1.0-beta: This is a spacer component to increase vertical margin between two other components.
Spacer (web component) 1.0: This is a spacer component to increase vertical margin between two other components.
Statistic (web component) 1.0: Display a statistic nicely.
Statistic (web component) 1.1: Display a statistic nicely.
Statistic (web component) latest: Display a statistic nicely.
Tabs (web component) 1.0: This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.
Tabs (web component) 1.1: This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.
Tabs (web component) latest: This is a tab component, where you have a bunch of buttons that trigger new content information inside a fixed area.
Tooltip (web component) 1.0-alpha: Ilw-tooltip is a popup that provides additional information about a user interface element, such as a button or link, when the mouse hovers over it.
Tooltip (web component) 1.0: Ilw-tooltip is a popup that provides additional information about a user interface element, such as a button or link, when the mouse hovers over it.
Tooltip (web component) 1.1: Ilw-tooltip is a popup that provides additional information about a user interface element, such as a button or link, when the mouse hovers over it.
Video Short (web component) 1.1-rc0: Responsive video wrapper for Illinois Toolkit proportioned for YouTube shorts.
Video Short (web component) 1.0: Responsive video wrapper for Illinois Toolkit proportioned for YouTube shorts.
Video (web component) 1.1-rc0: Responsive video wrapper for Illinois Toolkit. This component ensures a consistent size and aspect ratio across breakpoints, but does not supply the video element or its controls.
Video (web component) 1.0: Responsive video wrapper for Illinois Toolkit. This component ensures a consistent size and aspect ratio across breakpoints, but does not supply the video element or its controls.