Card set

Card set allows to display several cards in a single organized collection so that users can quickly see the connections or comparisons between different content pieces. To reduce overwhelming the users, this component can also be combined with filters or pagination to reduce the number of cards being presented at once.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files l masonry.pkgd.4.2.2.min.js

Functional grouping: Containers

Demo

Configure: select the dropdowns below to display the variety of options that a card set supports.

  • First ride is on us

    Responsible Pet Ownership

    Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

    Find out more

  • First ride is on us

    Responsible Pet Ownership

    Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

    Find out more

  • First ride is on us

    Responsible Pet Ownership

    Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

    Find out more

  • First ride is on us

    Responsible Pet Ownership

    Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

    Find out more

  • First ride is on us

    Responsible Pet Ownership

    Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

    Find out more

  • Through the Pet Drive Home Program, peace officers are able to return lost pets directly to their owner’s home when found.

    Find out more

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
    
        

           Usage best practices
        

        








    
    
    



    
        

            

                
                    





    
    
    


The card set component has two different layout options:


    

  • equal height - all cards in a row are set to equal heights based on the height of the tallest card in the row
      

    • this display gives equal weight or importance to the content on each card
      


    


  • masonary - all cards are placed in an optimal position to fill the vertical space sort of like a mason fitting stones in a wall



For a different user experience, see card slider and card set menu.


Consider using a card set:


    

  • when there are more than one card to display




    






                
                    





    
    
    


Usage examples:


    

  • subpage links on a landing page

  • process steps that link out to additional pages

  • art feature descriptions

  • short committee member bios




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Use consistent formatting to make cards easier to scan (i.e. all cards have a CTA button or are "whole card clickable", etc.).



    





Keep card titles short and descriptive so they don't overwhelm users.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not overwhelm users with too many choices by presenting many cards at once.



    





Do not hide high priority cards with pagination. Users may not scroll through all of the pages.



    





Do not combine regular sized cards with the mini cards in the same card set.



    





Do not display more than 6 cards in a row as the content can become illegible.