Skip to Content

Card Blocks

Module 2.3 – Advanced: Listing Blocks: Cards

Card listing blocks are used for pulling categorized content onto a page in a card format (vs stacked listings which are formatted like a list). There are six card blocks available: news posts, events, people, videos, files, and pages.

Follow along below to learn more about how you can use a card block. I’ll focus on News Cards, but the process is the same for all card blocks with different display options available.

Step-By-Step

Add a Card Block

1. Add a Card block using the block menu. Under Card Grids, choose from Event Cards, News Cards, People Cards, Video Cards, File Cards, or Page Cards.

Add a card listing block

2. Select options from the Block menu on the right.

News Card Display Options

  1. Add a header (title) to the card block
  2. The block background can be white or grey
  3. Select the number of columns (2,3, or 4) using the slider
  4. Toggle images off or on
  5. Toggle dates off or on
  6. Toggle excerpts off or on
  7. Determine the number of news cards to display using the slider.
  8. Add a More Button to show more cards
    • Choose Load More to display more on the page
    • Choose View More to bring visitors to another page
  9. Display cards (posts) from one or more categories by typing the category name into the text box
News Card

Event Card Display Options

  1. Add a header (title) to the event card block
  2. The block background can be white or grey
  3. Select the number of columns (2,3, or 4) using the slider
  4. Use slider to select the number of events to display
  5. Display either upcoming or past events
  6. Add a More Button to show more cards
    • Choose Load More to display more on the page
    • Choose View More to bring visitors to another page
  7. Display events from one or more categories by typing the category name into the text box
Event card display options

People Card Display Options

  1. Add a header (title) to the people card block
  2. The block background can be white or grey
  3. Select the number of columns (2,3, or 4) using the slider
  4. Toggle images off or on
  5. Toggle job title off or on
  6. Toggle email off or on
  7. Toggle phone number off or on
  8. Show all people
  9. Determine the number of people cards to display using the slider.
  10. Sort by first or last name
  11. Determine sort order
  12. Add a More Button to show more cards
    • Choose Load More to display more on the page
    • Choose View More to bring visitors to another page
  13. Display people from one or more categories by typing the category name into the text box
People card display options

Video Card Display Options

  1. Add a header (title) to the video card block
  2. The block background can be white or grey
  3. Select the number of columns (2,3, or 4) using the slider
  4. Determine the number of video cards to display using the slider.
  5. Sort by either video title or publishing date
  6. Determine sort order
  7. Add a More Button to show more cards
    • Choose Load More to display more on the page
    • Choose View More to bring visitors to another page
  8. Display video from one or more categories by typing the category name into the text box
Video card display options

File Card Display Options

  1. Add a header (title) to the file card block
  2. The block background can be white or grey
  3. Select the number of columns (2,3, or 4) using the slider
  4. Show all files
  5. Determine the number of file cards to display using the slider.
  6. Sort alphabetically or by date modified
  7. Determine sort order
  8. Add a More Button to show more cards
    • Choose Load More to display more on the page
    • Choose View More to bring visitors to another page
  9. Display files from one or more categories by typing the category name into the text box
File Card display options

Page Card Display Options

  1. Add a header (title) to the page card block
  2. The block background can be white or grey
  3. Select the number of columns (2,3, or 4) using the slider
  4. Show dates
  5. Show excerpts
  6. Show all pages
  7. Determine the number of page cards to display
  8. Sort alphabetically or by date modified
  9. Determine sort order
  10. Add a More Button to show more cards
    • Choose Load More to display more on the page
    • Choose View More to bring visitors to another page
  11. Display pages from one or more categories by typing the category name into the text box
Page Card display options

Example: Event Card Block

laptop on desk

Nov 21

Accessibility Training Workshops

  • 12:00 AM to 1:00 PM
  • Virtual Event
coffee and laptop

Dec 20

Coffee Break with Web Services

  • 10:00 PM to 11:00 PM
  • TBD
coffee

Oct 26

Coffee Break

  • 12:00 PM to 2:00 PM
  • TBD

Video Tutorial

Try it Out!

Now that you have learned how to add a listing, time to try it out!

  1. Add a news card block.
  2. Display news from one category only.
  3. Play around with some of the card block options.
  4. Add an event card block and try out options.
  5. Add a people card block and try out options.
  6. Add a video card block and try out some options.