Cards Example

Cards

Card Variations

The Responsive Slot Layout showcases five card variations, each demonstrating distinct layout behaviors:

Row 1 — Equal-height, text-only cards for a clean, uniform presentation.
Row 2 — Interactive tab-style cards with header images and truncated text.
Row 3 — Stacked header layout: title followed by an image inside the header.
Row 4 — Image positioned at the top of the body section for a push-up visual effect.
Row 5 — Images displayed in the footer using a cover-style fit for full-width visuals.

New to Cards?

Get up and running in 3 minutes with our Quick Start Guide!

All rows use data-same-size="true" to normalize card and header heights per row, ensuring balanced responsive layouts.

Rows 1 & 2 use data-tab-card="true" role="button" tabindex="0" makes each card keyboard-focusable like a tile. Can be applied to any card by applying code to class .card

Download RSL Example Pack

Row 1 — Text-only cards (equal height)

Layout:

header → body → footer (no images).

Behavior:

data-same-size="true" equalizes card height and header height across the row.
data-tab-card="true" role="button" tabindex="0" makes each card keyboard-focusable like a tile.
Use case: simple content tiles with consistent sizing.

Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempor volutpat enim, a fringilla ante blandit at. Sed nec commodo odio.

Footer 1

Card 2

Phasellus id magna id lorem pharetra bibendum. Nullam euismod mauris at venenatis vestibulum. Suspendisse elementum sapien vel sapien lacinia, ac imperdiet nunc eleifend.

Footer 2

Card 3

Etiam vitae felis ut est iaculis tristique. Integer vel dui nec mauris fermentum condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

Footer 3


                    
                        
                            
                                Card 1
                                
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempor volutpat enim, a fringilla ante blandit at. Sed nec commodo odio.
                                
                                Footer 1
                            
                        
                        
                            
                                Card 2
                                
                                    Phasellus id magna id lorem pharetra bibendum. Nullam euismod mauris at venenatis vestibulum. Suspendisse elementum sapien vel sapien lacinia, ac imperdiet nunc eleifend.
                                
                                Footer 2
                            
                        
                        
                            
                                Card 3
                                
                                    Etiam vitae felis ut est iaculis tristique. Integer vel dui nec mauris fermentum condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
                                
                                Footer 3

Row 2 — “Tab” cards with header image + truncation