Web Implementation Guidelines Group Component Builder Information (v3+)

Component: Card 1.1

This builder will allow you to generate a custom version of the Card component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Attributes, Classes, and CSS Variables

(attribute)
Color theme used
(attribute)
Align text inside the card
(attribute)
Make the entire card clickable
(attribute)
Force image aspect ratio
(attribute)
Use a div tag instead of article
Custom CSS Variables and Styles (advanced use only)
Margin above cards [default: 0]
Margin below cards [default: 0]
Top padding around main content in the card [default: 2.5rem]
Right padding around main content in the card [default: 2rem]
Bottom padding around main content in the card [default: 2rem]
Left padding around main content in the card [default: 2rem]
Card text font size [default: 1.2rem]
Font size for a card's heading [default: 1.45em]
Limit for an icon's width [default: 120px]
Limit for an icon's height [default: 80px]
Color of the border around the card [default: var(--il-blue)]
CSS background for the card [default: var(--ilw-background--color)]
Color of the heading in the card [default: var(--il-orange)]
Color of an icon in the card [default: var(--ilw-text--color)]
Color of text in the card [default: var(--ilw-text--color)]
Color for links inside the card [default: var(--ilw-link--color)]
Focus and hover color for links inside the card [default: var(--ilw-link--focused-color)]
Visited link color for inside the card [default: var(--ilw-link--visited-color)]
Color of a clickable card heading [default: var(--ilw-card--heading-color)]
Font size for a clickable card heading [default: 1.34rem]
Background for the hover state of a clickable card [default: var(--il-blue)]
Color of the heading for the hover state of a clickable card [default: #fff]
Color of text for the hover state of a clickable card [default: #fff]
Color of the bottom wider border for the hover state of a clickable card [default: var(--il-industrial-lighter-1)]
Link color for links inside the hover state of a clickable card [default: var(--ilw-card--hover--text-color)]
Focus and hover color for links inside the hover state of a clickable card [default: var(--il-orange)]

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

A card component that can be used as a container for grouping information.

Full Version: 1.1.1

Type: web component

Date Created: 05/22/2025

Version notes:

Github repository: https://github.com/web-illinois/ilw-card/

Javascript file: https://cdn.toolkit.illinois.edu/ilw-card/1.1.1/ilw-card.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-card/1.1.1/ilw-card.css

JSON information: ilw-card.1.1.json

Web Implementation Guidelines Group Component Builder Information (v3+)

Note: this page is not using the toolkit because it is meant to test individual components in isolation.