Design

Card with no image	Card with an image	Card with an icon
Card pulling a post (will also display featured image if there is one)	Card with stretch link and no CTA	Card without stretch link and no CTA (no use cases yet)

Use Cases

Use when displaying content.

• Organizing multiple chunks of information
• Linking to other resources/pages

Fields

Populate From Post

• You can manually select a post from the dropdown. Since the dropdown pulls all posts, you can type the title of a post to filter through them. 
  • Note: When pulling a post, a CTA is automatically created. The CTA text is "Read full article", with an aria-label on the link that says "Read full article: {Article Title]" 
  • Check the "Stretch Link" and "Remove CTA" checkboxes in Configuration for better accessibility/less redundancy when using Populate From Post.

Title

• Add the title of the card.
  • Note: The class of the title depends on the Title Heading Size under Introduction. For example, if Title Heading Size is h2, the card title will be h3. 
  • Note: If you check "Remove CTA" in the Configuration, you must have something in this field for the link to work.

Subtitle

• You can add a subtitle to the card. This subtitle is displayed below the card title.

Image

• You can add an image from the Media Library to the card.

Microtitle

• You can add a microtitle to the card. This microtitle is displayed above the card title.

Content

• Add the content of the card. 

Link

• You can add a link to a card. 

CTA Style

• Select the style of the CTA of the card and footer CTA. Default style is primary.

Configuration Fields (affects all cards in a component)

Card Image Ratio 

• You can adjust the ratio of the image. Default ratio is 16x9.
• Icon
  • This option should be selected when svg icons are added to the image field of the cards
  • This will style the icon so that it is centered vertically and horizontally in the top of the card
  • It also adds a subtle gray accent line (or <hr>) below the icon
  • Note: do not mix icons and photos in cards within the same block; a cards within the same group should have icons or no images OR photos or no images

Stretch Link

• Check to add hover effect to the card and make whole card clickable.

Remove CTA

• Check to remove CTA from the bottom, linking the header/title field instead

Enable Card Shadows

• Adds shadow around cards

Coding Notes

02/2024 Changes: 

• Added "Remove CTA" functionality
• Fixed "Populate From Post" link 
• Removed aria-role=button from CTA

To implement a Remove CTA option on other cards:

1. Add a "Remove CTA?" checkbox to the ACF fields in configuration. You'll want it to default to false to avoid issues with changing existing blocks.
2. Add line in php for the block that defines the variable 
   1. $remove_cta = get_field('remove_cta');
3. Edit the line of code that displays the $title of the card
   1. Add if statement checking that there is a link, and that $remove_cta is true (checked)
   2. Add <a> element around the title. (You can basically copy the <a> element from the CTA in the card-footer, but remove the btn class and add a class for styling and remove the $link_title)
   3. Add a class onto the heading itself for styling- using if statement that checks for the $link_url, $remove_cta, and $stretch_link (class will be used to add &raquo;)
   4. Example:

      <?php if ($link_url && $remove_cta) : ?><a href="<?php echo esc_url($link_url); ?>" class="<?php if ($stretch_link) : ?>stretched-link stretch-link-heading<?php endif; ?> " <?php if ($link_target) : ?>target="<?php echo esc_attr($link_target); ?>" rel="external nofollow noreferrer" <?php endif; ?>><?php endif; ?> <?php if ($title) : ?><h<?php echo ($section_title_heading_size + 1); ?> class="card-title <?php if ($link_url && $remove_cta && $stretch_link) : ?>heading-link<?php endif?>"><?php echo $title; ?></h<?php echo ($section_title_heading_size + 1); ?>><?php endif; ?> <?php if ($link_url && $remove_cta) : ?></a><?php endif; //if remove CTA is checked, place link around title/heading and add 'stretch-link-heading' class to the link and 'heading-link' class to the heading for styling?>

4. Edit the line of code that displays the CTA
   1. Add '&& !$remove_cta ' to the if statement checking if there's a link, so that it only adds the CTA if remove_cta isn't checked

   2. <?php if ($link_url && !$remove_cta) : //if remove CTA is NOT checked, add CTA link at the bottom?> <div class="card-footer"> <a href="<?php echo esc_url($link_url); ?>" class="btn <?php the_sub_field('cta_style'); ?> <?php if ($stretch_link) : ?>stretched-link<?php endif; ?>" <?php if ($link_target) : ?>target="<?php echo esc_attr($link_target); ?>" rel="external nofollow noreferrer" <?php endif; ?> <?php if ($post_object) : ?>aria-label="Read the full article: <?php echo $title ?>"<?php endif; //added aria label for more accessible link text?>><?php echo esc_html($link_title); ?></a> </div> <?php endif; ?>

Test the code on the front end to make sure it works.