{"id":13668,"date":"2023-12-04T11:56:41","date_gmt":"2023-12-04T17:56:41","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?post_type=ht_kb&#038;p=13668"},"modified":"2023-12-04T11:56:41","modified_gmt":"2023-12-04T17:56:41","slug":"wrap-content-in-cards-tabs","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/wrap-content-in-cards-tabs","title":{"rendered":"Wrap Content in Cards\/Tabs"},"content":{"rendered":"\n<p>m-Power generated content is built with the idea that the developer will probably want to customize the output to make the look and feel of the UI their own. With this in mind, m-Painter gives developers many options to easily add their customizations. One such way to do that is to wrap content into either cards or tabs. These components give content additional structure and allows to be better defined\/organized.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Video Walkthrough<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Wrapping Content in Cards\/Tabs via m-Painter\" width=\"643\" height=\"362\" src=\"https:\/\/www.youtube.com\/embed\/j3cuU0TMLZU?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Implementation<\/h3>\n\n\n\n<p>Open m-Painter and navigate to the area you wish to wrap. When you select the element, a blue label will appear as will a blue border around the selected element. If that is not the correct element, you can press the up arrow within the blue menu to select the parent element. Continue to do this until the correct element has been selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap1.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>From the blue menu, click on the icon of the square wrapped in another square. This icon represents the functionality to wrap the selected element into a container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap2.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>From there a menu will appear allowing you to choose what you would like to wrap your content in. This documentation will cover wrapping in either cards or tabs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap3.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Wrapping Content in Cards<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap4.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Choose one of the pre-built cards from the popup window.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Keep in mind that you can utilize the styling panel to adjust any color\/fonts\/images that you may want to adjust. Ultimately, these pre-built cards are built as a starting point to be adjusted\/tweaked to perfect to meet your needs.<\/p>\n\n\n\n<p>The following window, Configure Element Wrapper, allows you tell m-Painter if you want:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Wrap the selected element into the card<\/li>\n\n\n\n<li>Place the new card inside of the selected element<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">While there are use cases for both, developers will almost always pick the first option, &#8220;Wrap the selected element&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap5.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>When completed, your application may look something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap6.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-success\">Please adjust the &#8220;Primary header&#8221; text to a more applicable label based on your application.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wrapping Content in Tabs<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap7.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Choose one of the pre-built tab layouts from the popup window.<\/p>\n\n\n\n<p>The following window, Configure Element Wrapper, allows you tell m-Painter if you want:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Wrap the selected element into the card<\/li>\n\n\n\n<li>Place the new card inside of the selected element<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">While there are use cases for both, developers will almost always pick the first option, &#8220;Wrap the selected element&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap8.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>When completed, your application may look something like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap9.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon\">Please change the labels for Tab 1 or Tab 2 to better label based on your application&#8217;s needs.<\/p>\n\n\n\n<p>m-Painter will create a two tab layout, however you may want to add additional tabs. To do so click on either Tab 1 or Tab 2. Then, in the right side panel, click &#8220;Add Tab.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/wrap10.png\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>m-Power generated content is built with the idea that the developer will probably want to customize the output to make the look and feel of the UI their own. With this in mind, m-Painter gives developers many options to easily add their customizations. One such way to do that is&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[255],"ht-kb-tag":[],"class_list":["post-13668","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-mpainter"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=13668"}],"version-history":[{"count":1,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13668\/revisions"}],"predecessor-version":[{"id":13670,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/13668\/revisions\/13670"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=13668"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=13668"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=13668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}