Clickable Card on Base Toolkit - 2.15 Beta Branch

Preview this component (Custom Element; v2.3.0; 9/29/2021)

Guidelines using the component

Student Life

Animal sciences students extend their learning and career networks beyond the classroom through internships, judging teams, student organizations, undergraduate research projects with our faculty, as well as short- and long-term study abroad opportunities all over the world.

Technical Information

The clickable card is going to eventually be merged into the card component. At this point, it will be depreciated.

For readability, this is inside a container that is restricted to 500px. This component will expand to fill the container it is in, and is usually placed in a flex or grid container.

Description

The Illinois Components Clickable Card gives a box containing an image and a freeform area for text. The image will be on top, and the text underneath. The entire card will be a link. Because of this, do not include links or buttons in the clickable card area.

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. If you want a card with multiple buttons, consider the Card (however, do not mix the Clickable Card and Card in the same section).

The image is optional.

Component Display

Change Your Content and Options

Template -- enter raw HTML here

Template Options

Important Classes

Color Theme

Classes

N/A

Attributes

Show depreciated attributes href (URL of where the clickable card goes to)Test linkwidth (Length of the component. If left blank, it will span the entire width of the container) src (URL of the image (depreciated))Test linkbackground (Background of the text (depreciated). Note that hovering or focusing will swap the color)

Advanced Options

These options are only to be used in advanced situations -- most of your needs should be met through the attributes and classes, and this breaks the intent of having a unified design.

Custom Style Tag before text

--il-clickable-card-margin (Margin)--il-clickable-card-image-filter (Hover/focus filter for the image (see https://developer.mozilla.org/en-US/docs/Web/CSS/filter))
--il-clickable-card-post (Chevron that signifies it is a post. SVG)

How to add it to your page

Copy and paste this in your page. Remember

Make sure you have updated your component to make sure the below code is completed.
Make sure you have the Header code in your header.

Note that this uses the custom style 'builder-custom'. You may need to change this if you are using multiple versions of this component with different styles.

Copied to clipboard