  {"id":415,"date":"2018-06-11T15:17:29","date_gmt":"2018-06-11T15:17:29","guid":{"rendered":"http:\/\/bfuller.local\/wordpress\/styleguide\/?page_id=415"},"modified":"2025-11-10T15:49:43","modified_gmt":"2025-11-10T15:49:43","slug":"panels","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/panels\/","title":{"rendered":"Panels"},"content":{"rendered":"\n<p class=\"type-intro\">Use panels to provide a deep, visual context for a particular topic. A panel is different from a card in that a panel may include multiple links or buttons. Panels are suited to teasing a story, showcasing a program, or highlighting an important initiative.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Here&#8217;s an example panel:<\/p>\n\n\n<section class=\"cl-wrapper cl-panel-wrapper\"><div class=\"cl-panel  \"><figure><img decoding=\"async\" src=\"https:\/\/www.uri.edu\/wordpress\/wp-content\/uploads\/home\/sites\/7\/annie-spratt-CpnH4FfNBUw-unsplash.jpg\" srcset=\"\" alt=\"A polar bear resting on ice\"><\/figure><article>\n\n<h1 class=\"wp-block-heading\">Expeditions<\/h1>\n\n\n\n<p>Each year, we conduct more than a dozen expeditions around the world.  In pursuit of our <a href=\"#\">research goals<\/a>, teams travel to some of the remotest regions and endure some of the harshest conditions on the planet.<\/p>\n\n\n\n<p>Our discoveries have advanced the fields of climate change, plate tectonics, and thermodynamics.<\/p>\n\n\n<a class=\"cl-button  \" href=\"#\" title=\"\">Go Exploring<\/a>\n<\/article><\/div><\/section>\n\n\n<p>Panels contain an image and accompanying text and actions, like links and buttons.  Unlike cards, panels may contain multiple links and longer, more descriptive text.  By default, text appears on the left-hand side and the image appears on the right-hand side, but this layout can be reversed.  On mobile devices, panels adopt a stacked layout similar to cards, with the image appearing above the text block.<\/p>\n\n\n\n<p>Images in panels are automatically cropped to best fill the space provided.  The panel&#8217;s height is determined not by the image, but by the amount of content in the text area.  On mobile devices, where panel content is stacked, the image will be displayed according to its original aspect ratio, without cropping.<\/p>\n\n\n\n<p>For a more dramatic presentation, panels may be formatted as &#8220;super&#8221;:<\/p>\n\n\n<section class=\"cl-wrapper cl-panel-wrapper\"><div class=\"cl-panel-super  \"><div class=\"cl-panel-super-blur\" style=\"background-image:url(https:\/\/www.uri.edu\/wordpress\/wp-content\/uploads\/home\/sites\/7\/annie-spratt-CpnH4FfNBUw-unsplash.jpg)\"><\/div><div class=\"cl-panel-super-content\"><div class=\"cl-panel-super-image\"><img decoding=\"async\" src=\"https:\/\/www.uri.edu\/wordpress\/wp-content\/uploads\/home\/sites\/7\/annie-spratt-CpnH4FfNBUw-unsplash.jpg\" srcset=\"\" alt=\"A polar bear resting on ice\"><\/div><div class=\"cl-panel-super-text\"><p>\n\n<h1 class=\"wp-block-heading\">Expeditions<\/h1>\n\n\n\n<p>Our discoveries have advanced the fields of climate change, plate tectonics, and thermodynamics.<\/p>\n\n\n<a class=\"cl-button  \" href=\"#\" title=\"\">Go Exploring<\/a>\n<\/p><\/div><\/div><\/div><\/section>\n\n\n<p>&#8220;Super&#8221; panels are full-screen components and are best suited for use with vertical images, though any image will work.  As with default panels, the arrangement of text and image may be reversed, and content will appear stacked on mobile devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Panel<\/h2>\n\n\n\n<p>On sites using the Block Editor, panels (<img decoding=\"async\" src=\"https:\/\/www.uri.edu\/wordpress\/wp-content\/uploads\/home\/sites\/7\/panel.png\" alt=\"Panel block editor icon\" class=\"wysiwyg-icon\">) can be added from the block library, under the Component Library section. Panel content can be edited directly, and options can be set in the sidebar.<\/p>\n\n\n\n<p>On sites using the older Classic Editor, panels can be added by choosing the Panel pictograph (<img decoding=\"async\" src=\"https:\/\/www.uri.edu\/wordpress\/wp-content\/uploads\/home\/sites\/7\/panel_wysiwyg.png\" alt=\"Panel WYSIWYG toolbar icon\" class=\"wysiwyg-icon\">) from the editor&#8217;s toolbar. Use the editor dialogue to add content and adjust options. To edit the panel later, double-click the panel preview to show the editor dialogue again.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use panels to provide a deep, visual context for a particular topic. A panel is different from a card in that a panel may include multiple links or buttons. Panels are suited to teasing a story, showcasing a program, or highlighting an important initiative. Overview Here&#8217;s an example panel: Panels contain an image and accompanying [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":188,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-415","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=415"}],"version-history":[{"count":11,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/415\/revisions"}],"predecessor-version":[{"id":2809,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/415\/revisions\/2809"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/188"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}