Card Blocks
Intermediate Training Module 3: Cards & Listings
Card blocks allow you to automatically display content throughout your website using visually organized cards. Instead of manually creating links every time new content is published, card blocks automatically pull content based on content type and category.
For example, a News Card block can automatically display the latest news posts, while a People Card block can display staff profiles from a specific department.
Whenever new content is added, the card block updates automatically.
Card blocks can display:
- News Posts
- Events
- People Profiles
- Videos
- Files
- Pages
This makes card blocks one of the most powerful tools available in cutheme.
Cards vs Listings
There are two primary ways to display content in cutheme:
Card Blocks
Card blocks display content as visual cards that typically include:
- An image
- A title
- A description or excerpt
- Additional content details
Cards work well when visual presentation is important.
Examples include:
- News articles
- Events
- Staff directories
- Video galleries
Listing Blocks
Listing blocks display content in a simpler list format.
Listings often work better when:
- Large amounts of content are being displayed
- Visitors need to scan information quickly
- Images are less important
You’ll learn more about Listing Blocks later in this module.
How Card Blocks Work
Every card block follows the same basic process:
Step 1: Create Content
Create content such as:
- Posts
- Events
- People Profiles
- Videos
- Files
Step 2: Categorize Content
Assign categories to help organize content.
Examples:
- News
- Research
- Faculty
- Students
- Events
Step 3: Add a Card Block
Insert the appropriate card block onto your page.
Step 4: Configure Display Options
Choose:
- Which categories to display
- How many items to show
- Layout settings
- Sorting options
The block will automatically generate the cards.
Adding a Card Block
To add a card block:
- Click the + button.
- Search for a card block type.
- Select the appropriate block.
Available card blocks include:
- News Cards
- Event Cards
- People Cards
- Video Cards
- File Cards
- Page Cards
Common Card Settings
Although each card type includes unique options, most card blocks share several common settings.
Block Title
Display a heading above the cards.
Example:
- Latest News
- Upcoming Events
Number of Cards
Choose how many items to display.
Examples:
- 3 cards
- 6 cards
- 12 cards
Card Layout
Choose:
- 2-column layout
- 3-column layout
- 4-column layout
The best layout depends on the amount of content and available page space.
Categories
Limit cards to one or more categories.
Example:
A News Cards block could display only:
- Research
- Research + Awards
This makes it possible to create highly targeted content sections.
More Button
Most card blocks support a “More” button.
Options typically include:
- Load More
Loads additional content directly on the page. - View More
Links visitors to another page containing more content.
Choosing the Right Card Block
News Cards
Use for:
- News
- Announcements
- Stories
Often display:
- Images
- Dates
- Excerpts
Event Cards
Use for:
- Upcoming events
- Workshops
- Lectures
Can display:
- Dates
- Times
- Locations
People Cards
Use for:
- Staff directories
- Faculty profiles
- Team listings
Can display:
- Photos
- Job titles
- Contact information
Video Cards
Use for:
- Video galleries
- Training resources
- Research videos
File Cards
Use for:
- Documents
- Reports
- Forms
- Publications
Page Cards
Use for:
- Highlighting important pages
- Resource hubs
- Service directories
Best Practices
Categorize Content Consistently
Card blocks rely heavily on categories. Poor categorization often leads to poor listings.
Display Relevant Content
A card block should serve a clear purpose. Avoid creating large “everything” listings.
Limit the Number of Cards
Most pages benefit from displaying only the most important content.
Use Images When Available
Images often improve card-based layouts and increase engagement.
Let Content Update Automatically
Avoid manually recreating lists whenever possible. Instead, use categories and dynamic card blocks to keep content current.
-
Hello, and Welcome to cutheme advanced training, Module 2. In this video, we will be covering Card Blocks.
Card Blocks are a way to display categorized content on pages as “cards”, these allow the user to select an individual piece of content within the block.
Card Blocks are available for News, Events, People, Videos, and Files.
In this video, I will be going over all five types.
To add a Card Block, go to the block selection menu, and select the card you want. I’m going to start with a News Card.
Once selected, you will see there are various options on the right side of your screen, which I will take you through.
For every type of card block, you can add a header and some intro text.
You can change the block’s background, between white and grey, and you can choose how many columns the block has, between two and four.
You can also choose the number of cards shown in the block here, between 1 and 12. As well, you can choose whether or not there will more that will load, by clicking the “load more” button, or if you will be redirected to a page where you can view all of them, with the view more button. You can add the link to that page here.
Lastly, you can filter by category in your categories, in your news, people, events, you can filter by category.
For the news cards specifically, you can toggle whether images are shown, dates are shown, or excerpts are shown.
Next up are Event Cards, I’m going to add one here.
It has a lot of the same features as before, like columns, numbers, but for events you can sort by either upcoming, or past. There is also the more button and categories for if you want to refine your events even further.Next up after Events Cards are People cards, I’m going to add one here. People cards offer a lot of customization. Aside from the options gone over already like the title and background, for people you can toggle their images, job titles, emails, and phone numbers.
You can also choose to show all people on your site instead of a static number. You can sort people by first or last name, from A-Z or Z-A.
Next up we have Video Cards, I will add one here now. Just like for events and people, you can choose how you want your videos sorted, either by title or date of publishing. For title, you can sort by Title, from A-Z or Z-A. For publishing date, you can go from old-new or new-old.
Next up, we have file cards. These show all the files on your site, and just like for people, you can choose to show all the files on your site, instead of a static number. And like videos, you can sort either alphabetically or by date modified, from A-Z or Z-A, or Old-New or New-Old if you are going by date modified.
The last type of block is a page card block, which shows all the pages on your site. You can toggle to have dates and excerpts on or off., and you can choose to show all pages.
Lastly, you can sort by either name or date in both directions.
And that is a walkthrough of all the types of card blocks in cutheme.
Try it Out!
Now that you have learned how to add a listing, time to try it out!
- Create several categorized Posts or Events.
- Add a News Cards block to a page.
- Configure it to display content from a single category.
- Change the number of cards displayed.
- Add a More button.
- Create an Event Cards block and compare the available settings.