Examples

Responsive Card Layouts

Let cardLayoutBreakpoints choose compact or full card layouts from the available timeline height.

Height breakpoints and responsive baseline distance

cardLayoutBreakpoints defaultCardLayout layoutStyles distanceToBaseline.responsive

Change the demo height to see the same articles redraw with a different card layout. Compact and medium heights use landscape cards so rows fit inside the timeline; the tall height has enough room for portrait cards. Each resize also runs fitToHeight(true) so the rows are restacked for the new height.

Each layout has its own subtitle styling: landscape cards use dark text on a transparent background, while portrait cards use a filled subtitle band. These overrides live in layoutStyles.

{}