Font Face
Teva Sans Latin

Drafts & Templates
PBS Templates

Primitives & components context

Primitives & components: Teva SCS

Card

v0.0.0

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

maximum of three on a row.
News
docs
Event
docs

Crucifix meditation austin tattooed marfa

Street ugh
Event Image
docs
Pabst lomo sriracha butcher disrupt tacos chicharrones tumblr microdosing whatever +1
Pour-over truffaut
alt text
Story
docs
alt text

Butcher vinegar literally artisan paleo microdosing

Xoxo stumptown
Story neutral
docs
alt text

Selfies venmo typewriter selvage intelligentsia

By Darius O'Conner DDS
Truffaut kombucha
Story social media
docs
alt text

5 hours ago

Tacos scenester paleo butcher chicharrones. Yr semiotics 3 wolf moon banh mi before they sold out kickstarter. Lumbersexual post-ironic tote bag photo booth hammock. Pickled kickstarter disrupt. Everyday schlitz offal shabby chic.

Swag iphone
Porthole
docs
alt text

Park wayfarers mlkshk cardigan tumblr

Literally vegan
Minimal
docs
alt text

Post-ironic cliche celiac flannel freegan

Mixtape venmo
Profile
docs
Video
docs

Cred lumbersexual scenester crucifix migas

Cronut tacos direct trade xoxo truffaut readymade. 8-bit before they sold out tofu williamsburg franzen tote bag readymade. Plaid 90's microdosing godard forage. Normcore pork belly blog portland quinoa kickstarter xoxo.

Play video
Quote
docs
August Hills

Luanna Williamson

District Consulting Producer

Polaroid chambray kickstarter. Austin narwhal pug humblebrag organic schlitz sustainable. Goth street actually next level. Actually church-key food truck waistcoat marfa muggle magic scenester heirloom. Keytar loko authentic cornhole disrupt dreamcatcher.

Lomo chambray put a bird on it ramps 3 wolf moon austin before they sold out. Marfa banh mi pork belly ethical poutine listicle. Wes anderson austin typewriter mixtape pork belly wayfarers loko photo booth. Dreamcatcher flannel synth cliche pug letterpress craft beer. Cred polaroid photo booth ennui tilde taxidermy pitchfork.

Subscription
docs

Subscribe to our newsletter

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

Subscription
docs

Subscribe to our newsletter

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

Quick Order Product Card
docs
alt text
50% NEW

Irony cardigan kinfolk vhs retro tofu biodiesel post-ironic hella scenester.

FAQ
docs

What is life

Viral park selvage iphone microdosing brooklyn pop-up ennui skateboard cred. Lorem ipsum Pinterest swag austin microdosing gastropub hammock vinegar pitchfork distillery gluten-free.

Taxidermy waistcoat

maximum of two on a row.
Product
docs

Budesonide Capsules (Enteric Coated)

Asymmetrical pickled literally:
Entocort® EC Capsules
Xoxo tofu:
Adrenals
Kitsch godard chia wayfarers organic:
Oral
Mustache gluten-free
Contact
docs

Gentrify salvia twee tofu stumptown

Commercial Office

Apt. 948 97509 Gerry Plains
West Burton
IL 03289-9438

+49 267.257.7477
ardith@shields-cummerata.info

Slow-carb ugh
Receipt
docs

Forage lo-fi wolf meggings church-key

Total list price

€ 220,00

Sales rep discount

21% OFF

€ -220,00

Normal discount

21% OFF

€ -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

16% OFF

€ -220,00

Price

€ 220,01

Checkout
Price Cart
docs
Letterpress tattooed cred banjo pitchfork.
Availability text

Total Gross Price

€ 1.234,20

Total

€ 1.036,73

Moment
docs
alt text

Farm-to-table park butcher sriracha dreamcatcher post-ironic

Salvia bitters
Classic
docs
alt text

Cold-pressed viral actually shoreditch retro hella

Meditation drinking
Classic neutral
docs
alt text

Tumblr williamsburg pickled fingerstache iphone helvetica

Vinyl wayfarers
Infographic
docs
alt text

Cold-pressed gluten-free carry chicharrones slow-carb

Skateboard twee
Subscription
docs

Subscribe to our newsletter

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

Subscription
docs

Subscribe to our newsletter

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


other
Tiny
docs
alt text

Cornhole pop-up offal mumblecore sartorial flannel

Freegan synth


Product Catalogue
docs

Budesonide Capsules (Enteric Coated)

alt text
Brand equivalent:
Entocort® EC Capsules
Therapeutic area:
Adrenals
Product form:
Oral
Cardigan migas

Blank slate
docs

No products found that match your criteria…

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.

Reset all filters

Total price
docs

Total list price

€ 411.40



Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).


JavaScript #

The following javascripts are required to display this component.

The following additional javascripts are used to display the example(s).


Usage documentation #

Usage documentation can be found here.


Changelog #

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