{"id":6522,"date":"2024-08-08T19:30:30","date_gmt":"2024-08-08T16:30:30","guid":{"rendered":"https:\/\/bitimpulse.com\/?post_type=manual&#038;p=6522"},"modified":"2024-08-08T19:30:30","modified_gmt":"2024-08-08T16:30:30","slug":"makety-kartok","status":"publish","type":"manual","link":"https:\/\/bitimpulse.com\/en\/manual\/stvorennya-interaktyvnogo-deshborda\/kartochky\/makety-kartok\/","title":{"rendered":"Card Layouts"},"content":{"rendered":"<p>To change a card&#8217;s layout, click the \u201cOptions\u201d button (the <a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_1_8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6493\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_1_8.png\" alt=\"\" width=\"16\" height=\"19\" \/><\/a>\u00a0icon) displayed next to the data item container in the \u201cCards\u201d section:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_1-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6544\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_1-2.png\" alt=\"\" width=\"231\" height=\"68\" \/><\/a><\/p>\n<p>In the form that opens, the following layouts are available on the \u201cLayout Options\u201d tab:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_2-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6543\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_2-2.png\" alt=\"\" width=\"581\" height=\"430\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_2-2.png 581w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_2-2-450x333.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_2-2-300x222.png 300w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><\/a><\/p>\n<ul>\n<li>Stretched \u2013 the Stretched layout template arranges card elements so that they occupy an entire card area<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_3-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6542\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_3-2.png\" alt=\"\" width=\"273\" height=\"204\" \/><\/a><\/p>\n<ul>\n<li>Centered \u2013 the Centered layout template is used to center card elements so that they occupy a specified width\/height<\/li>\n<\/ul>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_4-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6541\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_4-2.png\" alt=\"\" width=\"305\" height=\"243\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_4-2.png 305w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_4-2-300x239.png 300w\" sizes=\"auto, (max-width: 305px) 100vw, 305px\" \/><\/a><\/p>\n<ul>\n<li>Compact \u2013 the Compact layout template is used to arrange card elements so that they occupy the minimum area<\/li>\n<\/ul>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_5-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6540\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_5-2.png\" alt=\"\" width=\"159\" height=\"150\" \/><\/a><\/p>\n<ul>\n<li>Lightweight \u2013 the Lightweight layout template displays the minimum set of elements within a card<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_6-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6539\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_6-2.png\" alt=\"\" width=\"134\" height=\"97\" \/><\/a><\/p>\n<p>For all layout types, you can change the visibility of its elements, or you can specify the display value type for data-bound elements:<\/p>\n<p><a href=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_7-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6538\" src=\"http:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_7-2.png\" alt=\"\" width=\"581\" height=\"430\" srcset=\"https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_7-2.png 581w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_7-2-450x333.png 450w, https:\/\/bitimpulse.com\/wp-content\/uploads\/2024\/08\/9_13_3_7-2-300x222.png 300w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><\/a><\/p>\n<p>On the \u201cLayout Options\u201d tab, select the required layout type in the \u201cSelect template\u201d list and specify its settings:<\/p>\n<ul>\n<li>Min width &#8211; specifies the minimum width of the card content;<\/li>\n<li>Max width &#8211; specifies the maximum width of the card Use the \u201cAuto\u201d option to determine the maximum width automatically;<\/li>\n<\/ul>\n<p>You can show\/hide the following values and visual elements within the card:<\/p>\n<ul>\n<li>Actual Value \u2013 a summary value for a measure placed in the \u201cActual\u201d placeholder;<\/li>\n<li>Title \u2013 displays values of the last (bottommost) dimension placed in the \u201cSeries\u201d section;<\/li>\n<li>Subtitle \u2013 displays combined values of all dimensions except the last (bottommost) dimension;<\/li>\n<li>Percent Variation \u2013 a percent difference between the actual and target value;<\/li>\n<li>Absolute Variation \u2013 an absolute difference between the actual and target value;<\/li>\n<li>Delta Indicator \u2013 indicates whether the actual value is less or greater than the target value;<\/li>\n<li>Sparkline \u2013 visualizes the variation of actual or target<\/li>\n<\/ul>\n<p><\/p>","protected":false},"featured_media":0,"parent":6482,"menu_order":496,"template":"","manuals":[18],"class_list":["post-6522","manual","type-manual","status-publish","hentry","manuals-bat-desktop"],"_links":{"self":[{"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/manual\/6522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/manual"}],"about":[{"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/types\/manual"}],"up":[{"embeddable":true,"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/manual\/6482"}],"wp:attachment":[{"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/media?parent=6522"}],"wp:term":[{"taxonomy":"manuals","embeddable":true,"href":"https:\/\/bitimpulse.com\/en\/wp-json\/wp\/v2\/manuals?post=6522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}