Cards

3-Minute Setup

1 Include Files (Add to `<head>`)

2 Include JavaScript (Add before `</body>`)

3 Create Your First Card



    
        
            
                Card Title
            
            
                Your content here...
            
            Footer content

✓ Done! Your card is now responsive and will match heights with other cards in the same row when using data-same-size="true".

5 Card Layout Patterns

1. Text-Only Equal-Height Cards

Perfect for feature lists, service offerings, or pricing tiers



    
        Feature Name
    
    
        Description of the feature...
    
    Learn More →

2. Cards with Header Images

Great for team members, products, or portfolio items

3. Image in Card Body (Push-Up Effect)

Creates visual interest with the image appearing to "lift" into the header area

4. Image in Footer (Cover Style)

Display full-width images at the bottom with cover styling

5. Interactive Tab-Style Cards

Make cards keyboard-focusable and clickable for navigation

Quick Reference

Data Attributes

Attribute	Purpose	Applied To
`data-same-size="true"`	Equalizes card and header heights per row	`.card`
`data-tab-card="true"`	Makes card keyboard-focusable like a button	`.card`
`data-truncate-lines="N"`	Limits text to N lines with ellipsis	`.card-body`
`role="button"`	Screen reader support for interactive cards	`.card` (with data-tab-card)
`tabindex="0"`	Adds card to keyboard tab order	`.card` (with data-tab-card)

CSS Classes

Class	Purpose
`.card`	Main card container
`.card-header`	Card header section
`.card-title`	Card title/heading
`.card-body`	Main content area
`.card-footer`	Footer section
`.img-wrapper`	Container for images
`.card-img`	Image element styling
`.push-img-top`	Creates push-up image effect
`.img-cover`	Full-width cover-style images

Pro Tips

✨ Tip 1: Use data-same-size="true" on all cards in a row for consistent, professional-looking layouts

✨ Tip 2: Combine data-truncate-lines with equal-height cards to maintain visual consistency

✨ Tip 3: Add data-tab-card="true" for product grids or navigation cards to improve keyboard accessibility

✨ Tip 4: Always include alt attributes on images for accessibility

✨ Tip 5: Use helper classes like .rsl-bg-info for colored card variants

Troubleshooting

Cards Not Equal Height?

Check: data-same-size="true" is on each .card element
Check: cards.js is loaded after layout.js
Check: All cards are in the same .slot-layout row

Text Not Truncating?

Check: data-truncate-lines="N" is on .card-body
Check: Content is wrapped in a <p> or similar block element

Tab-Cards Not Focusable?

Ensure: data-tab-card="true", role="button", and tabindex="0" are all present

ADA Compliance Features

RSL Cards include built-in accessibility:

✅ Tab navigation through interactive cards with data-tab-card="true"
✅ Proper ARIA roles for button-style cards
✅ Keyboard-only navigation supported
✅ Screen reader-friendly with semantic HTML
✅ Links inside cards maintain natural tab order

Next Steps

See It In Action

Open cards.html in your browser

Copy Examples

Use playground.html as a template

Mix & Match

Combine different card patterns for unique layouts

JSON Layout API Integration

The Cards component is fully compatible with RSL's JSON Layout API, enabling declarative card layouts with automatic height equalization through JavaScript configuration. Cards automatically initialize after rendering via RSL.JSONLayout.renderLayout().

✅ Automatic Initialization: When you render a layout containing .card[data-same-size="true"] elements using the JSON API, the card height equalizer automatically initializes without manual setup.


// Create card grid with JSON API
const config = {
  version: 1,
  layoutId: "card-grid",
  breakpoints: { xs: 1, sm: 2, md: 3 },
  items: [
    {
      id: "card-1",
      attributes: {
        "class": "card",
        "data-same-size": "true"
      },
      content: {
        type: "html",
        value: `
          <div class="card-header">Product Title</div>
          <div class="card-body">
            <p>Product description here.</p>
          </div>
        `
      }
    },
    {
      id: "card-2",
      attributes: {
        "class": "card",
        "data-same-size": "true"
      },
      content: {
        type: "html",
        value: `
          <img class="card-img" data-img-src="image.jpg" alt="Product">
          <div class="card-header">Another Product</div>
          <div class="card-body">
            <p>Longer description with more text.</p>
            <p>Cards will equalize heights automatically.</p>
          </div>
        `
      }
    }
  ]
};

RSL.JSONLayout.renderLayout('#container', config);
// Cards are now equalized - no manual init() needed!

📚 Want More Examples? Check out the Cards JSON API Examples page for:

Basic card grids with equal heights
Cards with lazy-loaded images
Mixed content with varying heights
Multiple independent card grids on one page

How It Works

The Cards component uses a container-based approach:

Automatic Scanning: RSL.Cards.init() scans all .slot-layout containers for cards with data-same-size="true"
Row Detection: Groups cards by their vertical position (offsetTop) to identify rows
Height Equalization: Sets all cards in each row to match the tallest card's height
Header Alignment: Independently equalizes card headers within each row
Image Loading: Waits for all images with data-img-src to load before final adjustment

Public API

