Card - Traditional

Design

Card with no image	Card with an image	Card pulling a post	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.

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:

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.
Add line in php for the block that defines the variable
1. $remove_cta = get_field('remove_cta');

Edit the line of code that displays the $title of the card

Add if statement checking that there is a link, and that $remove_cta is true (checked)
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)
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 »)

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?>

Edit the line of code that displays the CTA

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

<?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.

Page tree