Building a responsive card system

A quick intro to using Grid, `Flexbox and a UI Kit` to rapid prototype responsive cards patterns.

10 min readJan 19, 2018

Here is a working prototype which shows the system in use. The system uses the AIN UI kit for rapid prototyping. Grab a copy of the code from Github.

One of the biggest challenges at AIN is maintaining consistency across the various networks and products the brand offers. In order to solve this problem we’ve had to completely re-think our approach to design and development.

The AIN UI kit —or component library if you prefer — is the first phase in reducing redundancy and ironing out inconsistency in the product. For us, it’s been a huge step in the right direction.

By referencing the stylesheet, and adopting the new CSS class naming conventions, we can rapid prototype and build production ready UI patterns, which utilise primitive components found in the kit.

Our new card system, is one such pattern which makes use of the UI Kit. By keep the number of card specific CSS classes to a minimum we have dramatically reduced the amount of new CSS we have to write.

The rest of this article looks at how to build various styles of card found across AIN products, using the UI kit. If you’re a developer working with the kit, I recommend you take a look now if you’re not familiar with it. You will need to reference the stylesheet and understand the class naming conventions in order the build the cards.

Using .Grid, a dead simple container for cards

Step 1: Start by using `Grid` as a container for all cards

Create a new container with the class Grid. If you need to display cards in multiple columns use the modifier class Grid--2 or Grid--3 as required. These modifiers correspond to the number of columns in the grid.
Create a child div with the class Grid-item, this will act as the parent div for your card. Create as many Grid-item as you like. Grid will take care of the collumns.

A few things to keep in mind:

Grid doesn’t require an extra container as it acts as a container by default, setting a max-width of 1170px to the div.
All child elements with the class Grid-item will display in a grid by default.
Grid is responsive by default.

Read more about using Grid on the AIN UI Kit. It is extremely simple to use!

Step 2: Use `Card` to build a default ‘portrait style’ card

All cards live inside a .Grid-item container:

Within Grid-item create adiv with the class Card to define a card.
Use the modifier Card-radius for any card which requires rounded corners.

Note: this card-radius is optional, as not all cards require rounded corners.

This will create the basic structure and style needed for all cards, no matter their shape, size or usage.

Setting cover image

In most cases cards require a cover image. Create a child div within Card, with the classes Card-thumb pa4.

What’s going on here?

Card-thumb allows for a background cover image, and pa4 is a padding helper class which means padding: 24px or ‘padding on all sides, forth on the 8pt grid scale’. Read more about using spacing helpers here.

Note: The background image can be set inline using style="" on the div called Card-thumb.

Next, use the optional modifier Card-thumb--portrait for portrait style cards and Card-thumb--landscape for landscape cards. This takes care of the border radius and makes the cover image radius adapt when the layout changes.

Using Card-thumb for card background cover image

Step 3: Defining components within `Card-thumb`

Within Card-thumb you have several other options:

Firstly you can define an Avatar, this will pull CSS from the UI Kit. Read More about using Avatar on the UI kit documentation here).

Remember: use Avatar—-square or Avatar--round to define shape of avatar. Set the size with size modifier, for example Avatar--m.

Certain cards might also require a Label. Use Card-label on the parent div, this will position card in top left of Card-thumb. Use Label and necessary modifier classes to set the Label color and style. Label is a core UI component, meaning it can be used elsewhere and not just for cards. You can read more about using Label here.

Using an optional Label within the card thumbnail

Another optional component inside Card-thumb is the progress bar. create a new div and use Progress. Next create a child div with the class Progress-bar Progress-bar--success.
Similar to Label, Progress is also native to the UI kit, read more about using Progress here.
If you require a tooltip on the progress bar, add Tooltip on the same div as Progress--bar. Tooltip requires a nested span with the class Tooltip-text, followed by the position and color modifier. Read more about using Tooltip here.

Step 4: Adding text content to a card

For clarity, all text content should be defined inside an <article> HTML element. Use the pa4 padding helper to set proportional padding.

Note: <article> is a child element of Card, NOT a child of Card-thumb.

Using <article> to define main card content

Use <h3> for card titles. Use the font-size helper class f5 on the <h3> element to set the size.
Create a <p> element with the class Card-description mt2 to define the description text. Using this class is important as it sets the correct min-height, so even if a user has added a very short description, all cards will remain consistent in height. The helper class mt2 adds `8px` of padding to the top of the description.

Note: helper classes are non-specific to cards, for example they can be used on any component in the design system.

Step 5: Using `Card-grid` for flexible grids specific to the card component

Card-grid is a helpful CSS Grid based grid. It has been designed specifically for use with cards (hence the prefix Card-). It’s intended use is to layout card figures and numbers, which require a multi-column layout on larger devices.

Following Card-grid, use a modifier class to define the number of grid columns required. The options range from Card-grid--2 to Card-grid--6, where the number represents the number of columns. For example, using Card-grid--4 after Card-grid will create a 4 column grid.

