Skip to content

Right justified button alignment in Card component#2938

Merged
jhutchison-nava merged 3 commits intomainfrom
jh/card-component-alignment
Mar 9, 2026
Merged

Right justified button alignment in Card component#2938
jhutchison-nava merged 3 commits intomainfrom
jh/card-component-alignment

Conversation

@jhutchison-nava
Copy link
Contributor

@jhutchison-nava jhutchison-nava commented Mar 6, 2026

🎫 Ticket

n/a

🛠 Changes

Updates right justified button margins to be flush with card padding

Before:
Button with margin, not aligned with card padding boundary

After:
Button with no margin, aligned to card padding boundary

ℹ️ Context

USWDS adds a right margin to buttons by default, this causes issues when right justifying buttons in a container. This update removes those margins.

🧪 Validation

Screenshots, lookbook

@jhutchison-nava jhutchison-nava marked this pull request as ready for review March 9, 2026 15:32
@jhutchison-nava jhutchison-nava requested a review from a team as a code owner March 9, 2026 15:32
@jhutchison-nava jhutchison-nava changed the title Jh/card component alignment Right justified button alignment Mar 9, 2026
@jhutchison-nava jhutchison-nava changed the title Right justified button alignment Right justified button alignment in Card component Mar 9, 2026
<div class="flex-align-self-center">
<% if @button_params %>
<%= link_to @button_params[:name], @button_params[:path], class: 'usa-button' %>
<%= link_to @button_params[:name], @button_params[:path], class: @button_params[:class] %>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unsure why not just hard code margin-0 here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In theory, I suppose you could. But that increases the chances to need to opt-out of margin-0, which would become annoying

Copy link
Contributor

@MEspositoE14s MEspositoE14s left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@jhutchison-nava jhutchison-nava merged commit 42150b3 into main Mar 9, 2026
11 checks passed
@jhutchison-nava jhutchison-nava deleted the jh/card-component-alignment branch March 9, 2026 16:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants