CardList
A vertical layout system for displaying content cards with dates and customizable action links
A vertical card layout component for organizing content with date circles and navigation.
Overview
The CardList component provides a vertical layout for displaying text-based cards with date circles, customizable action links, animated arrows, and a "View all" navigation link.
API Reference
CardList
The root container component that manages vertical layout with fixed spacing.
- heading:
Snippet- Title content snippet for custom heading levels (optional) - viewAllText:
string- Text for "view all" link (optional, button hidden if not provided) - viewAllHref:
string- URL for "view all" link (default: "#") - viewAllTarget:
string- Target for "view all" link (optional, e.g., "_blank") - viewAllAriaLabel:
string- Custom aria-label for "view all" link (optional, uses visible text if not provided)
CardList.Card
Individual text-based card component with customizable action link.
- date:
Date- Date object to display in circle - showYear:
boolean- Show year format ("Dec 19" / "2025") instead of default ("Dec" / "19") (default: false) - circleSize:
'sm' | 'md' | 'lg'- Circle size with proportional text scaling (default: 'sm') - linkText:
string- Text for the action link (default: 'Read more') - locale:
string- BCP 47 locale tag for date formatting (e.g.'he-IL','en-US'). When omitted the component readsdocument.documentElement.langautomatically, so pages that setlang="he-IL"on the<html>element require no extra configuration. - href: Link URL
- target: Link target attribute
- rel: Link relationship attribute
RTL support
The circle position and content spacing respond automatically to dir="rtl" set on the <html> element or any ancestor. No extra configuration is needed. Pages targeting RTL languages such as Hebrew set dir="rtl" on <html> and the layout adjusts accordingly.
Default Format
Default date format shows 3-letter month on top and day below.
<CardList viewAllText="View all press releases" viewAllHref="#" viewAllTarget="_blank" viewAllAriaLabel="Navigate to all press releases page">
{#snippet heading()}
<h2>Press releases</h2>
{/snippet}
<CardList.Card date={new Date('2025-05-27')} href="#" target="_blank" rel="noreferrer">
{#snippet children()}
<p>Discover how our latest research is transforming the future of medicine and improving patient outcomes worldwide.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} href="#" target="_blank" rel="noreferrer">
{#snippet children()}
<p>Learn about our global initiatives to make life-saving medications more accessible to communities in need.</p>
{/snippet}
</CardList.Card>
</CardList>Year Format
With showYear=true, displays "Month Day" on top and year below.
Events
Explore stories from our team members about finding meaning and connection in their work at Teva.
Explore stories from our team members about finding meaning and connection in their work at Teva.
Explore stories from our team members about finding meaning and connection in their work at Teva.
<CardList viewAllText="View all events" viewAllHref="#" viewAllAriaLabel="See all upcoming events">
{#snippet heading()}
<h2>Events</h2>
{/snippet}
<CardList.Card date={new Date('2025-05-27')} showYear={true} href="#">
{#snippet children()}
<p>Explore stories from our team members about finding meaning and connection in their work at Teva.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} showYear={true} circleSize="md" href="#">
{#snippet children()}
<p>Explore stories from our team members about finding meaning and connection in their work at Teva.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} showYear={true} circleSize="lg" href="#">
{#snippet children()}
<p>Explore stories from our team members about finding meaning and connection in their work at Teva.</p>
{/snippet}
</CardList.Card>
</CardList>Circle Sizes (default is sm)
Medium (md) circle size with scaled text.
Circle Size Examples
Small circle size example. This demonstrates the Small circle size with proportionally scaled text that maintains visual balance.
Small circle size example. This demonstrates the Small circle size with proportionally scaled text that maintains visual balance.
Medium circle size example. This demonstrates the medium circle size with proportionally scaled text that maintains visual balance.
Medium circle size example. This demonstrates the medium circle size with proportionally scaled text that maintains visual balance.
Large circle size example. This demonstrates the Large circle size with proportionally scaled text that maintains visual balance.
Large circle size example. This demonstrates the Large circle size with proportionally scaled text that maintains visual balance.
<CardList>
{#snippet heading()}
<h3>Circle Size Examples</h3>
{/snippet}
<CardList.Card date={new Date('2025-05-27')} href="#">
{#snippet children()}
<p>Small circle size example. This demonstrates the Small circle size with proportionally scaled text that maintains visual balance.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} href="#">
{#snippet children()}
<p>Small circle size example. This demonstrates the Small circle size with proportionally scaled text that maintains visual balance.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} circleSize="md" href="#">
{#snippet children()}
<p>Medium circle size example. This demonstrates the medium circle size with proportionally scaled text that maintains visual balance.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} circleSize="md" href="#">
{#snippet children()}
<p>Medium circle size example. This demonstrates the medium circle size with proportionally scaled text that maintains visual balance.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} circleSize="lg" href="#">
{#snippet children()}
<p>Large circle size example. This demonstrates the Large circle size with proportionally scaled text that maintains visual balance.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} circleSize="lg" href="#">
{#snippet children()}
<p>Large circle size example. This demonstrates the Large circle size with proportionally scaled text that maintains visual balance.</p>
{/snippet}
</CardList.Card>
</CardList>RTL & Localisation
The card automatically reads the page language from document.documentElement.lang and formats the date accordingly.
The circle position responds to dir="rtl" on any ancestor element.
Use the locale prop to override the language explicitly (useful for testing or when the page hosts multiple languages).
<div dir={rtlLocale.dir}>
<CardList viewAllText={rtlLocale.locale === 'he-IL' ? 'כל הידיעות' : 'View all press releases'} viewAllHref="#">
{#snippet heading()}
<h2>{rtlLocale.locale === 'he-IL' ? 'הודעות לעיתונות' : 'Press releases'}</h2>
{/snippet}
<CardList.Card date={new Date('2025-05-27')} locale={rtlLocale.locale} href="#">
{#snippet children()}
<p>{rtlLocale.locale === 'he-IL' ? 'גלו כיצד המחקר האחרון שלנו משנה את עתיד הרפואה ומשפר את תוצאות המטופלים ברחבי העולם.' : 'Discover how our latest research is transforming the future of medicine and improving patient outcomes worldwide.'}</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-12-03')} locale={rtlLocale.locale} href="#">
{#snippet children()}
<p>{rtlLocale.locale === 'he-IL' ? 'למדו על יוזמותינו הגלובליות להנגשת תרופות מצילות חיים לקהילות הזקוקות להן.' : 'Learn about our global initiatives to make life-saving medications more accessible to communities in need.'}</p>
{/snippet}
</CardList.Card>
</CardList>
</div>Custom Link Text
The linkText prop allows customization of the action link text for different use cases.
News & Events
Join our upcoming webinar series on innovative pharmaceutical research and development.
Explore our new patient assistance program designed to improve medication accessibility.
Access our comprehensive annual sustainability report highlighting environmental initiatives.
<CardList viewAllText="View all news" viewAllHref="#" viewAllTarget="_blank" viewAllAriaLabel="Browse all news articles">
{#snippet heading()}
<h2>News & Events</h2>
{/snippet}
<CardList.Card date={new Date('2025-05-27')} linkText="Learn more" href="#">
{#snippet children()}
<p>Join our upcoming webinar series on innovative pharmaceutical research and development.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} linkText="View details" href="#">
{#snippet children()}
<p>Explore our new patient assistance program designed to improve medication accessibility.</p>
{/snippet}
</CardList.Card>
<CardList.Card date={new Date('2025-05-27')} linkText="Download PDF" href="#">
{#snippet children()}
<p>Access our comprehensive annual sustainability report highlighting environmental initiatives.</p>
{/snippet}
</CardList.Card>
</CardList>