CardList
A vertical layout system for displaying content cards with dates and customizable action links
Overview
The <vision-cardlist> web component provides a vertical layout for displaying text-based cards with date circles, customizable action links, animated arrows, and a "View all" navigation link. It includes a section title and footer navigation.
API Reference
<vision-cardlist>
The root container web component that manages vertical layout with fixed spacing and includes optional title and footer navigation.
- Heading slot: Use
<h1 slot="heading">Your Title</h1>for custom heading levels (optional) - view-all-text:
string- Text for "view all" link (optional, button hidden if not provided) - view-all-href:
string- URL for "view all" link (default: "#") - view-all-target:
string- Target for "view all" link (optional, e.g., "_blank")
<vision-cardlist-card>
Individual text-based card web component with customizable action link and animated arrow.
- date:
string- ISO date string to display in circle (default: current date) - show-year:
boolean- Show year format ("Dec 19" / "2025") instead of default ("Dec" / "19") (default: false) - circle-size:
'sm' | 'md' | 'lg'- Circle size with proportional text scaling (default: 'sm') - link-text:
string- Text for the action link (default: 'Read more') - href:
string- Link URL - target:
string- Link target attribute - rel:
string- Link relationship attribute
Basic Usage
Default date format shows 3-letter month on top and day below. The component includes a title, cards, and "View all" link.
Press releases
Discover how our latest research is transforming the future of medicine and improving patient outcomes worldwide.
Learn about our global initiatives to make life-saving medications more accessible to communities in need.
<vision-cardlist view-all-text="View all press releases" view-all-href="#" view-all-target="_blank">
<h2 slot="heading">Press releases</h2>
<vision-cardlist-card date="2024-03-15" href="#">
<p>Discover how our latest research is transforming the future of medicine and improving patient outcomes worldwide.</p>
</vision-cardlist-card>
<vision-cardlist-card date="2024-02-28" href="#">
<p>Learn about our global initiatives to make life-saving medications more accessible to communities in need.</p>
</vision-cardlist-card>
</vision-cardlist>Year Format
With show-year="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.
Join us for our flagship event showcasing the latest advances in pharmaceutical technology.
<vision-cardlist view-all-text="View all events" view-all-href="#">
<h2 slot="heading">Events</h2>
<vision-cardlist-card date="2025-03-03" show-year="true" href="#">
<p>Explore stories from our team members about finding meaning and connection in their work at Teva.</p>
</vision-cardlist-card>
<vision-cardlist-card date="2025-04-15" show-year="true" href="#">
<p>Join us for our flagship event showcasing the latest advances in pharmaceutical technology.</p>
</vision-cardlist-card>
</vision-cardlist>Circle Sizes
The circle-size attribute controls the date circle size with proportional text scaling. Available sizes: sm (default), md, lg.
Circle Size Examples
Small circle size (default). Compact design suitable for dense content layouts.
Medium circle size with scaled text. Balanced visibility for standard content sections.
Large circle size for prominent display. Enhanced visibility for featured content or hero sections.
<vision-cardlist>
<h3 slot="heading">Circle Size Examples</h3>
<vision-cardlist-card date="2024-03-15" circle-size="sm" href="#">
<p>Small circle size (default). Compact design suitable for dense content layouts.</p>
</vision-cardlist-card>
<vision-cardlist-card date="2024-03-15" circle-size="md" href="#">
<p>Medium circle size with scaled text. Balanced visibility for standard content sections.</p>
</vision-cardlist-card>
<vision-cardlist-card date="2024-03-15" circle-size="lg" href="#">
<p>Large circle size for prominent display. Enhanced visibility for featured content or hero sections.</p>
</vision-cardlist-card>
</vision-cardlist>Custom Link Text
The link-text attribute 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.
<vision-cardlist view-all-text="View all news" view-all-href="#" view-all-target="_blank">
<h2 slot="heading">News & Events</h2>
<vision-cardlist-card date="2024-03-15" link-text="Learn more" href="#">
<p>Join our upcoming webinar series on innovative pharmaceutical research and development.</p>
</vision-cardlist-card>
<vision-cardlist-card date="2024-02-28" link-text="View details" href="#">
<p>Explore our new patient assistance program designed to improve medication accessibility.</p>
</vision-cardlist-card>
<vision-cardlist-card date="2024-01-15" link-text="Download PDF" href="#">
<p>Access our comprehensive annual sustainability report highlighting environmental initiatives.</p>
</vision-cardlist-card>
</vision-cardlist>