Card on Base Toolkit - Version 2.12
Preview this component (Custom Element; v2.9.0; 6/23/2022)
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.
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.
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
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 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.
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 that acts as a link, consider the Clickable 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
Important Classes
Classes
N/A
Attributes
N/A
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
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.