Component

Clickable Card

Description

The Illinois Components Clickable Card gives a box containing an image and a freeform area for text, links, and buttons. The image will be on top, and the text underneath. The entire component will act as a link.

(If you want to use an icon instead of an image, you may want to consider Call to Action instead. If you want side by side image and text placement, look at Image Feature.)

What it looks like

Example image (version 2.6, Dec. 8, 2021):

Try it out

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

Recommended patterns

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

Code that will create a clickable card like the one above:

<il-clickable-card href="https://www.example.com" width="500px">
<img src="https://example.com/yourphoto.jpg" alt="Describe the photo if there is information in it" slot="image">
<h3 slot="header">Your headline</h3>
<p>Your content goes here</p>
</il-clickable-card>

Customizations and notes

Adding filters

• You can add a hover / focus filter on the image. See il-clickable-card-image-filter in the Syntax Guide below for details.

Changing background colors

The Clickable Card Component Builder preview demonstrates two ways of setting the background color of the text segment of the card.

• The default is to have the background white. This is accomplished by adding nothing or by using class="il-theme-white" .
• You can also make the background dark blue by using class="il-theme-blue".

Syntax guide

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

The default syntax:

<il-clickable-card>
Content goes here
</il-clickable-card>

Where to add elements:

<il-clickable-card href="https://www.example.com" width="500px">
 <img src="https://example.com/yourphoto.jpg" alt="Describe the photo if there is information in it" slot="image"> 
 <h3 slot="header">Your headline</h3> 
 <p>Your content goes here</p>
</il-clickable-card>

CSS options

il-theme-white or il-theme-blue

• Syntax:

<il-clickable-card href="https://www.example.com" width="500px" class="il-theme-blue">
(content)
</il-clickable-card>

• Theme values available:
  • il-theme-white
  • il-theme-blue

• Default value: If nothing else is specified, the background will be white.
• Required: No

il-clickable-card-image-filter

• Syntax:

<style>il-clickable-card.yourstylename { --il-clickable-card-image-filter: your filter here; --il-clickable-card-post: url('here.jpg'); }</style>
<il-clickable-card href="https://www.example.com" width="500px" class="yourstylename">
(content)
</il-clickable-card>

• Default value: If nothing else is specified, there will not be a filter.
• Required: No
• Details: See Mozilla’s CSS Filter documentation for available filter options.

il-clickable-card-post

• Syntax:

<style>il-clickable-card.yourchevronstyle { --il-clickable-card-post: url('/images/yourmark.svg'); }</style>
<il-clickable-card href="https://www.example.com" width="500px" class="yourchevronstyle">
<h3>Your header text here</h3>
(content)
</il-clickable-card>

• Default value: If nothing else is specified, the mark used at the end of a header to indicate that the card is clickable will be orange angle brackets.
• If you use this style: Put the URL to the image you would like to use in place of those angle brackets inside a custom style as displayed above. (SVG format is recommended for scalability.)  
• Required: No

About this component

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