Skip to content

Add Install Card Component#2155

Open
julhoang wants to merge 3 commits intov3from
jh/2133-homepage-install-card-component
Open

Add Install Card Component#2155
julhoang wants to merge 3 commits intov3from
jh/2133-homepage-install-card-component

Conversation

@julhoang
Copy link
Collaborator

@julhoang julhoang commented Mar 11, 2026

Ticket: #2133

Summary

Add Install Card component with tabbed UI and an Alpine.js-driven dropdown that dynamically updates the displayed terminal command

Changes

  • Add reusable tab (_tab.html) and tab content (_tab_content.html) templates
  • Restrict the v3 example section in base.html to only render on the demo page (v3/demo/component); other changes in base.html are djlint formatting only
  • Others:
    • Some style fixes in forms, primitives, and code-block CSS to better align with Figma
    • Clean up example heading in the V3 Demo Component

Screenshots of Key UI Changes

New Install Card Component

Light Dark
Screenshot 2026-03-11 at 1 16 07 PM Screenshot 2026-03-11 at 1 16 19 PM Screenshot 2026-03-11 at 1 16 37 PM Screenshot 2026-03-11 at 1 16 51 PM

Updated Spacing, Icon, Hover State, Border Color in Default Dropdowns

Before After
Screenshot 2026-03-11 at 1 29 51 PM Screenshot 2026-03-11 at 1 29 28 PM Screenshot 2026-03-11 at 1 30 51 PM Screenshot 2026-03-11 at 1 27 40 PM

link-accent Token Changed from #00778B to #0077B8

Before After
Screenshot 2026-03-10 at 5 22 04 PM Screenshot 2026-03-10 at 5 17 17 PM

Border Removed from White / Standalone Codeblock

Before After
Screenshot 2026-03-10 at 5 24 28 PM Screenshot 2026-03-10 at 5 24 47 PM

@julhoang julhoang marked this pull request as ready for review March 11, 2026 20:37
@julhoang julhoang force-pushed the jh/2133-homepage-install-card-component branch from 08624ae to 1f00555 Compare March 11, 2026 21:10
--color-secondary-dark-blue: #00778B;
--color-secondary-light-blue: #F7FDFE;
--color-secondary-mid-blue: #6DCDF7;
--color-secondary-dark-blue: #0077b8;
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

The only change in this file is here for the --color-secondary-dark-blue changing the hex from ...8B to ...B8

Copy link
Collaborator

@DrJfrost DrJfrost left a comment

Choose a reason for hiding this comment

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

Overall it looks good to me; I left a few comments for approval.

@julhoang julhoang requested review from DrJfrost and gregjkal March 12, 2026 17:30
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.

2 participants