Introducing List Cards for Tempest

A new presentation for conversational content on Tempest home pages.
Avatar:
Smith Schwartz
Author:
Publish date:
Social count:
0
A new presentation for conversational content on Tempest home pages.

All Tempest sites use a card layout on the home page. We're not the only ones to do this, in fact card layouts are becoming something of a Web standard. Sites like Pinterest, The New York Times, The Guardian and even Facebook all use card layouts in one way or another. Cards are essentially a thumbnail sketch of what you're about to read, a teaser or trailer for the main content. 

Card layout

An example of card layout on the home page of Fashionista.com

Tempest has always been designed with a content-first approach. Our design team knows that the biggest tool on our workbench is the rich, engaging content produced by our partner sites. With this in mind, the process for building one platform with a design that works across sites is straightforward. We simply design for captivating content.

Examples of Card Types on Tempest

The interesting challenge with content on the Web, is that it can take many shapes and forms. Some sites, like House of Brinson, are photo driven. Other sites like Biography serve up amazing video and profile content. xoJane (one of the most comment-rich sites on the Web) is all about conversation. So when we looked at the 10 existing card types we had for home page layout, we knew it was time to add another to our repertoire. In the gallery above you can see examples of several of the card types we currently have on Tempest. 

Introducing List Cards

List card in desktop view

List card in desktop view

Our latest addition to card types is list cards. List cards are fluid in height, making the headline and abstract the most visible components of the card. We've also made it easier for readers to jump straight into the comments section of a post by adding the comment count to each list card.

macbook_listcards.001.png
List cards in mobile view

List cards in mobile view

On mobile devices, list cards shrink to accommodate more content on the screen. This allows readers to see more of the site in a smaller space with all the same capabilities of the desktop list view.

List cards are just one more way the designs on Tempest can be customized for each individual site. To see list cards live and in action, head on over to xoJane.