Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[scoping] tabbedCarousel component #764

Open
nsolerieu opened this issue Sep 23, 2024 · 1 comment
Open

[scoping] tabbedCarousel component #764

nsolerieu opened this issue Sep 23, 2024 · 1 comment
Labels
brand enhancement New feature or request

Comments

@nsolerieu
Copy link
Contributor

Context

Site design has been design tab based carousel in a few flagship pages instances. We are looking at establishing the relevance of creating a flexible tabbedCarousel component in Primer Brand

Universe 24 pricing section
Image

Homepage redesign (WIP)
Image

Design suggestion

Structurally I see 2 pieces:

  • The content container with assets to display and rotate through with it's associated meta data like title, description, link
  • The navigation tabs/pills

Wide screens
Image

Mobile
Image

Component props:

  • Nav position: top or bottom
  • Meta information: yes/no
  • Crop: Center or Left
    ...

Baked-in attributes

  • max items (5) for all resolutions
  • crops sizing

To be discussed

So we used this component in flagship context with great level of customization. The underlying structure present similarities that led us to consider a component. The ability to condense a feature set into a carousel with tabular navigation seems common in design systems.

Should we wait for more instances of builds to assess the needs styling? Can we start a scoping exercise between primer Brand Site design?

@nsolerieu nsolerieu added brand enhancement New feature or request labels Sep 23, 2024
@raytalks
Copy link

@nsolerieu I'd like to propose to discuss the further with @joshfarrant and @danielguillan during PBrand Office Hours

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
brand enhancement New feature or request
Projects
Status: No status
Development

No branches or pull requests

2 participants