Hero Image on Base Toolkit - Version 2.9
Preview this component (Custom Element; v2.0.0; 7/12/2021)
Guidelines using the component
Technical Information
The hero component uses both attributes and slots for images. Please use the slots; the attributes are not as flexible and are depreciated.
Description
The Hero Image component adds a large picture at the top of the page.
Customizations and notes
- By default, the il-theme-blue theme is used. Any exposed background area would be blue, and the buttons would be orange.
- The il-theme-orange theme would have an orange background with blue buttons.
- Horizontal and vertical alignments are separately available.
-
il-align-center is the default behavior for both. -
Vertical: Choose between top, center, and bottom options. -
Horizontal: Choose between left, center, and right options.
Accessibility
This will most likely be the title of the page, so the headline should be wrapped in an <h1>.
Component Display
Change Your Content and Options
Template -- enter raw HTML here
Important Classes
Classes
Attributes
Advanced Options
These options are only to be used in advanced situations -- most of your needs should be met through the attributes and classes, and this breaks the intent of having a unified design.
Custom Style Tag before text
How to add it to your page
Copy and paste this in your page. Remember
- Make sure you have updated your component to make sure the below code is completed.
- Make sure you have the Header code in your header.
Note that this uses the custom style 'builder-custom'. You may need to change this if you are using multiple versions of this component with different styles.