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 classGrid--2
orGrid--3
as required. These modifiers correspond to the number of columns in the grid. - Create a child
div
with the classGrid-item
, this will act as the parent div for your card. Create as manyGrid-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 classCard
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.
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 usingAvatar
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 parentdiv
, this will position card in top left ofCard-thumb
. UseLabel
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 usingLabel
here.
- Another optional component inside
Card-thumb
is the progress bar. create a new div and useProgress
. Next create a childdiv
with the classProgress-bar Progress-bar--success
. - Similar to
Label
,Progress
is also native to the UI kit, read more about usingProgress
here. - If you require a tooltip on the progress bar, add
Tooltip
on the same div asProgress--bar
. Tooltip requires a nestedspan
with the classTooltip-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
.
- Use
<h3>
for card titles. Use thefont-size
helper classf5
on the<h3>
element to set the size. - Create a
<p>
element with the classCard-description mt2
to define the description text. Using this class is important as it sets the correctmin-height
, so even if a user has added a very short description, all cards will remain consistent in height. The helper classmt2
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.
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.
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 theFlex
grid 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 childdiv
which needs to display as a column. Using twoFlex-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.
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
.
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
.
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 theSelect
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.