Web Implementation Guidelines Group Component Builder Information (v3+)

Component: Hero 1.0-beta

This builder will allow you to generate a custom version of the Hero component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Attributes, Classes, and CSS Variables

(attribute)
Color theme used
(attribute)
Text alignment, defaults to center
(attribute)
Focus for the image, defaults to center
(attribute)
Whether or not this follows current borders or is full width
(attribute)
Whether or not to include a shadow
(attribute)
Whether or not to remove the image / background in mobile
(attribute)
Whether or not to drop the text in mobile
Custom CSS Variables and Styles (advanced use only)
Size of the hero image
Font for heading
Hex color for background
Text width for heading
Hex color for shadow in rgba format
Hex color for heading

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.

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.1-beta

Type: web component

Date Created: 10/08/2024

Version notes:

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

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

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

JSON information: ilw-hero.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.