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

  • 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


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.


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


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

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

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

Your Answer

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

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