Component

Hero Image

Description

The Hero Image component adds a large picture at the top of the page.

What it looks like

Example image (Dec. 8, 2021, v. 2.4):

Try it out

• Hero Image Component Builder: To see how it works with your own content and images
• Hero Image Preview: To see all the possible color and alignment variations
• Dev Codepen for Hero Image: To experiment with all the code

Sample patterns

(In the examples below, replace bolded elements with your own content.)

This code will create an image feature like the screen shot above, with left image alignment, a blue gradient background, and two buttons:

Headline

• • Link

<il-hero background="https://picsum.photos/1920/1280">
<h1>Headline</h1>
<ul>
  <li>
    <a href="#">Link</a>
  </li>
</ul>
</il-hero>

Customizations and notes

Theme colors and alignment options

• 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.
• Advanced options (with a more expansive palette and individual element settings) are detailed in the Syntax Guide below. 

Syntax Guide

(In the examples below, replace elements in bold with your own content.)

The default syntax:

<il-hero background="your image URL">
<h1>Headline</h1>
</il-hero>

The required elements in this syntax are:

• <il-hero></il-hero> enclosing at least an H1 headline (a list of links are optional)
• background="your image URL"> to identify the image which should be used in the hero position

Basic options

Vertical and horizontal alignment

• Syntax:

<il-hero background="your image URL" class="il-align-(vertical direction) il-align-(horizontal direction)">
<h1>Headline goes here</h1>
</il-image-feature>

• Default value: If an alignment is not specified, the positioning will default to il-align-center in both directions.
• Required: No
• Details: There are three options for both vertical and horizontal positioning.
  • il-align-top, il-align-center, and il-align-bottom: These options describe where your objects will be placed on a vertical axis.
  • il-align-left, il-align-center, and il-align-right: These options describe where your objects will be placed on a horizontal axis.

Button links

• Syntax:

<il-hero background="your image URL">
<h1>Headline</h1>
<ul>
   <li><a href="your link URL">Link text</a></li>
</ul>
</il-hero>

• Default value: None.
• Required: No
• Details: Use <a href> tags within <li> items in an unordered list if you want to create buttons with links inside the <il-hero> component.

il-theme-blue (or orange)

• Syntax:

<il-hero background="your image URL" class="il-theme-(color)">
<h1>Headline goes here</h1>
</il-image-feature>

• Color values available:
  • il-theme-blue (Buttons will be orange)
  • il-theme-orange (Buttons will be blue)

• Default value: If nothing else is specified, the default will be il-theme-blue.
• Required: No

Advanced options

Coloring individual elements with custom style variables

• Syntax:

<style>il-hero.builder-custom { 
--il-hero-background-color: var(--il-colorname); 
--il-hero-button-background-color: var(--il-colorname); 
--il-hero-button-foreground-color: var(--il-colorname); 
--il-hero-button-border-color: var(--il-colorname); 
}</style>

<il-hero class="builder-custom">
<h1>Headline</h1>
</il-hero>

• Default value: If custom styles are not specified, the color selection for all elements will be based on the il-theme-blue theme (with a dark blue background wherever the image isn’t displayed and orange buttons with white text if you use a link list).
• Required: No
• Details: You can individually color the background and each element of the buttons using custom styles. See the Hero Image Component Builder’s Advanced section for a listing of the available colors for these elements.
  
  Options include:
  • –il-hero-background-color: The background for any hero area not covered by the image
  • –il-hero-button-background-color: The non-text area of a button
  • –il-hero-button-foreground-color: The text area of a button
  • –il-hero-button-border-color: The outline of a button
  • –il-hero-focused-button-background-color: The non-text area of a button with keyboard or mouse focus
  • –il-hero-focused-button-foreground-color: The text area of a button with keyboard or mouse focus
  • –il-hero-focused-button-border-color: The outline of a button with keyboard or mouse focus

Positioning individual elements with custom style variables

• Syntax:

<style>il-hero.builder-custom { 
--il-hero-align-items: top; 
--il-hero-justify-content: flex-start; 
--il-hero-text-align: right; 
--il-hero-margin-left: 0; 
--il-hero-margin-right: 0;
}</style>

<il-hero class="builder-custom">
<h1>Headline</h1>
</il-hero>

• Default value: If custom styles are not specified, the position selection for all elements will be vertically and horizontally centered.
• Required: No
• Details: You can position the text items and the non-text items like buttons separately with the following custom styles.
  
  Options include:
  • –il-hero-align-items: Custom alignment of non-text items. Options include top, center, and left. 
  • –il-hero-text-align: Custom alignment of text items. Options include left, center, and right.
  • –il-hero-justify-content: Custom text justification. Options include flex-left, center, and flex-right.
  • –il-hero-margin-left: Options include auto, 0, or a number. 
  • –il-hero-margin-right: Options include auto, 0, or a number.

About this component

• Type: Custom Element
• Introduced in: v2.3.0; 9/29/2021
• Deprecated?: No