10. Card blocks

Featured image for Pitchfork Tutorial No. 10: Card blocks.

Use UDS Card blocks to display your content in that quintessential ASU style. Learn to add new cards, use card patterns and update legacy cards.

Types of UDS Cards

UDS (Universal Design System) Card Blocks are way to display content to make it easily scannable.

There are several types of UDS Cards available:

  • Standard Card – A card with an image, heading, text and a button.
  • Icon Header Card – A card featuring an icon header alongside text and a button.
  • Image+Link Card – A basic card with image and a text link area (instead of a button).
  • Degree Card – Used for displaying degree program information.
  • Event Card – Used to displays event details.
  • Story Card – Used to represent a news story in card form.
Screenshot of a Standard UDS Card with image, text and button.
Screenshot of a Degree Card.
Screenshot of an Event Card.
Screenshot of an Icon Header Card with an arrow pointing to the icon header.
Screenshot of an Image+ Link Card with arrows pointing to the image and link positions.
Screenshot of a Story Card with arrows pointing to image, link and tags positions.

Adding a standard UDS Card

  • In the block editor panel on the left, click the block inserter + button to add a block.
  • Search for UDS Card in the Pitchfork Blocks section (scroll to the bottom) and select it.
  • Customize the card by adding text, an image and one or two buttons as needed.
Screenshot of a WordPress block editor panel with an arrow pointing to the + icon.
A screenshot of the block editor panel highlighting Pitchfork Blocks, UDS Cards and a Standard UDS Card.

Loading card patterns for specific cards

  1. Open the block inserter + button in the block editor.
  2. Navigate to the Patterns tab.
  3. Select Pitchfork: Cards to find predefined layouts for Image+Link, Icon Header, Event, Story and Degree cards.
  4. Select and insert the pattern that matches your needs and proceed with editing.
A screenshot of a WordPress block editor panel highlighting Pitchfork Cards in the Patterns tab and showing various cards.

Loading card layout patterns

  1. Go to the Patterns tab in the block inserter.
  2. Choose Pitchfork: Card Layout to view predefined layouts of multiple cards.
  3. Select an appropriate layout and customize the content within each card as required.
A screenshot of a WordPress block editor panel highlighting Pitchfork Card Layouts in the Patterns tab and showing various card layouts.

Any elements left blank in a UDS Card will not display on the published page. You are not required to delete empty elements, but you can if you wish.

Updating legacy UDS Cards

Legacy UDS Cards will appear with a pink background in the editor, indicating they need to be updated.

A screenshot of UDS Cards showing the pink one as the legacy card and the white one below as the new card.

Do not directly edit or delete the old card block. Use the method given below to reduce the risk of formatting issues.

Replacing an old card block

  1. Preview the page in a new tab – Open the page in preview mode to see the content of the legacy card.
  2. Return to the page editor and add a new UDS Card block – Using the steps mentioned above, insert a fresh UDS Card block either before or after the existing card.
  3. Copy the content from the Preview tab – Highlight and copy the text from the legacy card in the preview tab.
  4. Paste the content in the editor – Transfer the copied content into the new card block. For images, just add them to the new card through the usual method (from the media library).
  5. Remove the old card – Preview the page with both old and new cards. Once confirmed, delete the outdated pink-highlighted card in the editor.
A screenshot of old and new UDS cards with text indicating to insert new cards before or after the existing UDS Cards.
A screenshot of old and new UDS cards with text indicating to copy and paste content from old card to new card.
A screenshot of the preview of the old and new UDS cards with text indicating to compare the content.
A screenshot of the block editor panel and the old UDS card block highlighting the option of Delete.

More information

Read the Pitchfork: Cards documentation and the Pitchfork: Card Layouts documentation.

Previous

9. Hero blocks

Next

11. People Profile blocks