[component]: Interactive Card

[gfellerph]

Description

Create styles for an interactive card component.

Design

• Card interactive style foundations: https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=18-13
• Component and Modules Teaser card: https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=3850-8203

Tokens

• Tokens for this component are ready

Tasks design

🎨 Design

Preview Give feedback

1. Design component according to WIKIT
2. Update dependencies
3. Add & test compo in layout examples
4. Designer review
5. Documentation: Overview and usage (about, compo overview, compo props, usage, examples)
6. Documentation: Technical documentation (anatomy, accessibility)
7. Documentation: Review (content correctness, understandability, gaps)

Development Requirements

• The whole card area is clickable and interactive (hover, focus), but elements on the card can be interacted with and all aria roles are semantically exposed (card is not wrapped inside a button or a link). Text can be selected (no invisible element is laid over the card). Use [component]: Link area #3830 for this purpose
• Text and background color of the card change on hover. Ideally text color needs to only be overwritten on card level and gets inherited by all content elements
• Card background should stand out from the section background. Cards on white should be light grey and cards on grey backgrounds should be white. Use palette classes to set card backgrounds, add colours for hover manually.

Token list

• Background & foreground hover default
• Background & foreground hover alternate
• Background & foreground hover accent
• Background & foreground hover brand
• Shadow default & hover
• Border radius
• Card body padding (padding inline/block for the content block)

Notes:

• Focus is the same as for all other elements
• Spacing between content elements should be the default, not specified on the card

Tasks development

💻 Development

Preview Give feedback

1. feat(styles): Added post-linkarea component (3830) #4030
   +0
2. Review Design (All states present? Possible to implement?)
3. Tokenisation
4. HTML/CSS implementation
5. Documentation in Storybook
6. Visual regression tests
7. Design review

[sandra-post]

@rouvenpost Ready for your review :-)

[rouvenpost]

• Responsive behavoiur (mobile Viewports) is missing
• Negative Variants are missing
• Custom Content should be removed

[sandra-post]

After review with @rouvenpost following status:

• Removed component ❖ _Card interactive in Card Foundations, but kept documentation to serve as basis guideline for any interactive card we create in DS
• Additional to the component ❖ Teaser card , I will create today the component ❖ Teaser module with all the different color variations which are allowed.

➡️ @gfellerph The design for the ❖ Teaser card itself is ready for dev. Is there anything else I need to adjust from your POV?

[sandra-post]

Component ❖ Teaser section is now also finalized.
@rouvenpost Ready for documentation review.

[gfellerph]

@alizedebray this needs a design review from development and maybe a refinement of the tokens proposal. It would be good to prioritise this component.