{"id":140,"date":"2024-07-05T16:06:54","date_gmt":"2024-07-05T16:06:54","guid":{"rendered":"https:\/\/maddiecoe.com\/samples\/?page_id=140"},"modified":"2025-01-10T18:15:20","modified_gmt":"2025-01-10T18:15:20","slug":"content-elements","status":"publish","type":"page","link":"https:\/\/maddiecoe.com\/samples\/demos-samples\/content-elements\/","title":{"rendered":"Content Elements"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<h2 class=\"wp-block-heading\" id=\"bs-acrdn-Z9Cm8z\">Links<\/h2>\n\n\n\n<p class=\"fs-6\">Links can be stylized beyond a standard text hyperlink to help draw attention to specific content. Examples of this are <strong>links lists<\/strong>, which are often featured in the sidebar of a page, and <strong>button links<\/strong>.<\/p>\n\n\n\n<ul id=\"bs-acrdn-Z9Cm8z\" class=\"wp-block-list links-list\">\n<li><a href=\"#\">Link Going Somewhere<\/a><\/li>\n\n\n\n<li><a href=\"#\">Another Link<\/a><\/li>\n\n\n\n<li><a href=\"#\">One More Link<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex gap-1 mb-3\">\n<div class=\"wp-block-button btn-link-icon\"><a class=\"wp-block-button__link wp-element-button btn btn-primary\" style=\"border-radius:3px\">Button<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\n<h2 class=\"wp-block-heading\" id=\"bs-acrdn-Z1kDpOe\">Toggles<\/h2>\n\n\n\n<p id=\"bs-acrdn-Z1kDpOe\" class=\"fs-6\">Toggles and accordions allow for more content to be featured on a page while helping to avoid overwhelm by not displaying everything at once. By sectioning out the content within open-and-close toggles, the user is given control over how much information visible at any given time.<\/p>\n\n\n\n<div class=\"accordion accordion-flush\" id=\"bs-acrdn-Z1xDUrb\">\n<div class=\"accordion-item\"><h3 class=\"accordion-header\" id=\"bs-acrdn-Z1xDUrb-item-0\"><button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#bs-acrdn-Z1xDUrb-item-0-collapse\" aria-expanded=\"false\" aria-controls=\"bs-acrdn-Z1xDUrb-item-0-collapse\"><span>Accordion Item<\/span><\/button><\/h3><div data-bs-parent=\"#bs-acrdn-Z1xDUrb\" id=\"bs-acrdn-Z1xDUrb-item-0-collapse\" class=\"accordion-collapse collapse\" aria-labelledby=\"bs-acrdn-Z1xDUrb-item-0\"><div class=\"accordion-body\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar neque laoreet suspendisse interdum consectetur libero. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Ante metus dictum at tempor commodo ullamcorper a lacus. Lectus magna fringilla urna porttitor rhoncus dolor.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"accordion-item\"><h3 class=\"accordion-header\" id=\"bs-acrdn-Z1xDUrb-item-1\"><button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#bs-acrdn-Z1xDUrb-item-1-collapse\" aria-expanded=\"false\" aria-controls=\"bs-acrdn-Z1xDUrb-item-1-collapse\"><span>Accordion Item<\/span><\/button><\/h3><div data-bs-parent=\"#bs-acrdn-Z1xDUrb\" id=\"bs-acrdn-Z1xDUrb-item-1-collapse\" class=\"accordion-collapse collapse\" aria-labelledby=\"bs-acrdn-Z1xDUrb-item-1\"><div class=\"accordion-body\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies mi eget mauris pharetra et ultrices neque.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tortor at risus viverra adipiscing at in tellus.<\/li>\n\n\n\n<li>Volutpat consequat mauris nunc congue nisi.<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"accordion-item\"><h3 class=\"accordion-header\" id=\"bs-acrdn-Z1xDUrb-item-2\"><button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#bs-acrdn-Z1xDUrb-item-2-collapse\" aria-expanded=\"false\" aria-controls=\"bs-acrdn-Z1xDUrb-item-2-collapse\"><span>Accordion Item<\/span><\/button><\/h3><div data-bs-parent=\"#bs-acrdn-Z1xDUrb\" id=\"bs-acrdn-Z1xDUrb-item-2-collapse\" class=\"accordion-collapse collapse\" aria-labelledby=\"bs-acrdn-Z1xDUrb-item-2\"><div class=\"accordion-body\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. Ipsum nunc aliquet bibendum enim facilisis gravida. Sed risus ultricies tristique nulla. Odio ut sem nulla pharetra. Est sit amet facilisis magna. Magna fermentum iaculis eu non diam phasellus. Suspendisse sed nisi lacus sed viverra tellus. Varius duis at consectetur lorem donec massa sapien faucibus. Nunc id cursus metus aliquam eleifend mi in nulla. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Praesent tristique magna sit amet. Neque viverra justo nec ultrices dui sapien eget. Ut venenatis tellus in metus vulputate eu. Nisl suscipit adipiscing bibendum est ultricies.<\/p>\n\n\n\n<p>Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Feugiat in fermentum posuere urna nec tincidunt. Adipiscing bibendum est ultricies integer quis auctor elit sed. Sit amet massa vitae tortor condimentum lacinia quis vel. Aliquet lectus proin nibh nisl condimentum id venenatis a. Egestas integer eget aliquet nibh praesent tristique magna sit. Gravida quis blandit turpis cursus in. Donec enim diam vulputate ut pharetra sit. Ultricies mi eget mauris pharetra et ultrices neque. Et magnis dis parturient montes nascetur. Quisque sagittis purus sit amet volutpat. Erat velit scelerisque in dictum non consectetur a erat nam. Massa eget egestas purus viverra accumsan in. At tempor commodo ullamcorper a. Donec adipiscing tristique risus nec feugiat in fermentum posuere urna.<\/p>\n<\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<h2 class=\"wp-block-heading lilac\">Tables<\/h2>\n\n\n\n<p class=\"pb-3 fs-6\">Tables can be used to present data-driven information in an easily digestible manner. The example below is a pricing table for beauty services, with one column stylized to highlight member pricing.<\/p>\n\n\n\n<div class=\"container table-container\">\n<table id=\"tablepress-1\" class=\"tablepress tablepress-id-1 compact\">\n<thead>\n<tr class=\"row-1\">\n\t<th class=\"column-1\">Service<br \/>\n<div class=\"table-divider\"><\/div><\/th><th class=\"column-2\">Non-Member Pricing<br \/>\n<div class=\"table-divider\"><\/div><\/th><th class=\"column-3\">Member Pricing<br \/>\n<div class=\"table-divider\"><\/div><\/th><th class=\"column-4\">Senior\/60+ Discount<br \/>\n<div class=\"table-divider\"><\/div><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr class=\"row-2\">\n\t<td class=\"column-1\">Manicure<\/td><td class=\"column-2\">$25<\/td><td class=\"column-3\">$18<\/td><td class=\"column-4\">$5 off<\/td>\n<\/tr>\n<tr class=\"row-3\">\n\t<td class=\"column-1\">Pedicure<\/td><td class=\"column-2\">$35<\/td><td class=\"column-3\">$24<\/td><td class=\"column-4\">$5 off<\/td>\n<\/tr>\n<tr class=\"row-4\">\n\t<td class=\"column-1\">Gel<\/td><td class=\"column-2\">$45<\/td><td class=\"column-3\">$36<\/td><td class=\"column-4\">$10 off<\/td>\n<\/tr>\n<tr class=\"row-5\">\n\t<td class=\"column-1\">Acrylic<\/td><td class=\"column-2\">$60<\/td><td class=\"column-3\">$48<\/td><td class=\"column-4\">$10 off<\/td>\n<\/tr>\n<tr class=\"row-6\">\n\t<td class=\"column-1\">Nail Art<\/td><td class=\"column-2\">$15<\/td><td class=\"column-3\">$12<\/td><td class=\"column-4\">N\/A<\/td>\n<\/tr>\n<tr class=\"row-7\">\n\t<td class=\"column-1\">Eyebrow Threading<\/td><td class=\"column-2\">$14<\/td><td class=\"column-3\">$11<\/td><td class=\"column-4\">$5 off<\/td>\n<\/tr>\n<tr class=\"row-8\">\n\t<td class=\"column-1\">Eyelash Extensions<\/td><td class=\"column-2\">$120<\/td><td class=\"column-3\">$96<\/td><td class=\"column-4\">$15 off<\/td>\n<\/tr>\n<tr class=\"row-9\">\n\t<td class=\"column-1\">Microderm Facial<\/td><td class=\"column-2\">$80<\/td><td class=\"column-3\">$68<\/td><td class=\"column-4\">N\/A<\/td>\n<\/tr>\n<tr class=\"row-10\">\n\t<td class=\"column-1\">Nail Trim<\/td><td class=\"column-2\">$15<\/td><td class=\"column-3\">$12<\/td><td class=\"column-4\">$3 off<\/td>\n<\/tr>\n<tr class=\"row-11\">\n\t<td class=\"column-1\">Eyebrow Wax<\/td><td class=\"column-2\">$12<\/td><td class=\"column-3\">$10<\/td><td class=\"column-4\">N\/A<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<!-- #tablepress-1 from cache -->\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Links Links can be stylized beyond a standard text hyperlink to help draw attention to specific content. Examples of this are links lists, which are often featured in the sidebar of a page, and button links. Toggles Toggles and accordions allow for more content to be featured on a page while helping to avoid overwhelm [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":313,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/page-sidebar-none.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-140","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/maddiecoe.com\/samples\/wp-json\/wp\/v2\/pages\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maddiecoe.com\/samples\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maddiecoe.com\/samples\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maddiecoe.com\/samples\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maddiecoe.com\/samples\/wp-json\/wp\/v2\/comments?post=140"}],"version-history":[{"count":53,"href":"https:\/\/maddiecoe.com\/samples\/wp-json\/wp\/v2\/pages\/140\/revisions"}],"predecessor-version":[{"id":660,"href":"https:\/\/maddiecoe.com\/samples\/wp-json\/wp\/v2\/pages\/140\/revisions\/660"}],"up":[{"embeddable":true,"href":"https:\/\/maddiecoe.com\/samples\/wp-json\/wp\/v2\/pages\/313"}],"wp:attachment":[{"href":"https:\/\/maddiecoe.com\/samples\/wp-json\/wp\/v2\/media?parent=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}