Building a responsive card system
A quick intro to using Grid,
Flexbox and a UI Kit to rapid prototype responsive cards patterns.
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.
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--3as required. These modifiers correspond to the number of columns in the grid.
- Create a child
divwith the class
Grid-item, this will act as the parent div for your card. Create as many
Grid-itemas you like. Grid will take care of the collumns.
A few things to keep in mind:
Griddoesn’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-itemwill display in a grid by default.
Gridis 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
divwith the class
Cardto define a card.
- Use the modifier
Card-radiusfor any card which requires rounded corners.
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
Card, with the classes
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
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.
Step 3: Defining components 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
Avataron the UI kit documentation here).
Avatar--round to define shape of avatar. Set the size with size modifier, for example
- Certain cards might also require a Label. Use
Card-labelon the parent
div, this will position card in top left of
Labeland 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
- Another optional component inside
Card-thumbis the progress bar. create a new div and use
Progress. Next create a child
divwith the class
- Similar to
Progressis also native to the UI kit, read more about using
- If you require a tooltip on the progress bar, add
Tooltipon the same div as
Progress--bar. Tooltip requires a nested
spanwith 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.
<article> is a child element of
Card, NOT a child of
<h3>for card titles. Use the
<h3>element to set the size.
- Create a
<p>element with the class
Card-description mt2to 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
mt2adds `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.
Card-grid, use a modifier class to define the number of grid columns required. The options range from
Card-grid--6, where the number represents the number of columns. For example, using
Card-grid will create a 4 column grid.
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.
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.
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.
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 the
Flex is a dead simple flexbox based grid system built into the AIN UI kit.
Flex for cards is very simple:
- For landscape style cards (as seen on desktop), add
.Flex-rowto the same div as
Flex-rowas the name suggests, creates a row which uses Flexbox to display all child elements inline.
Flex-columnto any child
divwhich needs to display as a column. Using two
Flex-columdivs 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.
For landscape cards, you will need to add the modifier
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.
Flex--65 and ,
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
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.
- In the example above, the card uses a
Select. Read more about using the
Selectclass 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-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.
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.
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.