Screen patterns

Listing

Screens presenting a repeated collection of products, places, or content.

  1. BookMyShow: Live event category listing

    A per-category event listing headed 'Comedy Shows / HSR Layout, Bengaluru | 221 Events' with a full-width promotional hero banner, then a refinement bar of three controls — Filters, Sort By, Browse By Venues — above a two-column grid of event cards. Each card shows artwork, an optional PROMOTED badge, a date such as 'Sun, 23 Aug' or 'Fri, 21 Aug onwards', the event title, the venue line and the sub-genre 'Stand up Comedy'. A back chevron and search icon sit in the header. When the Date filter is applied the same header reads '101 Events' and the control reads 'Filters (1)'.

    BookMyShow Live event category listing

    View the screen

  2. BookMyShow: Typed search results across content types

    As-you-type results for the query "Toxic": a clearable query chip, result-type tabs (All, Movies, STREAM, Events, Plays), a "Showing 8 results" count, and typed rows spanning a film (Toxic: A Fairy Tale for Grown-ups - in upcoming movies, Kannada, Telugu and 4 more), two comedy shows with venue and distance labels, a venues row, an artist row and an actor row, plus a View All Results button.

    BookMyShow Typed search results across content types

    View the screen

  3. Cleartrip: Flight results

    Loaded Bengaluru to New Delhi inventory with adjacent dates, prices, Sort, Filter, and itinerary cards.

    Cleartrip Flight results

    View the screen

  4. Cleartrip: Hotel results

    Loaded hotel inventory for the active destination, dates, and occupancy, with Filters and Sort.

    Cleartrip Hotel results

    View the screen

  5. District: Movies vertical home with now-showing spotlight

    Movies tab selected in the vertical rail: 'In the Spotlight' hero card for a now-showing film with genre tags and a 'Book tickets' CTA, followed by a "This Week's Releases" poster rail.

    Premium screenshot

    View the screen

  6. District: Showtimes and cinema listing with date picker

    Film title in the header, a date strip, Filters and 'Sort by' controls, then cinema cards each listing a venue name with distance and a grid of clickable show times.

    Premium screenshot

    View the screen

  7. District: Events landing with this-week picks and featured grid

    Events tab active: "What's happening this week" heading with a circular category rail (nightlife, social mixers, music, food and drinks and similar) and a 'Featured events' grid of poster cards.

    Premium screenshot

    View the screen

  8. District: Family dining collection listing

    Dark-theme Dining collection listing titled 'Family dining' with a back arrow, a horizontal filter-pill row (Filters, 'Date, time & guests', a percentage-off pill), an 'All restaurants' section and stacked venue cards showing photo, rating badge, name, cuisine, distance, price-for-two, a 'Book benefits' tag and a bookable-slot availability row.

    Premium screenshot

    View the screen

  9. District: Family dining collection — loaded availability results with per-venue slot pills

    Back-titled 'Family dining' collection with 'Filters (1)', '21 Aug, 12:30 PM • 4 guests' and '30% OFF & above' chips over an 'All restaurants' list; venue cards (Atlantis 4.2★ • North Indian • ₹2500 for two • Flat 20% OFF; Roxie 4.7★ • Flat 10% OFF) each carry a 'Slots for tomorrow' row of bookable time pills (12:00 / 12:15 / 12:30 / 12:45 PM) with per-slot discount labels.

    Premium screenshot

    View the screen

  10. Domino’s: Pizza menu listing with filters

    Domino's Menu: veg/non-veg and sort filters, category tabs (Paneer Maxxx, Chicken Maxxx, Big Big Pizza, Meals), and product cards showing a pizza name, description, price and an inline Add control.

    Premium screenshot

    View the screen

  11. Domino’s: All Restaurants directory for dine-in

    City-first dine-in store directory: an 'All Restaurants' header, a city field resolved to BANGALORE, a Search Restaurant box, an 'All Restaurants' count line, and outlet cards each showing the restaurant name, full street address, opening hours and a SELECT button. Before a city is chosen the same screen shows an empty state, 'We could not find a restaurant near your location! Please select your city and try again.'

    Premium screenshot

    View the screen

  12. EaseMyTrip: Train results

    Loaded train options from New Delhi to Mumbai Central with departure and arrival times, duration, seat availability, and filters.

    Premium screenshot

    View the screen

  13. EaseMyTrip: Hotel search results

    Hotel results showing property cards with ratings, amenities, pricing, and controls for price, filters, and sorting.

    EaseMyTrip Hotel search results

    View the screen

  14. EaseMyTrip: Outstation cab results

    Bengaluru-to-Mysuru cab options with vehicle type, capacity, luggage, distance, price, discounts, safety standards, and Filter and Sort.

    Premium screenshot

    View the screen

  15. MakeMyTrip: Destination activities listing

    Dated activity results for a destination: a header with the destination, the date range and Edit, filter controls (All Filters, Price, Categories), a 'SELECT YOUR EXPERIENCE' category rail (MMT Experience Pass, Attraction Tickets, Tours), an in-destination search field, and activity cards with duration, inclusions, a savings badge and a struck-through original price.

    Premium screenshot

    View the screen

  16. MakeMyTrip: Cabs priced options listing

    Partner-aggregated cab classes for the searched trip: a trip header with an Edit control, the Ride Guarantee strip, the distance/duration basis of the rates, and priced vehicle-class cards with seat counts, fuel type and an inline coupon and roof-carrier add-on.

    Premium screenshot

    View the screen

  17. MakeMyTrip: Hotel results listing

    Priced property results for the searched city and dates: a sticky search header with Maps / Sort / All Filters / OneCircle controls, a Rush Deals carousel, and rated property cards with nightly price and free-cancellation flags.

    Premium screenshot

    View the screen

  18. SNITCH: Product listing with filter and sort

    The listing surface used for category browsing and for text-search results: sub-filter chips (ALL, NEW, RELAXED, FORMAL, LINEN), grid-density toggles, a filter and sort control, and a product grid showing names, prices and wishlist hearts. Its filter and sort sheet offers SORT BY (POPULAR, PRICE HIGH TO LOW, PRICE LOW TO HIGH, NEW, CUSTOMER REVIEW) plus CATEGORY, SIZE, COLOR, PATTERN, FIT and MATERIAL facet groups with CLEAR and APPLY. When the surface is reached from a query it shows the query text in the header field with a result count, and the grid-density switch changes how much product copy each tile carries: the widest density shows a single full-bleed image per row with no name or price, while the 2-up density exposes product names and prices. Tapping a result tile opens that product's own detail page.

    Premium screenshot

    View the screen

  19. SNITCH: Catalog search surface

    Dedicated search surface reached from the home or browse-tab search bar. A back arrow and an empty editable search field on its rotating placeholder sit at the top, with voice and image search icons at the right. Below: RECENT SEARCHES with a CLEAR ALL control and previously used query chips, a TOP SEARCHES block of suggestion chips including POLO SHIRTS, LINEN SHIRTS, BLACK SHIRTS, STRAIGHT FIT JEANS, FORMAL SHIRT, FULL SLEEVE T SHIRT, BAGGY JEANS and CARGO PANTS, and a TRENDING section with category tabs above a product thumbnail grid. Typing a partial query replaces the chips with a live typeahead suggestion list; tapping a TOP SEARCHES chip opens the standard on-query results listing.

    Premium screenshot

    View the screen

  20. SNITCH: Curated collection lookbook

    The SNITCH X SIRAJ collection header sits above a sub-category chip row (ALL selected, then NEW, SHIRTS, T-SHIRTS, JEANS) and grid-density switchers. Below is a nine-tile editorial lookbook of full-bleed model photography. The tiles deliberately carry no product name, no price and no rating — the only shopping copy on the screen is the collection name and the chips. The bottom navigation bar (home, NEW, browse, bag, account) is visible.

    Premium screenshot

    View the screen

  21. BookMyShow: Cinema showtimes

    Showtimes listing for the chosen film: a horizontal date strip, Hindi/2D language-format line, Sort/Cancellable/price-band filters, and four Goa cinemas each with green showtime chips.

    Premium screenshot

    View the screen

  22. BookMyShow: Food and beverage add-ons

    'Grab a Bite!' upsell with an offer banner, All/Popcorn/Beverages/Snacks tabs and priced popcorn rows each carrying an Add button, plus a Skip link.

    Premium screenshot

    View the screen

  23. BookMyShow: Now showing movies

    City-scoped 'Now Showing' catalog reached from the home Movies rail: a promotional hero card, a 'Coming Soon' section pointing at upcoming movies, and a grid of film poster cards with a browse-by-cinema entry point.

    Premium screenshot

    View the screen

  24. BookMyShow: Venue detail

    A venue's own page reached by opening a non-film Venues result from search: back chevron, the venue name as the header title (Skyye: Bengaluru), a share icon, a full-width venue photo, the venue's complete public street address, a red View On Maps link, then an 'Explore All Events' block headed '1 Events' with Filters and Sort By chips above a dated event poster card (Club Nocturno, Sat, 22 Aug) whose title row is partly cut off at the bottom edge.

    Premium screenshot

    View the screen

  25. Domino’s: Takeaway outlet picker near you

    Pickup store chooser: a 'Restaurant(s) Near Your Location' list under the current locality, each outlet card showing the restaurant name, full street address, opening hours, walking/driving distance, a View on Map link and a SELECT button, with some outlets badged NEW DRIVE-N-PICK.

    Premium screenshot

    View the screen

More examples with Premium

Premium unlocks the remaining screenshots.