{"id":16422,"date":"2023-11-13T14:22:05","date_gmt":"2023-11-13T19:22:05","guid":{"rendered":"https:\/\/www.rochester.edu\/communications\/?page_id=16422"},"modified":"2026-07-13T10:03:41","modified_gmt":"2026-07-13T14:03:41","slug":"card-grid","status":"publish","type":"page","link":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/card-grid\/","title":{"rendered":"Card Grid"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":36,"featured_media":0,"parent":14392,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/one-column.php","meta":{"_acf_changed":false,"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-16422","page","type-page","status-publish","hentry"],"acf":{"lead_in":"Rochester Core","display_title":"Card grid component","subtitle":"Explore documentation around Rochester Core's Card Grid component.","call_to_action":"","hero_image_placement":"no_image","hero_media":"images","hero_pattern_option":"","hero_video":"","hero_image_landing":"","hero_image_landing_two":"","hero_image_landing_three":"","content_modules_above":[{"acf_fc_layout":"text","anchor":"","css_class":"mt-0 pt-0","title":"

Overview<\/h2>","content":"The card grid is an excellent tool for showcasing important information in an easily digestible form. This allows users to scan the page and quickly find the information they want. They\u2019re instrumental because they can be set up as buttons to navigate additional pertinent information quickly.\r\n\r\nCommon uses for the card grid include quick highlights, bullet points of information, or navigational cards. Cards in the card grid can contain images, headlines, and body text, offering much flexibility in presenting the desired information. Watch the tutorial video and read the guide to learn more about using the card grid component.\r\n

Topics on this page:<\/strong><\/h3>\r\n
    \r\n \t
  1. How-to video<\/a><\/li>\r\n \t
  2. Card Grid options<\/a><\/li>\r\n \t
  3. Example card grid<\/a><\/li>\r\n<\/ol>\r\n

    June 2025 updates:<\/h3>\r\n

    We\u2019ve made a series of improvements to the Card component to enhance consistency, alignment, and flexibility across layouts:<\/p>\r\n\r\n

      \r\n \t
    • \r\n

      Title styling<\/strong><\/p>\r\n\r\n

        \r\n \t
      • \r\n

        Removed overrides preventing standard heading styles (H1\u2013H6) from displaying<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t

      • \r\n

        Vertical spacing<\/strong><\/p>\r\n\r\n

          \r\n \t
        • \r\n

          Reduced excess spacing around cards for a tighter, more consistent layout<\/p>\r\n<\/li>\r\n \t

        • \r\n

          Grouped overline, title, and body text together to maintain vertical rhythm<\/p>\r\n<\/li>\r\n \t

        • \r\n

          Repositioned flexible space so that CTAs align consistently across cards<\/p>\r\n<\/li>\r\n \t

        • \r\n

          Ensured these updates apply across all grid layouts (1\u20134 columns)<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t

        • \r\n

          Card CTA buttons<\/strong><\/p>\r\n\r\n

            \r\n \t
          • \r\n

            Applied standard ghost button styling (a.button<\/code>) for visual consistency<\/p>\r\n<\/li>\r\n \t

          • \r\n

            Adjusted arrow-only CTAs to match size and spacing used in ghost buttons<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t

          • \r\n

            Card group CTA<\/strong><\/p>\r\n\r\n

              \r\n \t
            • \r\n

              Confirmed styling uses the ghost button standard for consistency with other components<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>","background_color":"#ffffff","width":"width-large"}],"sidebar":"show__sidebar","sidebar_feed":"menu_select","menu":"342","page_links":null,"sub_menu":"","content_modules":[{"acf_fc_layout":"text","anchor":"video","css_class":"","title":"

              1. How-to video: Card Grid component<\/h2>","content":"