Component

Page Title

Description 

 The Illinois theme component il-page-title provides a background image and gradient overlay options for the text of the title of a particular web page. 

What it looks like 

Example image (version 2.4, Dec. 8, 2021) 

Try it out 

• Component Builder (to see how it works with your own content and images) 
• Dev Codepen (to experiment with all the code)

Sample patterns 

By default

This is how the page title looks on a randomly selected background image. (Note that if you reload this page, a different background image will be selected from Picsum.) If nothing else is specified, the default color settings of a blue text background are chosen.

(Replace elements in bold with your own content.)

<il-page-title>
<img slot="background" src="https://picsum.photos/1200/300" alt="">
<h1>Page Title</h1>
</il-page-title>

Changing text color and text background color

You can use CSS styles to adjust the color of the text and of the background color underlaying the text. This example presents blue text on a white text background. (See CSS Options below for the range of potential values.)

<style>il-page-title.builder-custom { --il-page-title-text-color: var(--il-blue) !important; --il-page-title-background-color: white !important; }</style>
<il-page-title class="builder-custom">
<img slot="background" src="https://picsum.photos/1200/300" alt="">
<h1>Page Title</h1>
</il-page-title>

CSS options 

Color options

• Syntax: <a class=”il-button il-color value“> or <button class=”il-button il-color value>  

• Theme-level color values available: 
  • il-theme-blue – Blue border and white text
  • il-theme-orange – Orange border and white text
  • il-theme-white – White border and blue text

• Page title text color and background color values available (controlled with –il-page-title-text-color and –il-page-title-background-color. See Color Theme and Advanced Options settings in the Component Builder for visual previews.)
  • white
  • black
  • il-orange
  • il-orange-darker-1
  • il-orange-darker-2
  • il-orange-lighter-1
  • il-orange-lighter-2
  • il-orange-lighter-3
  • il-orange-lighter-4
  • il-altgeld
  • il-blue
  • il-blue-darker-1
  • il-blue-darker-2
  • il-blue-lighter-1
  • il-blue-lighter-2
  • il-blue-lighter-3
  • il-blue-lighter-4
  • il-alma-mater
  • il-alma-mater-1
  • il-alma-mater-2
  • il-alma-mater-3
  • il-industrial-blue
  • il-industrial-blue-darker-1
  • il-industrial-blue-darker-2
  • il-industrial-blue-lighter-1
  • il-industrial-blue-lighter-2
  • il-industrial-blue-lighter-3
  • il-industrial-blue-lighter-4
  • il-industrial-blue-1
  • il-industrial-blue-2
  • il-industrial-blue-3
  • il-arches-blue
  • il-arches-blue-darker-1
  • il-arches-blue-darker-2
  • il-arches-blue-lighter-1
  • il-arches-blue-lighter-2
  • il-arches-blue-lighter-3
  • il-arches-blue-lighter-4
  • il-arches-blue-1
  • il-arches-blue-2
  • il-arches-blue-3
  • il-cloud
  • il-cloud-1
  • il-cloud-2
  • il-cloud-3
  • il-gray-1
  • il-gray-2
  • il-heritage-orange
  • il-heritage-orange-1
  • il-heritage-orange-2
  • il-heritage-orange-3
  • il-harvest
  • il-harvest-darker-1
  • il-harvest-darker-2
  • il-harvest-lighter-1
  • il-harvest-lighter-2
  • il-harvest-lighter-3
  • il-harvest-lighter-4
  • il-patina
  • il-patina-darker-1
  • il-patina-darker-2
  • il-patina-lighter-1
  • il-patina-lighter-2
  • il-patina-lighter-3
  • il-patina-lighter-4
  • il-storm
  • il-storm-darker-1
  • il-storm-darker-2
  • il-storm-lighter-1
  • il-storm-lighter-2
  • il-storm-lighter-3
  • il-storm-lighter-4
  • il-base-25

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

About this component 

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