Links: ilw-card in Builder | Illinois Web Theme | Toolkit Development
A card component that can be used as a container for grouping information, reminiscent of a physical note or playing card.
By default, the card is a white box with a dark border, limited in width, showing the content inside of it. There are several variations:
- The top of the card can have an image using
slot="image", or an icon usingslot="icon". - The whole card can be made clickable using the attribute
clickable. - Text content can be centered using
align="center". - Color themes for
gray,blue,orange,blue-gradientandorange-gradient. For example,theme="blue". - The aspect ratio of the
imageandiconslots can be forced usingaspectRatio="16/9".
| Slot | Description |
|---|---|
slot="image" |
Placed full-width at the top of the card. |
slot="icon" |
Centered at the top of the card with ample spacing. |
slot="footer" |
Content remains at the bottom of the card when the card is stretched to fit a larger area. |
In order for themes and hover states to color icons correctly in a clickable card, the icon needs to be colorable using
currentColor.
CSS to apply this to the Illinois brand icons is already included,
as long as you include them as inline SVG rather than with an <img> tag.
With other icons, you may need to apply the change. For reference, here is the relevant CSS for the Illinois icons:
The card component overrides certain aspects of ilw-button and ilw-buttons elements to make them match
with the chosen theme, as well as hover states. The overrides only apply if there isn't a specific theme class
added to the buttons (eg. ilw-theme-orange).
For clickable cards, the CSS background animation is also removed, because it doesn't really work with the card transition.
ilw-card[clickable] path.cls-1 {
fill: currentColor;
}<ilw-card>
<h3>Student Life</h3>
<p>Animal sciences students extend their learning and career networks beyond the classroom. </p>
<ul class="ilw-buttons">
<li><a href="#">Learn More <span class="ilw-sr-only">About Student Life</span></a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</ilw-card><ilw-card>
<img src="https://picsum.photos/500/297" alt="" slot="image">
<h3>Student Life</h3>
<p>Animal sciences students extend their learning and career networks beyond the classroom. </p>
<p><a href="#" class="ilw-button">Learn More <span class="ilw-sr-only">About Student Life</span></a></p>
</ilw-card>A clickable card uses the first link found in the contents as the primary link to use for the whole card. When using this form, do not wrap the whole contents of the card in a link, that is done automatically.
A clickable card can have additional buttons or links that function as normal. Clicking the card outside of those will utilize the first link in the contents.
<ilw-card clickable>
<img src="https://picsum.photos/500/297" alt="" slot="image">
<h3>
<a href="#">Student Life</a>
</h3>
<p>Animal sciences students extend their learning and career networks beyond the classroom. </p>
<p><a href="#" class="ilw-button">Contact Us</a></p>
</ilw-card>- Make sure to use the correct heading level for the cards based on the rest of your page, if including a heading tag.
- Images and icons on cards should generally be decorative with an empty
alt=""attribute. If you do need an image that needs to be described, consider placing it below the heading. If it's at the top with an alt text, it may be confusing for screen readers if it comes before the title of the card. - Centered text can be harder to read, so avoid longer card text that's centered.
- Make sure links and buttons are descriptive, using
ilw-sr-onlyif needed to add context. For example:
<a href="#" class="ilw-button">Learn More <span class="ilw-sr-only">About Cards</span></a>Note that WCAG Label in Name specifies that the name and label must begin with the same words, so the hidden portion should be at the end.