Cards with image, title and short description

Styled card component which can be used on its own or being part of the Post Template block within Query Loop.

You can view a live preview or take a look at the code required for this pattern. When viewing the code, you can copy it so that you can then paste it into your own site. Below the preview/code, you’ll see instructions on how to use block patterns on CMS.

Live Preview
OpenClose

Card Title

Card Short Description

“Newyork City” by Mark Asthoff/ CC0 1.0

Code – Standalone Card
OpenClose
<!-- wp:group {"metadata":{"name":"Card"},"className":"","layout":{"type":"constrained","contentSize":"300px","justifyContent":"left","wideSize":"300px"}} -->
<div class="wp-block-group"><!-- wp:group {"metadata":{"name":"Card Inner"},"style":{"border":{"width":"1px"},"color":{"background":"#e6e6e666"}},"borderColor":"tertiary-blue-alt","className":"","layout":{"type":"default"}} -->
<div class="wp-block-group has-border-color has-tertiary-blue-alt-border-color has-background" style="border-width:1px;background-color:#e6e6e666"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","metadata":{"name":"Card Image"},"className":"full-width"} -->
<figure class="wp-block-image size-large full-width"><img src="https://kelvinxu.sites.olt.ubc.ca/files/2024/05/image.jpeg" alt="" style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:group {"metadata":{"name":"Card Content"},"style":{"spacing":{"padding":{"top":"25px","right":"15px","bottom":"25px","left":"15px"},"margin":{"top":"0px","bottom":"0px"}}},"className":"","layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:25px;padding-right:15px;padding-bottom:25px;padding-left:15px"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary-blue"}}},"spacing":{"margin":{"top":"0px"}}},"textColor":"primary-blue","fontSize":"medium"} -->
<h2 class="wp-block-heading has-primary-blue-color has-text-color has-link-color has-medium-font-size" style="margin-top:0px">Card Title</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"metadata":{"name":"Card Short Description"},"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary-blue"}}}},"textColor":"primary-blue","fontSize":"small"} -->
<p class="has-primary-blue-color has-text-color has-link-color has-small-font-size">Card Short Description</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Code – Card within Query Loop block
OpenClose
<!-- wp:query {"queryId":10,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->
<div class="wp-block-query"><!-- wp:post-template {"style":{"spacing":{"blockGap":"15px"}},"layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"metadata":{"name":"Card"},"className":"","layout":{"type":"constrained","contentSize":"300px","justifyContent":"left","wideSize":"300px"}} -->
<div class="wp-block-group"><!-- wp:group {"metadata":{"name":"Card Inner"},"style":{"border":{"width":"1px"},"color":{"background":"#e6e6e666"}},"borderColor":"tertiary-blue-alt","className":"","layout":{"type":"default"}} -->
<div class="wp-block-group has-border-color has-tertiary-blue-alt-border-color has-background" style="border-width:1px;background-color:#e6e6e666"><!-- wp:post-featured-image {"isLink":true,"aspectRatio":"1"} /-->

<!-- wp:group {"metadata":{"name":"Card Content"},"style":{"spacing":{"padding":{"top":"25px","right":"15px","bottom":"25px","left":"15px"},"margin":{"top":"0px","bottom":"0px"}}},"className":"","layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:25px;padding-right:15px;padding-bottom:25px;padding-left:15px"><!-- wp:post-title {"isLink":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary-blue"}}}},"textColor":"primary-blue","fontSize":"medium"} /-->

<!-- wp:post-excerpt {"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary-blue"}}}},"textColor":"primary-blue","fontSize":"small"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- /wp:post-template -->

<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->

<!-- wp:query-no-results -->
<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results --></div>
<!-- /wp:query -->

Default Query Loop settings are applied. Please adjust accordingly.

FAQs
OpenClose

Are there any prerequisites to use this block pattern?

Yes, the only prerequisite to utilize this block pattern is to enable the UBC Collab 2023 theme on your site. This new theme is an identical copy of the existing UBC Collab theme, with the added benefit of enabling all available block controls that were disabled by default. For more detailed information, you can refer to the official documentation. Keep in mind that if your site is customized with CSS, enabling the new theme may introduce some styling glitches, so be sure to review your site and address any issues accordingly.

Do I need to learn CSS to use this block pattern?

The block pattern is implemented using Gutenberg blocks, and styles can be adjusted through block settings. No custom CSS is required to make the block work on your site.

Can I link the entire card to an external URL?

No, it’s not possible to make the entire card a clickable link. However, you can manually add links to the Card Image block, Card Title block, and Card Short Description block. If you’re using the version compatible with the Query Loop block, then all the elements within it are already linked to their associated post.

Switch between the live preview and the code view to see what this might look like on your site and how to get it there

Available on every CMS website

How do I use block patterns on my site on CMS?

Block Patterns in WordPress are HTML with CSS (provided by special HTML comments). That means you’re able to simply copy a block (or selection of blocks) from one place, and paste them somewhere else, and they should look identical. In order to get the above block pattern on your site, try the following:

  1. Click the ‘Code’ tab above
  2. Click the ‘Copy to Clipboard’ icon in the top right of the code that is shown
  3. On your own site, add a new paragraph block to a post or a page
  4. Paste (ctrl+v on Windows, cmd+v on macOS) what you have on your clipboard
  5. Done!
View All Patterns

alternative options

Here are some block patterns similar to this one