Skip to content

Support a multi-action Card variant with ButtonGroup #1460

Open

Description

@stefankp

Summary

Add a supported card-like composition that can render a native ButtonGroup with one or two independent actions, similar to the action patterns available in Hero and CTABanner.

Our preferred outcome is a Card variant designed for multiple actions. If that does not fit Card’s interaction model, an acceptable alternative would be a Pillar variant with Pillar.ButtonGroup support and a visual treatment that looks more like a Card than the current borderless Pillar presentation.

Context

We are exploring new sections for a marketing page that need card-like content with multiple calls to action. Today:

  • Card provides the desired visual treatment, but requires a single href and uses a stretched heading link so the entire card represents one destination.
  • Pillar supports more flexible content composition, but filters out ButtonGroup and does not provide the Card-like presentation needed for this use case.
  • Hero and CTABanner already expose native compound ButtonGroup components.

Desired composition

The exact API and variant name are open, but the intended content model is:

<Card variant="multi-action">
  <Card.Heading>Build with confidence</Card.Heading>
  <Card.Description>Supporting copy for the section.</Card.Description>
  <Card.ButtonGroup>
    <Button as="a" href="/get-started">Get started</Button>
    <Button as="a" href="/learn-more">Learn more</Button>
  </Card.ButtonGroup>
</Card>

The actions must remain independent and directly interactive; the existing stretched Card link must not overlap or compete with them.

Alternative direction

If multiple independent actions should remain outside Card’s single-destination model, extend Pillar instead:

  • Add Pillar.ButtonGroup, delegating to the shared ButtonGroup.
  • Add a Card-like Pillar presentation with appropriate surface, spacing, background, and optional border treatment.
  • Support both start- and center-aligned content.

Acceptance criteria

  • Provide a supported card-like component composition with one or two native ButtonGroup actions.
  • Preserve valid, accessible interaction semantics without overlapping links or click targets.
  • Reuse the shared ButtonGroup API and behavior.
  • Support responsive layouts and start/center alignment where applicable.
  • Preserve existing Card and Pillar behavior by default.
  • Add unit, Storybook, visual, and documentation coverage.

Activity

  1. rezrah commented on Sep 7, 2026

    @rezrah
    Collaborator

    This was discussed internally and has been paused for now. We're currently waiting on site design team to confirm the campaign requirements first.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions