Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components Card

Card

 Overview API Examples Style Tokens

The Card component is a container element that provides visual hierarchy through elevation, shadows, and borders.

Basic usage

The Card component serves as a visual container that groups related content, with configurable elevation and shadow effects.

Component anatomy

Elevation

The Card supports two elevation modes that can be configured using the elevation Input. The default 'raised' elevation applies shadow effects, while 'flat' removes shadows for a simpler appearance.

Shadow Size

When using raised elevation, you can control the shadow intensity through the shadowSize Input. Five sizes are available:

  • XS (default): Subtle elevation
  • SM: Light elevation
  • MD: Medium elevation
  • LG: Pronounced elevation
  • XL: Strong elevation

Border Radius

The Card features consistent border radius and border styling. All cards use a small radius defined in the design system tokens for visual consistency.

Negative Theme

For use on dark backgrounds, enable the negative theme variant using the negative Input. This adjusts the card's background, border colors, and focus indicators for proper contrast.

Accessibility

Focus Management

The Card implements proper focus handling with:

  • Visible focus indicators in keyboard navigation mode
  • Focus ring styling adapted to theme (positive/negative)
  • Proper contrast for focus indicators

Color Contrast

The component ensures proper contrast ratios:

  • Between card background and content
  • Between border and background
  • In both default and negative themes

Best Practices for Developers

  1. Content Structure DEMO HERE

  2. Interactive Usage DEMO HERE

  3. Shadow Guidelines DEMO HERE

Previous
Calendar
Next
Carousel