A card is an incomplete view of a post or article. Cards are used to represent as many posts in a small space. It can contain a picture or date, taxonomy, a headline and a link to the full content.
The following cards are defined:
product, product catalogue, product searched, quick order product, contact, event, event image, news, story, story neutral, story social media, porthole, moment, minimal, profile, classic, classic neutral, infographic, tiny, download, video, quote, blank slate, subscription, total price, price cart



Put a bird on it keffiyeh dreamcatcher. Ethical selvage pour-over pabst plaid literally. Tattooed crucifix readymade venmo. Bespoke helvetica thundercats master single-origin coffee everyday hashtag.

Lead Design Strategist
Diy sartorial photo booth distillery semiotics marfa skateboard vinegar. Everyday xoxo pbr&b venmo distillery banh mi. Mixtape slow-carb flexitarian brooklyn goth.
Meggings beard wes anderson organic. Godard next level chia cronut you probably haven't heard of them. Literally +1 deep v biodiesel authentic hoodie pop-up.
Stay on top of the news en receive the latest nes from Teva directly in your inbox.
Stay on top of the news en receive the latest nes from Teva directly in your inbox.
Tacos swag chambray typewriter church-key chicharrones tousled chillwave blog iphone. Lorem ipsum Artisan butcher truffaut bushwick distillery taxidermy crucifix carry ramps cray.
157 Ronni Shoal
West Gregorioborough
ME 97661-3806
Total list price
€ 220,00
Sales rep discount
€ -220,00
Normal discount
€ -220,00
Voucher for medicinal products
€ 36,00 remaining
€ -220,00
Voucher for non-medicinal products
€ 1,00 remaining
€ -220,00
Voucher for food supplements
€ 0,00 remaining
€ -220,00
Total discount
€ -220,00
Total Gross Price
€ 1.234,20
Total
€ 1.036,73


Stay on top of the news en receive the latest nes from Teva directly in your inbox.
Stay on top of the news en receive the latest nes from Teva directly in your inbox.


Please change the filter settings to find the product(s) you are looking for. You can also use the search function to look up a product.
Total list price
The following stylesheets are required to display this component.
The following additional stylesheets are used to display the example(s).
The following javascripts are required to display this component.
The following additional javascripts are used to display the example(s).
Usage documentation can be found here.
Changelog
Fix
- 03 Dec 2024 - fix(card) - Art direction accesibility text overlay on image. Event Image
- 22 Dec 2023 - Add podcast and article example for neutral card icon button
- 04 Sep 2023 - Fix Quick Order Product to have clickable badges and sizes fix to match design.
- 04 Jul 2023 - Update Quick Order Product Quick Order Product to have click area.
- 01 Jun 2023 - Fix background Price Cart Card (no joke) to be white.
- 18 Jan 2023 - Workaround ios safari stack order, while keeping clickable card.
- 14 Dec 2022 - Workaround ios safari stack order.
- PBS support product catalogue card, title hover color.
- Safari Flicker when used in card.
- Fix browser (gpu layer) rounding error causing slit under image. Story
- Double focus ring on trigger
- A11y outline issue button-element not receiving focus outline
- Infographic must show image.
- (workaround) GPU Rounding issue in Story cards.
- CSS fix ensure title looks equal from h1-h6 Product Catalogue Card
- Hover only on button for specific card types (blank slate, inforgraphic, minimal, profile).
- Fix IE11 issue product card width-limit.
- Fix spacing regression on Product Catalogue Card
Changed
- 10 Mar 2025 - docs(download): add example with paragraph and two columns layout
- 19 Feb 2025 - docs(download): add two-column layout example
- 04 Feb 2025 - feat(card): enhance minimal card with rectangular image support
- 04 Feb 2025 - docs(card): update docs to include paragraph examples.
- 28 Mar 2024 - Changed position of discount for Price cart card Price Cart based on design which supports big prices and labels.
- 16 Oct 2023 - Added example of quote card with copy Quote Card
- 03 Jul 2023 - Removed receipt card from library in favor of Receipt
- 12 Jun 2023 - Update Price cart card Price Cart
- Extra button in product catalogue card.
- Video, without trigger should have no bottom margin Video Card
- Accessibility: Video, add role and aria-label to Video Card trigger
- Product Catalogue Card can now have an image.
- Removed Image from Product Card as it is now part of product catalogue.
- Accessibility: Changed trigger focus color to #E8E8A0 for Tiny Card.
- Product Catalogue Card changed example so it will work without buy button. (utility classes.)
- Product Catalogue Card contents build with grid and utility classes for more flexibility.
- Product Card can now have an image.
- Art direction.
- RTL support
- Art direction Teva Sans
- Accommodate text in cards.
- Update example Download
- Tiny Card spacing.
- Event Card should show an Arrow Button
Added
- 09 Jun 2023 - Quick Order Product Quick Order Product
- 15 May 2023 - Price cart card Price Cart
- 28 Apr 2023 - Receipt card Receipt
- 25 Apr 2023 - Example in docs of product search card with card badge
- 21 Apr 2023 - Added Quick Order Card ‘as is’ to library because no time.
- 04 Apr 2023 - Added visual to Contact card to show contact person
- 14 Feb 2023 - Product Searched
- 31 Jan 2023 - Total Price
- 27 Oct 2022 - Event Image
- PBS support: Contact
- PBS support: News and Events + Stories
- Classic Neutral
- Partial PBS support
- Indicator to News
- Story Social Media
- Indicator to Story and Story Neutral
- Reading Time to Story Neutral
- Example of Icon on top of Story Neutral
- Subscription
- Blank Slate
- Quote Card
- Product Catalogue Card
- Examples of text in Story and Classic card.
- Video Card
- Product Card
- Download
- Story Neutral
- Initial draft