Using Card-grid for a flexible card specific grid system

Assign Card-grid-item to the corresponding number of child divs. So in the case of Card-grid--4, you would require 4 child divs with the class Card-grid-item, and so on.

Note:Card-grid is only for structural purposes. In order to style content inside grid items you will need to use font-size and color helper classes. <strong> can be used for bold text.

Step 6: Using `Card-location` for aligning location icon and text

Use a div with the class Card-location to wrap the location icon and text.

<i> can be used to define the icon. This will ensure the icon and text positions correctly.

Adding mt3 will create margin-top: 16px; on element.

Step 7: Set card actions using Button and Icon

Action Buttons and Icons can use the corresponding class and modifiers from the UI Kit. Button sets text based buttons, whereas Icon defines icon style buttons. Read more about Buttons here.

Note: I have used the helper class mt3 to set margin-top: 16px; on the container, and mr1 to set 4px pf padding on the right of all buttons except the last.

Icon buttons will require a Tooltip, so follow the same practice as outlined previously.

Using Button and Icon from AIN UI Kit, with helper classes for spacing

Step 8: Creating landscape style cards

On all 3 sites you will find landscape cards and cards with a multi-column layout. These cards use the exact same system described above, but also utilise theFlexgrid system.

Flex is a dead simple flexbox based grid system built into the AIN UI kit.

Using Flex for cards is very simple:

For landscape style cards (as seen on desktop), add .Flex-row to the same div as .Card. Flex-row as the name suggests, creates a row which uses Flexbox to display all child elements inline.
Assign Flex-column to any child div which needs to display as a column. Using two Flex-colum divs will create equally proportioned columns.

Note: on smaller devices .Flex-columns will stack items in a single column by default. No need for extra media queries.

Using Flex-row and Flex-column to create 2 column responsive card layouts

For landscape cards, you will need to add the modifier Card-thumb--landscape after Card-thumb in order to update border radius as the card adapts to different screen sizes.

Step 9: Using column modifier classes for multi-column cards

In certain cases, cards will require column of different width, to solve this problem the Flex grid includes several column width modifiers which can be used to set columns with different widths.

These are Flex--15, Flex--25, Flex--30, Flex--50, , Flex--65 and , Flex--75.

Using Flex column modifiers to create columns of unequal widths

By default columns without a modifier will fill the remaining space available. So there is no need for the column sizes to add up to 100% of the container width.

Notice in the image below the card does not have the usual border radius therefore does not require the modifier Card--radius.

Card without border radius modifier class

Something else worth noting is the columns in these cards will stack to a single column by default on smaller devices. So again, no need for extra media queries, bootstrap or any other code to achieve this. All this good stuff happens by default.

Step 10: Displaying form elements on cards

Cards do not have any native or specific styles for form element. Form elements rely directly on the UI kit for their styling.

Form elements used on cards can reference classes from the UI kit

In the example above, the card uses a Select. Read more about using the Select class and other form elements in the form section of the UI kit.
If at any point you need to add margins to space the form element correctly, use the spacing helpers from the UI Kit, as required.

Step 11: Styling text links on cards

Some cards will require plain text links, wrap <a> elements in parent div with the class Card-text-links, this will ensure they display: block; and not inline as default.

<a> elements will also require the Link class, followed by the modifier class Link--underline or Link--underline-hover, these should be fairly self explanatory. You can use a color helper to specify the link color, for example color-brand will set the link to the default AIN blue.

Note: In the future, it may be a good idea to add the Link class to the UI kit. As of yet I haven’t had a chance to add it! The same is true for color helpers, but I think these would also be a helpful addition to the kit.

Step 12: Showing Markers and using color helpers

When a Marker is required, use the class Marker which takes it’s styles from the AIN UI Kit.

In the case above, I have created a <p> with a color-green helper class to style the text color.

Nested within this <p> is a <span> used to display the Marker. Use a modifier class to style the marker color. In this case, Marker—success will style the marker green.

Wrapping Up

Hopefully this has been a helpful introduction to using the AIN Card system or indeed building your own. There are still a few issues which need to be fixed, namely improving media queries, to suit the cards better and adding helper classes to the kit. Right now this is just a prototype of course, and I’m sure we will discover bugs and other issues as we integrate the system with the live product.

If you do happen to notice any issues or have any ideas on how to evolve and improve the system it would be great to discuss this in more details.

Also worth noting, this was originally intended as an internal document to guide our development team, however I decided to publish it on Medium in hope it will be useful to others.

Finally, thanks for taking the time to read this. I hope you will find some use out of it. Any feedback or thoughts you might have would be welcome in the comments below.

References

AIN Card front-end prototypes.
AIN UI Kit on netlify.
AIN Card prototypes on Github.

I’m Harry Cresswell. I co-founded indtl.com and work as a UX/UI designer and front-end dev at Angel Investment Network. I design type on my nights off and send out a newsletter on design and typography.

Find me on Twitter if you want to say hi.