Cards are one of the most common components of material design. A card is used to group related content in the style of a piece of paper, which makes it perfect for the display of items in lists and grids. Cards usually have a drop shadow and a small margin that prevents them from touching other elements.

Material design card

In February 2015, the Google+ app showed cards that look different. The Google+ team has always been experimenting a lot with design. Just remember that they replaced the navigation drawer with a special drop-down menu, a navigation pattern that hasn’t yet found its way into any other Google app. In contrast to regular cards, the new cards in the Google+ app have no horizontal margin and fill the screen from one edge to the other. However, they only expand to the screen width if the posts are displayed as a list. In a staggered grid, which is the layout Google+ uses for larger screen widths, the regular horizontal margins and round edges are still applied. In other words, the new cards are used in lists, the regular cards are used in grids. Now, four months after the new cards were first spotted in the app, they are still present. This indicates that both the users and the team are satisfied with the change.

Full width cards in the Google+ app

The benefit of these full width cards is the ability to display images and videos at their maximum size. No pixels are wasted on margins or borders, which leads to an immersive viewing experience.

During the development of Imagine, a material design Instagram client for Android, we also came across this topic. We show the feed of Instagram posts as regular cards in a list. Some weeks after we published the app, we were receiving a couple of emails from users that loved the app, although they did not like the waste of space left and right of a card. That is certainly also because they were used to the full width display of images from the official Instagram app. When we saw the new cards in the Google+ app, we realized that this style would perfectly fit our needs. Consequently, we added the option to display the cards just like the Google+ app does, which satisfies the users that reached out to us.

Regular cards (default) and full width cards (optional) in Imagine

After using the full width option ourselves for a while, we found that it really improves the viewing experience of the app. Recently, we started a quick poll in our Google+ community about which card design our users prefer. At the time of writing, 43% prefer the full width cards, 57% prefer the regular cards (282 votes in total). Although it is not the majority of users, it is a noteworthy group that definitely favors full width cards over regular cards.

The need of maximizing horizontal image space can also be observed in the Facebook app. Although the app uses regular cards, an image inside is wider than the card itself and almost touches the display edges. The small drop shadow makes it look like it is sitting on top of the card. This can be considered as material design but looks really weird in my opinion.

Almost full width images inside regular cards in the Facebook app

Today, the Google+ app is not the only place where Google uses full width cards. You can also find them in Google I/O 2015, Inbox and System settings. However, these apps are mainly using cards to group list items and don’t show full width imagery (except Google I/O in the top card). Thus, one can best check out the Google+ app to get an idea of using full with cards in its most valuable form.