Preview: Hero 1.0
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
Innovating solutions every year
Preview: default and theme =
Innovating solutions every year
Preview: default and theme = blue
Innovating solutions every year
Preview: default and theme = orange
Innovating solutions every year
Preview: default and theme = white
Innovating solutions every year
Preview: default and align =
Innovating solutions every year
Preview: default and align = top
Innovating solutions every year
Preview: default and align = bottom
Innovating solutions every year
Preview: default and align = left
Innovating solutions every year
Preview: default and align = right
Innovating solutions every year
Preview: default and align = top-left
Innovating solutions every year
Preview: default and align = top-right
Innovating solutions every year
Preview: default and align = bottom-left
Innovating solutions every year
Preview: default and align = bottom-right
Innovating solutions every year
Preview: default and focus =
Innovating solutions every year
Preview: default and focus = top
Innovating solutions every year
Preview: default and focus = bottom
Innovating solutions every year
Preview: default and focus = left
Innovating solutions every year
Preview: default and focus = right
Innovating solutions every year
Preview: default and width =
Innovating solutions every year
Preview: default and width = full
Innovating solutions every year
Preview: default and shadow =
Innovating solutions every year
Preview: default and shadow = true
Innovating solutions every year
Preview: default and collapse =
Innovating solutions every year
Preview: default and collapse = true
Innovating solutions every year
Preview: default and alwayson =
Innovating solutions every year
Preview: default and alwayson = true
Innovating solutions every year
Preview: Base level for noimage
Innovating solutions every year
Preview: noimage and theme =
Innovating solutions every year
Preview: noimage and theme = blue
Innovating solutions every year
Preview: noimage and theme = orange
Innovating solutions every year
Preview: noimage and theme = white
Innovating solutions every year
Preview: noimage and align =
Innovating solutions every year
Preview: noimage and align = top
Innovating solutions every year
Preview: noimage and align = bottom
Innovating solutions every year
Preview: noimage and align = left
Innovating solutions every year
Preview: noimage and align = right
Innovating solutions every year
Preview: noimage and align = top-left
Innovating solutions every year
Preview: noimage and align = top-right
Innovating solutions every year
Preview: noimage and align = bottom-left
Innovating solutions every year
Preview: noimage and align = bottom-right
Innovating solutions every year
Preview: noimage and focus =
Innovating solutions every year
Preview: noimage and focus = top
Innovating solutions every year
Preview: noimage and focus = bottom
Innovating solutions every year
Preview: noimage and focus = left
Innovating solutions every year
Preview: noimage and focus = right
Innovating solutions every year
Preview: noimage and width =
Innovating solutions every year
Preview: noimage and width = full
Innovating solutions every year
Preview: noimage and shadow =
Innovating solutions every year
Preview: noimage and shadow = true
Innovating solutions every year
Preview: noimage and collapse =
Innovating solutions every year
Preview: noimage and collapse = true
Innovating solutions every year
Preview: noimage and alwayson =
Innovating solutions every year
Preview: noimage and alwayson = true
Innovating solutions every year
Preview: Base level for video
Innovating solutions every year
Preview: video and theme =
Innovating solutions every year
Preview: video and theme = blue
Innovating solutions every year
Preview: video and theme = orange
Innovating solutions every year
Preview: video and theme = white
Innovating solutions every year
Preview: video and align =
Innovating solutions every year
Preview: video and align = top
Innovating solutions every year
Preview: video and align = bottom
Innovating solutions every year
Preview: video and align = left
Innovating solutions every year
Preview: video and align = right
Innovating solutions every year
Preview: video and align = top-left
Innovating solutions every year
Preview: video and align = top-right
Innovating solutions every year
Preview: video and align = bottom-left
Innovating solutions every year
Preview: video and align = bottom-right
Innovating solutions every year
Preview: video and focus =
Innovating solutions every year
Preview: video and focus = top
Innovating solutions every year
Preview: video and focus = bottom
Innovating solutions every year
Preview: video and focus = left
Innovating solutions every year
Preview: video and focus = right
Innovating solutions every year
Preview: video and width =
Innovating solutions every year
Preview: video and width = full
Innovating solutions every year
Preview: video and shadow =
Innovating solutions every year
Preview: video and shadow = true
Innovating solutions every year
Preview: video and collapse =
Innovating solutions every year
Preview: video and collapse = true
Innovating solutions every year
Preview: video and alwayson =
Innovating solutions every year
Preview: video and alwayson = true
Innovating solutions every year
Details
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.
Full Version: 1.0.0
Type: web component
Date Created: 10/22/2024
Version notes:
Github repository: https://github.com/web-illinois/ilw-hero/
Javascript file: https://cdn.toolkit.illinois.edu/ilw-hero/1.0.0/ilw-hero.js
CSS file: https://cdn.toolkit.illinois.edu/ilw-hero/1.0.0/ilw-hero.css
JSON information: ilw-hero.1.0.json