List Groups & Cards

List Groups

  • Dashboard Overview
  • User Management
  • Analytics Reports
  • Billing & Invoices
  • Account Settings

List Groups - Badges

  • New Messages 14

List Groups - Linked

List Groups - Disable

  • A disabled item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

List Groups - Flush

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one

List Groups - Numbered

  1. Design & Prototyping
  2. Development & Testing
  3. Launch & Deployment

List Groups - Custom Content

  1. Subheading
    Responsive layouts
    14
  2. Subheading
    Ready-to-use UI blocks
    14
  3. Subheading
    Pre-built page designs
    14

List Groups - Checkboxes

List Groups - Radios

Contextual classes

  • Task completed successfully
  • System update available
  • Pending approval required
  • Action needed immediately

Custom Contents

Card

Basic card example

Card with heading

Card Heading without title

Cards in Canvas are versatile containers for displaying grouped content, images, and actions in a clean, consistent format across your site pages.

Card Heading

Card Title

Use card headings and titles to group related content, highlight key information, and guide visitors through structured, well-organized page layouts.

Card with footer

Card content

Contextual alternatives

Card Title

Card content

Card Title

Card content

Card Title

Card content

Card Title

Card content

Card Title

Card content

Card with Tables

Card Heading

Cards can embed tables to present structured data alongside summary content, making it simple to display user records, billing info, and analytics in context.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Card Heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Card with List Groups

Card Heading

Combine card bodies with flush list groups to present summary text alongside itemized details, creating rich, scannable content containers across your layout.

  • Customizable layouts
  • Bootstrap 5 powered
  • Retina-ready images
  • SEO-optimized markup
  • Cross-browser support

Cards with Navigation

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Explore more Elements