Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[component]: Teaser #4383

Open
7 of 13 tasks
gfellerph opened this issue Jan 6, 2025 · 4 comments · May be fixed by #4460
Open
7 of 13 tasks

[component]: Teaser #4383

gfellerph opened this issue Jan 6, 2025 · 4 comments · May be fixed by #4460
Assignees
@leagrdv
Labels
📦 components Related to the @swisspost/design-system-components package
Milestone
PPNL Support

Comments

@gfellerph
Copy link
Member

gfellerph commented Jan 6, 2025 •
edited by leagrdv
Loading

Description

A teaser card is a clickable preview that leads to detailed content, providing a convenient entry point for users to access more information. It contains maximum one interactive element (button) which links to the same location as the card.

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=3850-8203&p=f&t=C1ea6xrOkX1hTGEb-0

Tokens

  • Tokens for this component are ready

DEVs proposal:

Token set name: Components/Teaser

  • post-teaser-section-cards-gap: sectionCards gap
  • post-teaser-section-padding-block: Teaser section padding top and bottom
  • post-teaser-section-gap: sectionContent gap
  • post-teaser-section-top-gap: sectionTop gap
  • post-teaser-section-text-gap: sectionText gap
  • post-teaser-section-description-font-size: paragraph font-size within sectionText
  • post-teaser-card-sm-image-height: cardMedia height for small cards
  • post-teaser-card-lg-image-height: cardMedia height for large cards
  • post-teaser-card-elevation: Teaser card shadows
  • post-teaser-card-border-radius: Teaser card radius
  • post-teaser-card-background-enabled: Teaser card background-color Enabled
  • post-teaser-card-background-hovered: Teaser card background-color Hovered
  • post-teaser-card-background-selected: Teaser card background-color Focus
  • post-teaser-card-content-color-enabled: heading and paragraph color in cardContent Enabled
  • post-teaser-card-content-color-hovered: heading and paragraph color in cardContent Hovered
  • post-teaser-card-content-color-selected: heading and paragraph color in cardContent Selected
  • post-teaser-card-sm-section-content-padding: teaser card small sectionContent padding
  • post-teaser-card-lg-section-content-padding: teaser card large sectionContent padding
  • post-teaser-card-sm-section-content-gap: teaser card small sectionContent gap
  • post-teaser-card-lg-section-content-gap: teaser card large sectionContent gap
  • post-teaser-card-description-font-size: teaser card cardContent > paragraph font-size,
  • post-teaser-card-sm-heading-font-size: teaser card small cardContent > heading font-size,
  • post-teaser-card-lg-heading-font-size: teaser card large cardContent > heading font-size,
  • post-teaser-card-sm-content-gap: teaser card small cardContent gap,
  • post-teaser-card-lg-content-gap: teaser card large cardContent gap,

Tasks design

🎨 Design
Preview Give feedback

Tasks development

💻 Development
Preview Give feedback
@gfellerph gfellerph added the 📦 styles Related to the @swisspost/design-system-styles package label Jan 6, 2025
@sandra-post sandra-post added 📦 components Related to the @swisspost/design-system-components package and removed 📦 styles Related to the @swisspost/design-system-styles package labels Jan 6, 2025
@sandra-post sandra-post moved this from 👀 Triage to 🎨 Design docs in review in Design System Production Board Jan 6, 2025
@sandra-post
Copy link

@rouvenpost Ready for docs review :-) (when done, you can tick the task "Documentation: Review" in the tasklist "Design" above)

@gfellerph gfellerph added this to the PPNL Support milestone Jan 6, 2025
@sandra-post sandra-post mentioned this issue Jan 9, 2025
Open
1 task
@gfellerph gfellerph moved this from 🎨 Design docs in review to 💡 Ready for token spec in Design System Production Board Jan 10, 2025
@gfellerph gfellerph assigned rouvenpost and unassigned rouvenpost Jan 10, 2025
@leagrdv leagrdv self-assigned this Jan 10, 2025
@rouvenpost
Copy link

rouvenpost commented Jan 13, 2025 •
edited
Loading

The "Text" Option seems redundant. I recommend to have the Paragraph mandatory if a Button is placed.

@sandra-post
Copy link

@rouvenpost Fixed.

@leagrdv leagrdv moved this from 💡 Ready for token spec to 🔮 Ready for tokenisation in Design System Production Board Jan 16, 2025
@Vandapanda
Copy link
Contributor

On hold till we decided how to implement the different palettes

@leagrdv leagrdv linked a pull request Jan 17, 2025 that will close this issue
feat(styles, documentation): teaser card component #4460
Open
@leagrdv leagrdv moved this from 🔮 Ready for tokenisation to 🤬 Dev in Code Review in Design System Production Board Jan 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@leagrdv leagrdv

Labels
📦 components Related to the @swisspost/design-system-components package
Projects
Design System Production Board
Status: 🤬 Dev in Code Review
Milestone
PPNL Support
Development

Successfully merging a pull request may close this issue.

feat(styles, documentation): teaser card component swisspost/design-system
5 participants
@gfellerph @rouvenpost @Vandapanda @sandra-post @leagrdv