Pattern/header hero split media#3434
Merged
AKCodez merged 21 commits intoxrpl-brand-update-2026from Jan 13, 2026
Merged
Conversation
- Introduced new styles for the HeaderHeroSplitMedia component, including layout, typography, and responsive design adjustments. - Updated margin-bottom for paragraph and label-r elements to enhance spacing consistency.
… dark mode support - Refactored color variables to use design tokens for better maintainability. - Ensured consistent text colors for titles and descriptions in both light and dark modes. - Adjusted color values for better contrast and readability across themes.
- Updated spacing variables for tablet view to enhance layout consistency. - Introduced accent-specific spacing for title and description groups on tablet and desktop. - Adjusted margin and gap values for improved responsiveness and visual hierarchy.
Calvinjwala
added
the
web dev
gabriel-ortiz
approved these changes
Jan 9, 2026
Collaborator
gabriel-ortiz
left a comment
gabriel-ortiz
left a comment
There was a problem hiding this comment.
LGTM - couple comments, nothing blocking
Comment on lines
+16373
to
+16396
| @media (min-width: 576px) { | ||
| .bds-hero-split-media__container { | ||
| padding-top: 32px; | ||
| padding-bottom: 32px; | ||
| } | ||
| } | ||
| @media (min-width: 992px) { | ||
| .bds-hero-split-media__container { | ||
| padding-top: 40px; | ||
| padding-bottom: 40px; | ||
| } | ||
| } | ||
| .bds-hero-split-media__row { | ||
| gap: 32px; | ||
| } | ||
| @media (min-width: 576px) { | ||
| .bds-hero-split-media__row { | ||
| gap: 32px; | ||
| } | ||
| } | ||
| @media (min-width: 992px) { | ||
| .bds-hero-split-media__row { | ||
| gap: 8px; | ||
| } |
Collaborator
There was a problem hiding this comment.
❓ Question: Can we use the @include media-breakpoint-up() mixin for these queries?
Contributor
Author
There was a problem hiding this comment.
thats the dev bundle, i think it decodes the mixin, so thats why you are saying those direct gvalues if im not mistaken
Comment on lines
+138
to
+147
| // Render hero media section | ||
| const renderHeroMedia = () => ( | ||
| <div className="bds-hero-split-media__media"> | ||
| <img | ||
| src={media.src} | ||
| alt={media.alt} | ||
| className="bds-hero-split-media__media-img" | ||
| /> | ||
| </div> | ||
| ); |
Collaborator
There was a problem hiding this comment.
🙈 Nitpick: Since this doesn't rely on any execution or params, it might make more sense to use useMemo here for storing the media JSX
Comment on lines
+93
to
+136
| const renderHeroContent = () => ( | ||
| <div className="bds-hero-split-media__content"> | ||
| {/* Hero Title Section */} | ||
| <div className="bds-hero-split-media__title-surface"> | ||
| <div className="bds-hero-split-media__title-group"> | ||
| <h1 className="bds-hero-split-media__title">{title}</h1> | ||
| <p className="bds-hero-split-media__subtitle">{subtitle}</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Hero Description & CTA Section - only render if there's content */} | ||
| {hasDescriptionGroupContent && ( | ||
| <div className="bds-hero-split-media__description-group"> | ||
| {description && ( | ||
| <p className="bds-hero-split-media__description"> | ||
| {description} | ||
| </p> | ||
| )} | ||
|
|
||
| {/* CTA Buttons */} | ||
| {(primaryCta || secondaryCta) && ( | ||
| <div className="bds-hero-split-media__cta"> | ||
| {primaryCta && ( | ||
| <Button | ||
| variant="primary" | ||
| href={primaryCta.href} | ||
| > | ||
| {primaryCta.label} | ||
| </Button> | ||
| )} | ||
| {secondaryCta && ( | ||
| <Button | ||
| variant="tertiary" | ||
| href={secondaryCta.href} | ||
| > | ||
| {secondaryCta.label} | ||
| </Button> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); |
Collaborator
There was a problem hiding this comment.
🙈 Nitpick:Might be better suited as JSX stored in useMemo
- Changed tablet aspect ratio from 2:1 to 16:9 for better compatibility with an 8-column grid. - Adjusted title alignment in the title-only layout from center to top for improved visual hierarchy.
…and layout - Adjusted column spans in CardImage showcase to support a 4-column layout on larger screens. - Updated TileLogo showcase to reflect changes in aspect ratios and responsive behavior, ensuring proper display across different screen sizes. - Enhanced SCSS styles for both components to maintain consistency in appearance and functionality in light and dark themes. - Refined documentation to clarify usage and responsive design principles for both CardImage and TileLogo components.
- Updated Button component styles to use responsive typography mixins for better adaptability across devices. - Removed redundant media queries and adjusted font sizes and line heights for both button types. - Ensured margin resets to maintain consistent spacing in various contexts. - Enhanced CSS for improved readability and maintainability.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.