[RH] Scrollable indicator

[tbrlpld]

Description

With the sticky "apply filter" button in the filter section of the research hub library page it can be hard to identify that I should be scrolling to see more filter options. On desktop you might when you scroll through the results. On mobile the filter options are displayed in a modal and not next to the results, so that mechanism does not exist.

Desktop

Mobile

I think it could be useful to have something like little arrow to indicate that I should be scrolling down.

Acceptance criteria

• [ ] We have a design proposal on how the need to scroll to discover more could be indicated.

┆Issue is synchronized with this Jira Task

[tbrlpld]

cc @kristinashu @beccaklam

[kristinashu]

On mobile, our petition pages have a sticky button and we've used a shadow to hint that it is over top of other content.

The shadow might work for the research hub but we would need to mock it up to see how it looks on desktop and with the grey background. Is this something Nick could do since he designed these pages? cc @bheasman

[bheasman]

Sorry, this one slipped through! Agree this definitely feels like something worth looking at. I'll have a chat with Nick

[nicklee]

Hi @kristinashu, I've just added a quick mockup to Figma which is also attached.

This illustrates how this component would work on desktop, notice the button has text transform uppercase on in your example, but our button is sentance case, if we want to be fully consistent we may want to update this on the research hub?

[kristinashu]

Thanks Nick, this looks good! No need for the text to be uppercase - I don't think it needs to be that prominent of a CTA.