Hi there,
I am looking to put some Bootstrap type cards in a html variant banner.
I know that Forem has a story book so I looked there first to see if there was something native that I could use without Bootstrap or Tailwind.
Any suggestions on the best approach? I ideally I would like to use existing Forem article content for the card image, title etc.
Many thanks!
lee
Top comments (7)
I'll be honest, @lee , I'm kinda confused by this question. It feels to me like cards are a way to replicate the banner format we already display, so it would be helpful to understand a little more about how you're intending to use them in a banner (cards vs say, the current forem.dev banner).
Pinging @ioscasey who probably knows the most about the overlap here and can locate the point I'm missing!
Heya, Yes exactly that - cards within the campaign banner horizontally scrollable so that I can swipe through them.
So we don't really have a carousel component (I guess that's what you're trying to build?). But... We do have cards, technically. But these aren't really super extensive and definitely are not documented in Storybook (yet!). You can probably figure out the markup here. On Forem, most of the boxes you see are based on these cards.
About the scrollable part - as I said, we don't have it. But! Since HTML variant banners are pretty flexible, you could technically build it for yourself with a bit of scroll-snap magic. Not ideal, but better than nothing I guess.
FWIW, improving banners management and also incorporating carousel is actually on our roadmap, but the schedule is very undefined and uncertain here..
Thanks for all the information Pawel, much appreciated. I think what I am basically looking for (in the campaign banner) is single horizontal grid of posters for up and coming MMA events that allows someone to swipe left or scroll left for what's on next and what's coming. I can then link them to our 'all you need to know' posts that we do for each event.
Posters like this linking to posts like this.
Like Netflix do it here is an example but nested in the campaign banner.
Hey @ludwiczakpawel - how are my scrollable slides looking :D
DM'd :)
just use flexbox and overflow:scroll