Skip to content

[cds-card]: horizontal layout and AI label visual parity follow-up #23143

Description

@makafsal

Summary

Follow-up to #23032. The initial scaffold PR covers all 16 stories and core behaviours. Two areas were deferred for a focused follow-up: the horizontal card layout and AI label visual parity against the React counterpart.

Background

The React Card has 17 stories total — the WC scaffold ships 16. The missing story is WithHorizontalMedia (a separate story from WithMedia). Additionally, the WithAILabel story exists in WC but the CSS implementation diverges from React's approach in ways that need verifying.

Acceptance criteria

Horizontal layout

  • WithHorizontalMedia story added to card.stories.ts matching the React counterpart (media on start, media on end, expressive density variants)
  • horizontal control in the Default story correctly switches the card to side-by-side layout
  • cds-card-media receives the slot="media" assignment when horizontal is set on the parent (driven by context)
  • media-position="end" reverses the column order (media on the right)
  • Visual output matches React WithHorizontalMedia for all variants

AI label

  • WithAILabel story visually matches the React counterpart — blue gradient border, correct padding-inline-end on title/label/description when AI label is present
  • has-ai-label + has-actions combined state applies the wider $spacing-13 padding (title, label, description all shift left to clear both the AI label and the actions)
  • Clickable card with AI label renders the correct ::before hover/focus gradient border (from _card.scss lines 462–477)
  • No console errors in Storybook for any WithAILabel variant

Files in scope

  • packages/web-components/src/components/card/card.stories.ts — add WithHorizontalMedia, wire horizontal Default control, verify WithAILabel
  • packages/web-components/src/components/card/card.scss — verify :host-context rules for has-ai-label, has-ai-label + has-actions, horizontal body/footer, and clickable AI label gradient
  • packages/web-components/src/components/card/card-media.ts — confirm slot self-assignment when card context horizontal changes

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Fields

No fields configured for Task.

Projects

Status
⏱ Backlog
Status
Backlog 🌋

Relationships

None yet

Development

No branches or pull requests

Issue actions