0

I have a bunch of cards in a 2 column layout in my grid. If there are more than 2 items to display I want to show only 2 of them and hide the remaining behind a "Show all" button.

What is this design pattern called? Collapsed view? Preview? Accordion? Snapshot?

enter image description here

Improve this question
4
  • 1
    When there's a button to load results, it's often called a "load more" pattern.
    – Izquierdo
    Jun 30, 2021 at 20:11
  • It's right below the cards
    – Alexander
    Jul 1, 2021 at 10:29
  • Can you post a screenshot?
    – Izquierdo
    Jul 1, 2021 at 14:25
  • Updated the question with Figma
    – Alexander
    Jul 4, 2021 at 6:57

3 Answers 3

Reset to default
0

I think this would be related to an accordion with horizontal behavior. My 2¢

Improve this answer
1
  • Doesn't an accordion always collapse entirely?
    – Alexander
    Jul 1, 2021 at 10:30
0

Lazy Load

Lazy loading (also known as asynchronous loading) is a design pattern commonly used in computer programming and mostly in web design and development to defer initialization of an object until the point at which it is needed.

Wikipedia

This is the structural name, but in the UI the more specific name is:

Load More

The optimal solution for loading new products is the intersection of the “Load more” button and infinite scrolling in the form of lazy-loading.

Source smashingmagazine.com

Improve this answer
0

They call it "Progressive disclosure". The "Show more" button is just one of the ways to show a chunk of data and provide more on demand.

More about progressive disclosure at nngroup.com

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.