Illinois web toolkit documentation

Version 2.7.3

Component

Image Feature

Contents

Description 

 The Image Feature component adds a picture on one side and text with a background on the other side. You can designate which side holds the picture and which of the themed color choices is behind the text. Image Features can be helpful for putting a spotlight on popular topics, news items, and other “featured” items.

What it looks like 

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

Image Feature with photo on left and content on the right over a blue background

Try it out 

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

Your headline here

Your content. Links are allowed in the content.

So are buttons.
Another button.

 

<il-image-feature>
<img slot="image" src="https://picsum.photos/1920/800">
<h3>Your headline here</h3>
<p>Your content. <a href="#">Links are allowed</a> in the content.</p>
<p><a href="#" class="il-button">So are buttons.</a><br>
<a href="#" class="il-button">Another button.</a></p>
</il-image-feature>

Customizations and notes 

Theme colors and alignment

  • By default, the il-blue theme is used. In the regular mode, this produces a blue gradient. In the overlay, it produces a solid dark blue. The text will be white. 
  • The il-orange theme also produces an orange gradient in regular mode and a solid orange in overlay mode. The text will be white in some places and black in others because white text on orange backgrounds is often not high enough contrast for accessibility needs.
  • The il-white theme produces a white background with dark blue text.
  • The alignment meaning changes based upon your mode.
    • In regular mode, align=”left” places the image on the left and the text on the right.
    • In overlay mode, align=”left” places the text inset on the left and most of the image on the right. 
    • align=”left” is the default behavior. 

Overlay options

  • By default, the text is presented side by side with the image.
  • The il-overlay class places the text on top of the image, which will stretch to fit the available space.
  • The overlay options provide some advanced CSS-based options which don’t apply to regular mode, including the ability to control the overlay width, opacity, and padding. See the Syntax Guide for more details.

Your headline here

Your content here.

In the header:

<style>il-image-feature.builder-custom 
{ --il-image-feature-with-overlay-width: 50%; 
--il-image-feature-with-overlay-background: var(--il-alma-mater); 
--il-image-feature-with-overlay-background-solid: white; 
--il-image-feature-with-overlay-padding: 3rem; }</style>

In the body:
<il-image-feature align="left" class="il-overlay builder-custom">
<img slot="image" src="https://picsum.photos/1920/800">
<h3>Your headline here</h3>
<p>Your content here.</p>
</il-image-feature>

Syntax guide 

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

The default syntax: 

<il-image-feature>
<img slot="image" src="https://picsum.photos/1920/800">
<h3>Your headline here</h3>
<p>Your content here.</p>
</il-image-feature>

The required elements in this syntax are:

  • <il-image-feature></il-image-feature> enclosing a picture and some content
  • <img slot="image"> to identify the image which should be featured

CSS options 

il-align-left or il-align-right

  • Syntax:
<il-image-feature class="il-align-(direction)">
Content goes here
</il-image-feature> 
  • Default value: If an alignment is not specified, the positioning will default to il-align-left. 
  • Required: No
  • Details: The meaning of the direction changes based on whether you’re also using the il-overlay class or not.
    • il-align-left, no overlay: The image is on the left and the text is on the right.
    • il-align-left with il-overlay: The text is on the left and the image is more visible on the right.
    • il-align-right, no overlay: The image is on the right and the text is on the left.
    • il-align-right and il-overlay: The text is on the right and the image is mostly visible on the left.

il-theme-orange (or white or blue)

  • Syntax:

<il-image-feature class="color value">
(content)
</il-image-feature> 

  • Color values available: 
    • il-theme-blue
    • il-theme-white
    • il-theme-orange 

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

il-overlay

  • Syntax:

<il-image-feature class="il-overlay">
Content goes here
</il-image-feature> 

  • Default value: If il-overlay is not specified, the image will be side by side with the content. 
  • Required: No

Options that only apply when il-overlay is in use:

–il-image-feature-with-overlay-background

  • Syntax:

<style>il-image-feature.builder-custom { 
 --il-image-feature-with-overlay-background: var(--il-blue); 
}</style>
<il-image-feature class="il-overlay il-image-feature.builder-custom">
Content goes here
</il-image-feature> 

  • Default value: If another color or theme is not specified, the background will default to the il-theme-blue color. 
  • Required: No 
  • Details: Visit the Component Builder’s Advanced Features section to see a full list of the Illinois branded colors available for this style.

–il-image-feature-with-overlay-background-solid

  • Syntax:

<style>il-image-feature.builder-custom { 
 --il-image-feature-with-overlay-background-solid: var(--il-blue-lighter-4); 
}</style>
<il-image-feature class="il-overlay il-image-feature.builder-custom">
Content goes here
</il-image-feature> 

  • Default value: If another color or theme is not specified, the background will default to the il-theme-blue color.
  • Required: No 
  • Details: Visit the Component Builder’s Advanced Features section to see a full list of the Illinois branded colors available for this style.

–il-image-feature-with-overlay-padding

  • Syntax:

<style>il-image-feature.builder-custom {
 --il-image-feature-with-overlay-padding: 3rem; 
}</style>
<il-image-feature class="il-overlay il-align-left builder-custom">
Content goes here
</il-image-feature> 

  • Default value: If another rem value is not specified, the padding will default to about 2 rem.
  • Required: No 
  • Details: Specify your desired padding in rem units.

–il-image-feature-with-overlay-width

  • Syntax:

<style>il-image-feature.builder-custom { 
--il-image-feature-with-overlay-width: 50%;
}</style>
<il-image-feature class="il-overlay il-image-feature.builder-custom">
Content goes here
</il-image-feature> 

  • Default value: If a percentage is not specified, the il-image-feature overlay will take about a third of the available space. 
  • Required: No 
  • Details: Specify your desired size as a percentage of the available space.

About this component 

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