The Cards

Let's start to dig a little deeper. Cards. These form the spine of our Standfirst design system and are the small components that link content together throughout your site. Let's get cracking with how to get the best from them.

The cards are for the home page and other hubs. They are designed in a way that allows them to be used in many different situations throughout your site.

On desktop, they are generally laid out in rows of 1,2,3,4,5 or 6 cards with different options for each – i.e. whether to display images, excerpts, metadata, etc.

Most of the terminology when talking about the card description refers to the desktop state. At smaller screens, the lack of real estate means that cards all scale down to narrower columns widths and all look similar.

Basic Layouts

Single card

The single card can be used for a number of functions. Primarily it is intended to show content that is more important or demands showcasing. It gives the editorial team the chance to show a larger graphic and more text than any other card. It is probably the card that had the most flexibility of design as they can be treated as ‘one off’ modules.

Two cards

Two cards that can be split to showcase two pieces of content. By default this is a 50/50 split, but there is scope to apply different ratios if the layout would benefit.

The standard layout of all cards includes an image, space for categories, a title, an excerpt, by line and date. These can all be changed to suit the application.

Three / Four cards

These are the layouts that perform the heavy lifting of the cards system. Usually used in conjunction with the Tax Lister to simply list pieces of content.

Five / Six Cards

Once we get to this size of card the amount of space each card provides is greatly reduced. These cards again lend themselves to being used to display less curated lists of content. They are often used to showcase content from specific categories or tags and offering quick access to them. They can be used with all the available features, but often work best with just a title and minimal metadata.

Featured Modules

The card system is often expanded beyond basic rows to produce more interesting layouts for modules that are required to deliver information in a more varied way. Usually, the best example of these is for the main module of a homepage that has a main story focus, but with extra teasers for other stories of interest.

These types of modules are more usually driven by the curated Advanced Menu tools.