brand icon indicating copy to clipboard operation
brand copied to clipboard

[scoping] tabbedCarousel component

Open nsolerieu opened this issue 1 year ago • 1 comments

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 avatar Sep 23 '24 20:09 nsolerieu

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

raytalks avatar Sep 24 '24 12:09 raytalks

Closing following decision explained here: https://github.com/github/primer/issues/4783#issuecomment-2730347695

nsolerieu avatar Mar 17 '25 17:03 nsolerieu

👋 @nsolerieu - double-checking if closing this issue was intentional? I think we discussed closing the standalone Toggle component, but keeping this issue open? Or does Site no longer plan to use this pattern anymore?

rezrah avatar Mar 24 '25 16:03 rezrah