Method	Description
`RSL.Cards.init()`	Initialize all card equalizers on the page (auto-called by JSON API)
`RSL.Cards.create(container)`	Create card equalizer for specific container element
`RSL.Cards.equalize(container)`	Manually trigger height equalization for a container
`RSL.Cards.reset()`	Reset all card heights to auto
`RSL.Cards.instances`	Map of initialized container instances
`RSL.Cards.initFilterBus()`	Initialize FilterBus subscriptions for all cards
`RSL.Cards.destroyFilterBus(card)`	Destroy FilterBus subscription for a specific card
`RSL.Cards.filterSubscriptions`	Map of FilterBus subscriptions for cleanup

FilterBus Integration

The Cards component integrates with RSL's FilterBus for reactive filtering. Cards can subscribe to FilterBus state changes and automatically show/hide based on filter selections.

✅ Automatic Initialization: FilterBus subscriptions are automatically set up when RSL.Cards.init() is called. Cards with data-filter-subscribe attributes will respond to filter changes immediately.

FilterBus Data Attributes

Attribute	Purpose	Example
`data-filter-subscribe`	FilterBus key to listen to	`data-filter-subscribe="category"`
`data-filter-value`	Value(s) this card matches (comma-separated for multiple)	`data-filter-value="tech,design"`

Basic Usage


<!-- Cards that respond to FilterBus state -->
<div class="slot-layout" data-cols-md="3">
    <div class="slot-item">
        <div class="card" data-filter-subscribe="category" data-filter-value="tech">
            <div class="card-header">Tech Card</div>
            <div class="card-body">Shows when category="tech" or "all"</div>
        </div>
    </div>
    <div class="slot-item">
        <div class="card" data-filter-subscribe="category" data-filter-value="design">
            <div class="card-header">Design Card</div>
            <div class="card-body">Shows when category="design" or "all"</div>
        </div>
    </div>
    <div class="slot-item">
        <div class="card" data-filter-subscribe="category" data-filter-value="tech,design">
            <div class="card-header">Tech & Design Card</div>
            <div class="card-body">Shows for tech OR design OR all</div>
        </div>
    </div>
</div>

<!-- Filter control (publishes to FilterBus) -->
<select data-filter-publish="category">
    <option value="all">All Categories</option>
    <option value="tech">Technology</option>
    <option value="design">Design</option>
</select>

CSS Classes for Visibility

Class	Purpose
`.card-filterbus-hidden`	Applied when card should be hidden (set by FilterBus)
`.card-filterbus-initialized`	Applied after FilterBus subscription is set up (enables transitions)

Events

Event	Detail	Description
`rsl-card:filterbus-update`	`{ state: Object, visible: Boolean }`	Fired when FilterBus updates card visibility

📚 See it in action: Check out the FilterBus Demo Page for a complete example with Cards, Smart Tables, Charts, and Galleries all responding to the same filters.

Date Range Filtering

Cards can be filtered by date range when connected to a Date Picker via FilterBus. Add data-filterbus-date-field to the container and data-date to each card to enable date filtering.

How It Works

Add data-filterbus-date-field="date" to the container (e.g., slot-layout)
Add data-date="YYYY-MM-DD" to each card element
Connect a Date Picker that publishes to FilterBus
Cards automatically show/hide based on selected date range

Date Filter Attributes

Attribute	Applied To	Description
`data-filterbus-date-field`	Container	Specifies the data attribute on cards containing dates (e.g., "date" looks for `data-date`)
`data-date`	Card	The date value for this card. Supports ISO (YYYY-MM-DD), US (MM/DD/YYYY), and European (DD.MM.YYYY) formats.

<!-- Date Picker publishes to FilterBus -->
<input type="text"
       data-rsl-date-picker
       data-mode="range"
       data-filterbus-publish="dateFilter">

<!-- Container with date field attribute -->
<div class="slot-layout" data-filterbus-date-field="date">
    <div class="slot-item">
        <div class="card" data-date="2025-12-02">
            <div class="card-header">Q4 Report</div>
            <div class="card-body">Dec 2, 2025</div>
        </div>
    </div>
    <div class="slot-item">
        <div class="card" data-date="2025-12-15">
            <div class="card-header">Holiday Sales</div>
            <div class="card-body">Dec 15, 2025</div>
        </div>
    </div>
</div>

CSS Classes

Class	Description
`.card-date-hidden`	Applied when card is outside the selected date range. Uses `display: none`.

Events

Event	Detail	Description
`rsl-cards:date-filter`	`{ dateFilter, totalCards, visibleCards }`	Fired on the container when date filter is applied

3-Minute Setup

1 Include Files (Add to <head>)

2 Include JavaScript (Add before </body>)

3 Create Your First Card

5 Card Layout Patterns

1. Text-Only Equal-Height Cards

2. Cards with Header Images

3. Image in Card Body (Push-Up Effect)

4. Image in Footer (Cover Style)

5. Interactive Tab-Style Cards

Quick Reference

Data Attributes

CSS Classes

Pro Tips

Troubleshooting

Cards Not Equal Height?

Text Not Truncating?

Tab-Cards Not Focusable?

ADA Compliance Features

Next Steps

See It In Action

Copy Examples

Mix & Match

JSON Layout API Integration

How It Works

Public API

FilterBus Integration

FilterBus Data Attributes

Basic Usage

CSS Classes for Visibility

Events

Date Range Filtering

How It Works

Date Filter Attributes

CSS Classes

Events

1 Include Files (Add to `<head>`)

2 Include JavaScript (Add before `</body>`)