{"id":29032,"date":"2025-04-02T12:04:14","date_gmt":"2025-04-02T16:04:14","guid":{"rendered":"https:\/\/www.rochester.edu\/communications\/?page_id=29032"},"modified":"2026-09-29T12:21:08","modified_gmt":"2026-09-29T16:21:08","slug":"tab","status":"publish","type":"page","link":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/","title":{"rendered":"Tabs"},"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-29032","page","type-page","status-publish","hentry"],"acf":{"lead_in":"Rochester Core","display_title":"Tab component","subtitle":"Explore documentation around Rochester Core's Tab 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":"<h2>Overview<\/h2>","content":"The tab component allows users to switch between multiple content sections within the same space by clicking on labeled tabs. It helps organize information efficiently, reduce clutter and improve navigation. Each tab corresponds to a different content panel, and when a tab is selected, its associated content is displayed while hiding the others. This interaction creates a seamless and intuitive experience.\r\n\r\nBuilt with accessibility and responsiveness in mind, the tab component ensures smooth transitions and clear visual cues for active and inactive tabs. By grouping related information into tabs, this component enhances user engagement and efficiency in navigating complex interfaces. Watch the tutorial video and read the guide to learn more about using the card grid component.\r\n\r\n<strong>Topics on this page:<\/strong>\r\n<ol>\r\n \t<li><a href=\"#video\">How-to video<\/a><\/li>\r\n \t<li><a href=\"#options\">Tab options<\/a><\/li>\r\n \t<li><a href=\"#example\">Example tab component<\/a><\/li>\r\n<\/ol>","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":"<h2 style=\"text-align: center;\">1. How-to video: Tab component<\/h2>","content":"<div style=\"padding: 56.25% 0 0 0; position: relative;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" title=\"Tabs\" src=\"https:\/\/player.vimeo.com\/video\/1231049591?h=1503771e85&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479\" frameborder=\"0\"><\/iframe><\/div>\r\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>","background_color":"#f4f4f4","width":"width-medium"},{"acf_fc_layout":"accordion_new","anchor_id":"options","classes":"","title":"<h2>2. Tab options<\/h2>","description":"After selecting the tab component on any page that uses the Rochester Core, you'll be presented with the following options to customize the display and enter content.","background":"plain","background_color":"#ffffff","style":"row_blank","expand":"yes","accordions":[{"acf_fc_layout":"accordion","accordion_title":"Header","icon":"","row_content":"The title field is where to add the title or the heading for the entire tab component. Keep in mind titles for specific tabs will be added later. Styling the header as an H2 is recommend.","accordion_anchor":""},{"acf_fc_layout":"accordion","accordion_title":"Background color","icon":"","row_content":"The background color selector is where to choose the background color of the entire tab component. This color will serve as the backdrop for your tabs.","accordion_anchor":""},{"acf_fc_layout":"accordion","accordion_title":"Orientation","icon":"","row_content":"There are two ways to display the tabs:\r\n<ul>\r\n \t<li><strong>Horizontal:<\/strong> Choose \u2018Horizontal\u2019 for a left-to-right arrangement, supporting three tabs or more.<\/li>\r\n \t<li><strong>Vertical:<\/strong> Choose \u2018Vertical\u2019 for a top-to-bottom stack, supporting 3-6 tabs.<\/li>\r\n<\/ul>","accordion_anchor":""},{"acf_fc_layout":"title","sub_heading":"Adding tabs"},{"acf_fc_layout":"accordion","accordion_title":"Overline","icon":"","row_content":"Enter a brief overline text that appears above the tab title. Use this for labels or categorization.","accordion_anchor":""},{"acf_fc_layout":"accordion","accordion_title":"Title","icon":"","row_content":"Enter your tab title here. For best results, we recommend using H2 or H3 styling for clear emphasis.","accordion_anchor":""},{"acf_fc_layout":"accordion","accordion_title":"Text","icon":"","row_content":"Add supporting text for the tab. For clarity, use paragraph styling for detailed information or bullet lists for concise points. Keep text concise (400 characters max) to ensure readability and scannability. Focus on high-level insights and key takeaways.","accordion_anchor":""},{"acf_fc_layout":"accordion","accordion_title":"Image","icon":"","row_content":"Choose an image to visually represent this tab. Recommended image dimensions: Vertical orientation: 840px by 840px (1:1), with a centered focal point for optimal display. Horizontal orientation: 1216px by 840px (3:2), with a centered focal point for optimal display.","accordion_anchor":""},{"acf_fc_layout":"accordion","accordion_title":"Image placement","icon":"","row_content":"Choose where the image will be positioned on the tab to best fit your content layout. (Left or Right)","accordion_anchor":""}]},{"acf_fc_layout":"text","anchor":"example","css_class":"","title":"<h2>3. Example tab component<\/h2>","content":"Explore demos of the tab component below. You can create horizontal or vertical versions with gray, navy, or charcoal backgrounds.","background_color":"#ffffff","width":"width-medium"},{"acf_fc_layout":"tabs","anchor_id":"","classes":"","tabs_header":"<h3>Your education, your way<\/h3>","background_color":"#f4f4f4","tabs_orientation":"vertical","tabs":[{"acf_fc_layout":"tab","tab_overline":"Open curriculum","tab_title":"No required subjects","tab_text":"Rochester\u2019s signature open curriculum gives you the freedom to design your own path\u2014no core requirements holding you back. You can dive deep into the disciplines you love, test out new fields, and truly tailor your coursework to your passions.\r\n\r\nThat flexibility encourages intellectual risk-taking and cross-disciplinary connections you won\u2019t find at most universities. It\u2019s no surprise that 90% of incoming students say our open curriculum was a major factor in their decision to enroll.\r\n\r\n<a class=\"button ghost-button--blue\" href=\"https:\/\/www.rochester.edu\/about\/curriculum.html\">Explore the curriculum<\/a>","tab_image":29892,"tab_image_placement":"right"},{"acf_fc_layout":"tab","tab_overline":"Research at Rochester","tab_title":"Student research","tab_text":"As an R1 university, Rochester puts you squarely in the middle of groundbreaking work from day one. You\u2019ll pair up with faculty mentors on real projects\u2014whether you\u2019re in a lab, the field, or a studio\u2014bridging theory and practice in meaningful ways.\r\n\r\nOur smaller size means you won\u2019t be just another face in the crowd; you\u2019ll get hands-on guidance and real responsibility. That immersive experience sparks curiosity and builds the skills employers and grad schools crave.\r\n\r\n<a class=\"button ghost-button--blue\" href=\"https:\/\/www.rochester.edu\/research\/students.html\">Research in action<\/a>","tab_image":29902,"tab_image_placement":"right"},{"acf_fc_layout":"tab","tab_overline":"Fifth-year opportunity","tab_title":"Take Five","tab_text":"The Take Five program is one of the only tuition-free fifth-year offerings in higher ed, letting you press pause on your major and pursue something entirely new. Use that extra year to launch a startup, learn a language, produce a creative work, or explore an emerging field outside your degree.\r\n\r\nYou get the same support and access you\u2019ve had all four years\u2014just with room to roam. It\u2019s a chance to deepen your roots at Rochester while branching out in ways you never imagined.\r\n\r\n<a class=\"button ghost-button--blue\" href=\"https:\/\/www.rochester.edu\/college\/ccas\/undergraduate\/opportunities\/takefive\/index.html\">What is Take Five?<\/a>","tab_image":29912,"tab_image_placement":"right"},{"acf_fc_layout":"tab","tab_overline":"Global experiences","tab_title":"Study abroad","tab_text":"Broaden your perspective with one of hundreds of study-abroad programs in more than 50 countries\u2014from art studios in Florence to sustainability labs in Costa Rica. Our experienced advisors help you find the perfect fit, navigate funding, and ensure your safety and well-being overseas.\r\n\r\nLiving and learning in a new culture will sharpen your language skills, deepen your empathy, and give you insights you can\u2019t get in a classroom alone. With 25% of Rochester students participating, study abroad is a cornerstone of our global-minded community.\r\n\r\n<a class=\"button ghost-button--blue\" href=\"https:\/\/www.rochester.edu\/education-abroad\/\">Discover education abroad<\/a>","tab_image":29922,"tab_image_placement":"right"}]},{"acf_fc_layout":"tabs","anchor_id":"","classes":"","tabs_header":"<h3>Your education, your way<\/h3>","background_color":"#00205b","tabs_orientation":"horizontal","tabs":[{"acf_fc_layout":"tab","tab_overline":"Open curriculum","tab_title":"No required subjects","tab_text":"Rochester\u2019s signature open curriculum gives you the freedom to design your own path\u2014no core requirements holding you back. You can dive deep into the disciplines you love, test out new fields, and truly tailor your coursework to your passions.\r\n\r\nThat flexibility encourages intellectual risk-taking and cross-disciplinary connections you won\u2019t find at most universities. It\u2019s no surprise that 90% of incoming students say our open curriculum was a major factor in their decision to enroll.\r\n\r\n<a class=\"button ghost-button--white\" href=\"https:\/\/www.rochester.edu\/about\/curriculum.html\">Explore the curriculum<\/a>","tab_image":29882,"tab_image_placement":"right"},{"acf_fc_layout":"tab","tab_overline":"Research at Rochester","tab_title":"Student research","tab_text":"As an R1 university, Rochester puts you squarely in the middle of groundbreaking work from day one. You\u2019ll pair up with faculty mentors on real projects\u2014whether you\u2019re in a lab, the field, or a studio\u2014bridging theory and practice in meaningful ways.\r\n\r\nOur smaller size means you won\u2019t be just another face in the crowd; you\u2019ll get hands-on guidance and real responsibility. That immersive experience sparks curiosity and builds the skills employers and grad schools crave.\r\n\r\n<a class=\"button ghost-button--white\" href=\"https:\/\/www.rochester.edu\/research\/students.html\">Research in action<\/a>","tab_image":29992,"tab_image_placement":"right"},{"acf_fc_layout":"tab","tab_overline":"Fifth-year opportunity","tab_title":"Take Five","tab_text":"The Take Five program is one of the only tuition-free fifth-year offerings in higher ed, letting you press pause on your major and pursue something entirely new. Use that extra year to launch a startup, learn a language, produce a creative work, or explore an emerging field outside your degree.\r\n\r\nYou get the same support and access you\u2019ve had all four years\u2014just with room to roam. It\u2019s a chance to deepen your roots at Rochester while branching out in ways you never imagined.\r\n\r\n<a class=\"button ghost-button--white\" href=\"https:\/\/www.rochester.edu\/college\/ccas\/undergraduate\/opportunities\/takefive\/index.html\">What is Take Five?<\/a>","tab_image":30012,"tab_image_placement":"right"},{"acf_fc_layout":"tab","tab_overline":"Global experiences","tab_title":"Study abroad","tab_text":"Broaden your perspective with one of hundreds of study-abroad programs in more than 50 countries\u2014from art studios in Florence to sustainability labs in Costa Rica. Our experienced advisors help you find the perfect fit, navigate funding, and ensure your safety and well-being overseas.\r\n\r\nLiving and learning in a new culture will sharpen your language skills, deepen your empathy, and give you insights you can\u2019t get in a classroom alone. With 25% of Rochester students participating, study abroad is a cornerstone of our global-minded community.\r\n\r\n<a class=\"button ghost-button--blue ghost-button--white\" href=\"https:\/\/www.rochester.edu\/education-abroad\/\">Discover education abroad<\/a>","tab_image":30002,"tab_image_placement":"right"}]}]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tabs - University Marketing and Communications<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tabs - University Marketing and Communications\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/\" \/>\n<meta property=\"og:site_name\" content=\"University Marketing and Communications\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-29T16:21:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.rochester.edu\/communications\/wp-content\/uploads\/2025\/10\/URochester-Link-Preview-Marcom-ImageRight.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/resources\\\/web-seo\\\/wordpress-theme\\\/tab\\\/\",\"url\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/resources\\\/web-seo\\\/wordpress-theme\\\/tab\\\/\",\"name\":\"Tabs - University Marketing and Communications\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/#website\"},\"datePublished\":\"2025-04-02T16:04:14+00:00\",\"dateModified\":\"2026-09-29T16:21:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/resources\\\/web-seo\\\/wordpress-theme\\\/tab\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/resources\\\/web-seo\\\/wordpress-theme\\\/tab\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/resources\\\/web-seo\\\/wordpress-theme\\\/tab\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Digital resources\",\"item\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/resources\\\/web-seo\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Rochester Core resources\",\"item\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/resources\\\/web-seo\\\/wordpress-theme\\\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Tabs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/#website\",\"url\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/\",\"name\":\"University Marketing and Communications\",\"description\":\"ÌÇÐÄ´«Ã½\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/#organization\",\"name\":\"University Marketing and Communications\",\"url\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/university-communications.jpg\",\"contentUrl\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/university-communications.jpg\",\"width\":1200,\"height\":630,\"caption\":\"University Marketing and Communications\"},\"image\":{\"@id\":\"https:\\\/\\\/www.rochester.edu\\\/communications\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tabs - University Marketing and Communications","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/","og_locale":"en_US","og_type":"article","og_title":"Tabs - University Marketing and Communications","og_url":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/","og_site_name":"University Marketing and Communications","article_modified_time":"2026-09-29T16:21:08+00:00","og_image":[{"url":"https:\/\/www.rochester.edu\/communications\/wp-content\/uploads\/2025\/10\/URochester-Link-Preview-Marcom-ImageRight.png","width":1200,"height":630,"type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/","url":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/","name":"Tabs - University Marketing and Communications","isPartOf":{"@id":"https:\/\/www.rochester.edu\/communications\/#website"},"datePublished":"2025-04-02T16:04:14+00:00","dateModified":"2026-09-29T16:21:08+00:00","breadcrumb":{"@id":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/tab\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.rochester.edu\/communications\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/www.rochester.edu\/communications\/resources\/"},{"@type":"ListItem","position":3,"name":"Digital resources","item":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/"},{"@type":"ListItem","position":4,"name":"Rochester Core resources","item":"https:\/\/www.rochester.edu\/communications\/resources\/web-seo\/wordpress-theme\/"},{"@type":"ListItem","position":5,"name":"Tabs"}]},{"@type":"WebSite","@id":"https:\/\/www.rochester.edu\/communications\/#website","url":"https:\/\/www.rochester.edu\/communications\/","name":"University Marketing and Communications","description":"ÌÇÐÄ´«Ã½","publisher":{"@id":"https:\/\/www.rochester.edu\/communications\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.rochester.edu\/communications\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.rochester.edu\/communications\/#organization","name":"University Marketing and Communications","url":"https:\/\/www.rochester.edu\/communications\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.rochester.edu\/communications\/#\/schema\/logo\/image\/","url":"https:\/\/www.rochester.edu\/communications\/wp-content\/uploads\/2023\/03\/university-communications.jpg","contentUrl":"https:\/\/www.rochester.edu\/communications\/wp-content\/uploads\/2023\/03\/university-communications.jpg","width":1200,"height":630,"caption":"University Marketing and Communications"},"image":{"@id":"https:\/\/www.rochester.edu\/communications\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.rochester.edu\/communications\/wp-json\/wp\/v2\/pages\/29032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rochester.edu\/communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.rochester.edu\/communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.rochester.edu\/communications\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rochester.edu\/communications\/wp-json\/wp\/v2\/comments?post=29032"}],"version-history":[{"count":14,"href":"https:\/\/www.rochester.edu\/communications\/wp-json\/wp\/v2\/pages\/29032\/revisions"}],"predecessor-version":[{"id":36322,"href":"https:\/\/www.rochester.edu\/communications\/wp-json\/wp\/v2\/pages\/29032\/revisions\/36322"}],"up":[{"embeddable":true,"href":"https:\/\/www.rochester.edu\/communications\/wp-json\/wp\/v2\/pages\/14392"}],"wp:attachment":[{"href":"https:\/\/www.rochester.edu\/communications\/wp-json\/wp\/v2\/media?parent=29032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}