Page Request - Tutorials Listing

[tinuola]

Page Description

This Page is used to display WI+RE tutorials listing.

Route: ~/help/tutorials

Walkthrough: https://youtu.be/O-lOO1PvJ40

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/BLO5HP8AphPr0KEacFPjs8/-Library--Final-Design-with-Annotations?m=auto&node-id=12010-89651&t=8sYSR5z3BAdy1L1A-1
• Mobile: Components' default responsiveness -- everything stacks vertically

Slots

None.

Props

None.

Developer Tips

List any developer tips here.

1. Fetch all tutorial data from ES and display all on the page
2. When search/filtering is initiated, results are displayed and other content (except for Call to Action) is removed from the page; when search and filters are cleared, page is restored back to default

• See Events-Exhibits page for example of template behavior when search and filters are executed: https://www.library.ucla.edu/visit/events-exhibitions

3. DividerWayFinder category is Research; color is cyan
4. Tutorial icons are listing images uploaded by content editors

Events

None.

Child components

List out any components that are used by this new Page.

1. MastheadSecondary
2. SearchGeneric for search
3. BannerHeader for main featured tutorial
4. SectionTeaserHighlight for secondary featured tutorials
5. SectionTeaserCards for tutorial listings/groupings
6. CallToActionTwoUp
7. DividerGeneral
8. SectionWrapper

Screenshots

Excerpt - Top

---

Excerpt - Bottom