Basic Teaser Card
Teaser card component with eyebrow, heading, description, and primary/secondary actions for content promotion and user engagement
Basic Teaser Cards
Simple Basic Teaser Card
Basic teaser card with title, optional description, and button.
Basic Teaser Card with Secondary Link
Teaser card with primary button and secondary link for additional actions. On mobile, buttons stack vertically. On desktop, secondary link aligns to the right.
Layout Examples
Basic Teaser Grid Layout
Multiple teaser cards arranged in a responsive grid layout.
Responsive Button Behavior
Resize your browser window to see how the buttons adapt: stacked on mobile (< 768px), inline on desktop (≥ 768px).