Info cards block
Purpose
Use this module to display key information i.e. programs of study, featured content, link to third level pages, etc.
Functionality
A combined 3-column module with image, title and call-to-action (CTA).
Specifics
Variations:
(i) 2 cards on 2 column
(ii) 3 cards on 3 column
(iii) 2 cards on 2 column with photo background
(iv) 3 cards on 3 column with photo background
(v) 4 cards on 4 column with photo background
(vi) 2 cards on 2 column with photo background with Red Background
(vii) 3 cards on 3 column with photo background with Red Background
(viii) 4 cards on 4 column with photo background with Red Background
Title: Allows maximum of 5 words
Use Guidelines
Allows maximum of 3 blocks and goes full width if 2 cards are used with no other module beside it.
Recommended image dimensions: 538 x 303 pixels
How to Add Modules
To add modules to the Gutenberg editor, follow these steps:
- Go to your WordPress Admin interface and open a post or page editor
- Click the plus button in the top left corner or in the body of the post/page
- You can either:
- Click on Patterns, scroll through them until you find the module you want to use or
- Search for the module you would like to add using either the module name or number
- Click the module to add it
The module will be added to the body of your post or page.
Visuals
Variation: 2 cards on 2 column
![placeholder for module 23](https://www.yorku.ca/digitalexperiencehub/wp-content/uploads/sites/17/2020/06/Lab-lifesci20-1024x683.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tied volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![placeholder for module 23](https://www.yorku.ca/digitalexperiencehub/wp-content/uploads/sites/17/2020/06/lifesci_SWview-1024x687.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent seed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
Variation: 3 cards on 3 column
![placeholder for module 23](https://www.yorku.ca/digitalexperiencehub/wp-content/uploads/sites/17/2020/06/hands-600497_1280-1024x683.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tied volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![placeholder for module 23](https://www.yorku.ca/digitalexperiencehub/wp-content/uploads/sites/17/2020/06/Bergeron-Exterior-1-1024x683.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![placeholder for module 23](https://cpa.apps01.yorku.ca/wp-content/uploads/2020/06/Cherry-Blossoms-Calumet-College-4-1024x683.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent seed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
Variation: 2 cards on 2 column with photo background
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2020/12/yorku_subway_winter3.jpg)
![mock-image](https://idis.apps01.yorku.ca/wp-content/uploads/2020/03/placeholder-image-2-1024x576.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![mock-image](https://idis.apps01.yorku.ca/wp-content/uploads/2020/03/placeholder-image-2-1024x576.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
Variation: 3 cards on 3 column with photo background
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2020/12/yorku_subway_winter3.jpg)
![mock-image](https://idis.apps01.yorku.ca/wp-content/uploads/2020/03/placeholder-image-2-1024x576.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![mock-image](https://idis.apps01.yorku.ca/wp-content/uploads/2020/03/placeholder-image-2-1024x576.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![mock-image](https://idis.apps01.yorku.ca/wp-content/uploads/2020/03/placeholder-image-2-1024x576.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
Variation: 4 cards on 4 column with photo background
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2020/12/yorku_subway_winter3.jpg)
![mock-image](https://idis.apps01.yorku.ca/wp-content/uploads/2020/03/placeholder-image-2-1024x576.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![mock-image](https://idis.apps01.yorku.ca/wp-content/uploads/2020/03/placeholder-image-2-1024x576.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![mock-image](https://idis.apps01.yorku.ca/wp-content/uploads/2020/03/placeholder-image-2-1024x576.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![mock-image](https://idis.apps01.yorku.ca/wp-content/uploads/2020/03/placeholder-image-2-1024x576.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
Variation: 2 cards on 2 column with photo background with Red Background
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2023/08/placeholder-image-1024x576-1.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2023/08/placeholder-image-1024x576-1.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
Variation: 3 cards on 3 column with photo background with Red Background
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2023/08/placeholder-image-1024x576-1.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2023/08/placeholder-image-1024x576-1.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2023/08/placeholder-image-1024x576-1.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
Variation: 4 cards on 4 column with photo background with Red Background
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2023/08/placeholder-image-1024x576-1.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2023/08/placeholder-image-1024x576-1.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2023/08/placeholder-image-1024x576-1.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.
![](https://www.yorku.ca/blocks/wp-content/uploads/sites/12/2023/08/placeholder-image-1024x576-1.jpg)
Card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed volutpat enim, pharetra imperdiet orci. Suspendisse accumsan velit eu lectus aliquet commodo.