UICards
A container that groups related content about one thing: an image, a title, text and an action.
A card is a self-contained block about one subject, such as a course, a person or a summary. Cards sit in a grid and let the eye jump from one to the next.
When to use it
Use it
- One subject and one main action per card.
- The same structure in every card of a group, so they can be compared.
- A header or footer only for metadata (status, date), not for the title.
Don't
- Put a card inside a card.
- Use a card for a long text or a form; use the page.
- Make the whole card a link and also put links inside it.
Anatomy
A box (card) with an optional image (card-img-top), header, body (card-body: card-title, card-text, actions), list and footer.
Variants and states
Quiz: linear equations
Closes on Friday at 18:00. You have two attempts.
This Moodle version has no dark mode: examples stay light.
With icons
An icon tile (dd-tile) at the top gives a card its identity. Use it for features, sections and entry points.
Courses
Create, copy and archive the courses of a category.
Participants
Enrol people, assign roles and review their activity.
Reports
Completion, grades and logs, ready to export.
This Moodle version has no dark mode: examples stay light.
Figures
A figure, its label and its trend, next to a tile. For dashboards and summaries.
This Moodle version has no dark mode: examples stay light.
Cards that are links
A card that leads somewhere (card-hover) lifts a little under the pointer and draws the focus ring around the whole card.
This Moodle version has no dark mode: examples stay light.
Mixing the parts
Badges, a progress bar, icons and a footer with actions in the same card: a course card and a card with a list.
Physics II
Waves, optics and thermodynamics with weekly labs.
This Moodle version has no dark mode: examples stay light.
Structure with a list
This Moodle version has no dark mode: examples stay light.
Horizontal
Physics II
Waves, optics and thermodynamics with weekly labs.
Updated 3 minutes ago
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Image × body × action | The classic card: image on top, title, two lines of text and one main action. |
| Icon tile × title × text | A feature or an entry point; no image needed. |
| Figure × trend | A number, what it counts and how it moves; the trend in success or danger colour. |
| Card + badges + progress | A course or a task: status as soft badges, progress as a bar, actions in the footer. |
| Card × link | The whole card is a link (card-hover), with no other links inside it. |
| Card + list | A card with a flush list group for a summary or a short list. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| A hairline border and a very soft shadow | The card separates from the page without the heavy outline that makes a page of cards look like a form. |
| A larger radius and more padding | It reads as a surface you can put things on; content never touches the edge. |
| The header and footer have no fill | They are metadata, so they do not compete with the title in the body. |
| Cards that are links lift and show one ring around the whole card | The user knows the whole card is the target and sees where the keyboard is. |
| Icons sit in a tile | The same piece is used in alerts, toasts, dialogs and cards, so an icon always means the same kind of thing. |
Classes
| Class | What it does |
|---|---|
card |
The box |
card-body, card-title, card-text |
Content |
card-header, card-footer |
Metadata above and below |
card-img-top |
Image at the top |
card-link |
Links in a row |
row g-0, col-md-* |
Horizontal layout |
card-hover |
A card that is a link: it lifts on hover and shows the focus ring (Didactika) |
card-flat |
A card without a shadow (Didactika) |
dd-tile, dd-tile-lg, dd-tile-round |
The icon tile, in other sizes and shapes (Didactika) |
dd-stat, dd-stat-value, dd-stat-label, dd-stat-trend |
A figure with its label and trend (Didactika) |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable. The gutter of the horizontal card is g-0.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The gutter of the horizontal card is no-gutters.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The gutter of the horizontal card is no-gutters.
Accessibility
- The title is a real heading of the right level.
- If the whole card is clickable, there is one link that covers it, not nested links.
- Images have alternative text or are marked decorative.