Illinois web toolkit documentation

Version 2.7.3

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):

Clickable card example

Try it out

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

<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>

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