{"id":3351,"date":"2023-06-12T12:00:51","date_gmt":"2023-06-12T16:00:51","guid":{"rendered":"http:\/\/www.lios.ca\/?p=3351"},"modified":"2023-07-04T13:45:08","modified_gmt":"2023-07-04T17:45:08","slug":"using-content-boxes-in-madcap-flare-creating-content-boxes","status":"publish","type":"post","link":"https:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/","title":{"rendered":"Using content boxes in MadCap Flare: Creating content boxes"},"content":{"rendered":"<p>When you&#8217;re writing documentation, you may want to highlight certain pieces of information with <b>content boxes<\/b>.\u00a0 In Part One of this two-part article series, we\u2019ll show you how to design content boxes with HTML\/CSS in MadCap Flare.<\/p>\n<p>Depending on the project, you may have several types of content boxes that contain different kinds of information. Here are some examples:<\/p>\n<figure id=\"attachment_3352\" aria-describedby=\"caption-attachment-3352\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3352\" src=\"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2.png\" alt=\" A screenshot of five rectangular content boxes. From top to bottom, they are:Danger, with a red background and bold white text. It reads, \u201cIndicates a hazardous situation that, if not avoided, will result in serious injury or death.\u201d Warning, with an orange outline. It reads, \u201cIndicates a hazardous situation that, if not avoided, could result in serious injury or death.\u201d Caution, with a yellow outline. It reads, \u201cIndicates a hazardous situation that, if not avoided, could result in minor or moderate injury. Notice, with a blue outline. It reads, \u201cIndicates information that should be read to avoid equipment damage.\u201d Tip, with a thin green outline. It reads, \u201cIndicates complementary information, tips, or advice.\u201d All the boxes other than Danger use normal black text. The Danger, Warning, and Caution boxes use a triangular icon containing an exclamation mark. The Tip box uses a thumbtack icon.\" width=\"600\" height=\"337\" srcset=\"https:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2.png 662w, https:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2-320x180.png 320w, https:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2-168x94.png 168w, https:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2-580x326.png 580w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-3352\" class=\"wp-caption-text\">Examples of five content boxes.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_3354\" aria-describedby=\"caption-attachment-3354\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3354\" src=\"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-1-320x88.png\" alt=\"A Danger box. The container, icon, title, and text are outlined in green and labelled.\" width=\"600\" height=\"164\" srcset=\"https:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-1-320x88.png 320w, https:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-1-168x46.png 168w, https:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-1-580x159.png 580w, https:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-1.png 653w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-3354\" class=\"wp-caption-text\">A diagram showing the parts of a content box.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>In this example, content boxes have up to four parts:<\/p>\n<ul>\n<li aria-level=\"1\"><b>Container<\/b>: The \u201cbox\u201d of the content box.<\/li>\n<li aria-level=\"1\"><b>Icon<\/b>: An image in the upper left corner that signals what kind of information the box contains. Some content boxes do not use an icon.<\/li>\n<li aria-level=\"1\"><b>Title<\/b>: A word signaling what type of information is in the box. Common titles include <b>Notice<\/b> and <b>Danger<\/b>. Some content boxes do not use a title.<\/li>\n<li aria-level=\"1\"><b>Content<\/b>: The content in the box. This is usually regular text, but can also include lists and images.<\/li>\n<\/ul>\n<p>All boxes have a container and content. A box may have an icon, a title, or both.<\/p>\n<h2><b>Understanding the coding of content boxes<\/b><\/h2>\n<p>To create a content box, you need the following styles:<\/p>\n<ul>\n<li aria-level=\"1\">div.ContentBox: The container<\/li>\n<li aria-level=\"1\">p.ContentBoxTitle: The icon and\/or title<\/li>\n<li aria-level=\"1\">p.ContentBox: The content<\/li>\n<\/ul>\n<p>Replace \u201cContentBox\u201d with the name of the box (Danger, Warning, Note, etc.) to get the name of the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Selectors\" target=\"_blank\" rel=\"noopener\">selector<\/a>.<\/p>\n<pre>&lt;div class=\"Danger\"&gt; \r\n\u00a0    &lt;p class=\"DangerTitle\"&gt;&amp;#160;&lt;\/p&gt; \r\n\u00a0    &lt;p class=\"Danger\"&gt;\r\n\u00a0\u00a0       Indicates a hazardous situation that, if not avoided, \r\n         will result in serious injury or death.\r\n\u00a0    &lt;\/p&gt; \r\n&lt;\/div&gt;<\/pre>\n<h3>div.ContentBox<\/h3>\n<p>This selector controls the following properties for the container:<\/p>\n<ul>\n<li aria-level=\"1\">minimum height<\/li>\n<li aria-level=\"1\">background colour<\/li>\n<li aria-level=\"1\">border colour<\/li>\n<li aria-level=\"1\">border radius<\/li>\n<li aria-level=\"1\">padding (blank space between the box\u2019s borders and its content)<\/li>\n<li aria-level=\"1\">margin (blank space outside the box)<\/li>\n<\/ul>\n<p>It can also control properties related to its content, including:<\/p>\n<ul>\n<li aria-level=\"1\">text colour<\/li>\n<li aria-level=\"1\">text alignment<\/li>\n<\/ul>\n<pre>div.Danger {\r\n    \u00a0display: block;\r\n    \u00a0text-align: left;\r\n    \u00a0margin: 16px 0px;\r\n\u00a0    padding: 12px 16px;\r\n    \u00a0min-height: 32px;\r\n     background-color: #D70000;\r\n\u00a0    color: #FFFFFF; \r\n}\r\n<\/pre>\n<p>The other parts of the content box are wrapped in the div.<\/p>\n<h3>p.ContentBoxTitle<\/h3>\n<p>This selector controls the top and bottom margins, as well as the top and bottom padding for the title. Using pseudo-elements, this selector also controls the icon and title text.<\/p>\n<pre>p.DangerTitle { \t\r\n     margin-left: -1px; \t\r\n     margin-top: 0 !important; \t\r\n     margin-bottom: 0;\t\r\n     color: #FFFFFF; \r\n}\r\n<\/pre>\n<p>Its main purpose, however, is to call the icon and\/or title using pseudo-elements.<\/p>\n<p style=\"-moz-border-radius: 6px; -webkit-border-radius: 6px; background-color: #e6eecf; border: solid 1px #8ca83d; border-radius: 6px; overflow: hidden; padding: 15px 30px; text-indent: 0px; margin-top: 15px;\"><strong>Tip:<\/strong> You can set the font size in p.ContentBoxTitle, or you can set different font sizes in its pseudo-elements.<\/p>\n<h4>Font Awesome icons<\/h4>\n<p><a href=\"https:\/\/fontawesome.com\/v6\/download\">Font Awesome<\/a> makes free icons that you can use for your content boxes. To use the icons, download the <b>Free For Desktop<\/b> package for the newest version. When you install the font, click <b>Install for all users<\/b> to ensure that the icons display correctly in PDF outputs. Font Awesome icons are better than images for content boxes because they can be scaled with no loss of quality.<\/p>\n<p>Use the site\u2019s search bar to find icons. Once you\u2019ve chosen an icon, click it and copy the Unicode value from the top right corner of the popup.<\/p>\n<p style=\"-moz-border-radius: 6px; -webkit-border-radius: 6px; background-color: #e6eecf; border: solid 1px #8ca83d; border-radius: 6px; overflow: hidden; padding: 15px 30px; text-indent: 0px; margin-top: 15px;\"><strong>Tip:<\/strong> Not all icons are available in the free version. Click the <b>Free<\/b> filter below the search bar to only see free icons.<\/p>\n<h4>::before and ::after pseudo-elements<\/h4>\n<p>Using the ::before and ::after pseudo-elements, you can make certain elements appear before and after a certain style. For content boxes in Flare, they contain the icon and\/or title. Using the <b>content<\/b> property, you can modify the selected icon or title.<\/p>\n<pre>p.DangerTitle::before { \r\n     content: \"\\f071\";\t\r\n     font-size: 14px; \t\r\n     font-family: 'Font Awesome 6 Free Solid';\t\r\n     line-height: 20px; \t\r\n     border: none; \r\n}\r\n\r\np.DangerTitle::after { \r\n     content: \"DANGER\";\t\r\n     font-family: 'Barlow Semibold'; \t\r\n     font-size: 13px; \t\r\n     font-weight: 700; \t\r\n     line-height: 18px; \t\r\n     padding-left: 12px; \r\n}\r\n<\/pre>\n<p>In the ::before pseudo-selector above, the <b>content<\/b> property contains a backslash and the Unicode value of the Font Awesome icon you\u2019re using. The ::after pseudo-selector contains the title text.<\/p>\n<p>When using p.ContentBoxTitle, put a non-breaking space (&amp;#160;) between the tags. We only use this selector to call the icon and\/or title &#8211; no actual text goes in the tags. Whatever is in the ::before and ::after pseudo-selectors will appear.<\/p>\n<pre>&lt;div class=\"Danger\"&gt;\r\n     &lt;p class=\"DangerTitle\"&gt;&amp;#160;&lt;\/p&gt;\r\n     &lt;p class=\"Danger\"&gt;content&lt;\/p&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Depending on what parts the content box has, put them in the pseudo-elements as follows:<\/p>\n<table style=\"height: 115px;\" border=\"1px solid\" width=\"100%;\">\n<tbody>\n<tr>\n<td><b>\u00a0\u00a0 Parts<br \/>\n<\/b><\/td>\n<td><b>\u00a0\u00a0 Where the icon goes<br \/>\n<\/b><\/td>\n<td><b>\u00a0\u00a0 Where the title goes<br \/>\n<\/b><\/td>\n<\/tr>\n<tr>\n<td>\u00a0\u00a0 Icon <b>and<\/b> title<\/td>\n<td>\u00a0\u00a0 ::before<\/td>\n<td>\u00a0\u00a0 ::after<\/td>\n<\/tr>\n<tr>\n<td>\u00a0\u00a0 Icon <b>only<br \/>\n<\/b><\/td>\n<td>\u00a0\u00a0 ::before<\/td>\n<td>\u00a0\u00a0 n\/a<\/td>\n<\/tr>\n<tr>\n<td>\u00a0\u00a0 Title <b>only<br \/>\n<\/b><\/td>\n<td>\u00a0\u00a0 n\/a<\/td>\n<td>\u00a0\u00a0 ::before<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>p.ContentBox<\/h3>\n<p>This selector controls the text spacing, including indentation (left padding).<\/p>\n<p>When a content box has no title, you can use negative top padding so that the content is next to the icon, rather than below it. This means that the line height of the icon will overlap with the content.<\/p>\n<figure id=\"attachment_3365\" aria-describedby=\"caption-attachment-3365\" style=\"width: 599px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3365 size-full\" src=\"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/contentboxgif2-600px.gif\" alt=\"A GIF showing the Inspect feature in a browser being used on a Tip box. By hovering over the different lines of code for the container, title, and text, the corresponding parts of the content box are highlighted, showing that the line height of the Tip icon overlaps with the text.\" width=\"599\" height=\"274\" \/><figcaption id=\"caption-attachment-3365\" class=\"wp-caption-text\">The line height of the Tip icon overlaps with the first line of text.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>In this example, <b>p.Tip<\/b> has negative top padding, so you can\u2019t use p.Tip for subsequent paragraphs in div.Tip. You can create another paragraph selector, <b>p.Tip2<\/b>, that has the same left padding but no top padding, so it will work for subsequent paragraphs in the same content box.<\/p>\n<figure id=\"attachment_3367\" aria-describedby=\"caption-attachment-3367\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3367 size-full\" src=\"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/contentboxgif2-600px-1.gif\" alt=\"A GIF showing the Inspect feature in a browser being used on the second paragraph in a Tip box.\" width=\"600\" height=\"360\" \/><figcaption id=\"caption-attachment-3367\" class=\"wp-caption-text\">Using p.Tip2 keeps the second paragraph from overlapping with the previous text.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>That\u2019s it for Part One! In Part Two, we\u2019ll share some tips and tricks for using content boxes in Flare.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you&#8217;re writing documentation, you may want to highlight certain pieces of information with content boxes.\u00a0 In Part One of this two-part article series, we\u2019ll show you how to design content boxes with HTML\/CSS in MadCap Flare. Depending on the project, you may have several types of content boxes that contain different kinds of information. [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[37,41],"tags":[],"class_list":["post-3351","post","type-post","status-publish","format-standard","hentry","category-information-architecture","category-madcap-flare"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Using content boxes in MadCap Flare: Creating content boxes - Lios<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using content boxes in MadCap Flare: Creating content boxes - Lios\" \/>\n<meta property=\"og:description\" content=\"When you&#8217;re writing documentation, you may want to highlight certain pieces of information with content boxes.\u00a0 In Part One of this two-part article series, we\u2019ll show you how to design content boxes with HTML\/CSS in MadCap Flare. Depending on the project, you may have several types of content boxes that contain different kinds of information. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/\" \/>\n<meta property=\"og:site_name\" content=\"Lios\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-12T16:00:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-04T17:45:08+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2.png\" \/>\n<meta name=\"author\" content=\"Charlotte\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Charlotte\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/\"},\"author\":{\"name\":\"Charlotte\",\"@id\":\"http:\\\/\\\/www.lios.ca\\\/#\\\/schema\\\/person\\\/1f9d81898e17fd26c77dfb35137a8d05\"},\"headline\":\"Using content boxes in MadCap Flare: Creating content boxes\",\"datePublished\":\"2023-06-12T16:00:51+00:00\",\"dateModified\":\"2023-07-04T17:45:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/\"},\"wordCount\":831,\"image\":{\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/content-boxes-2.png\",\"articleSection\":[\"Information architecture\",\"MadCap Flare\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/\",\"url\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/\",\"name\":\"Using content boxes in MadCap Flare: Creating content boxes - Lios\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.lios.ca\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/content-boxes-2.png\",\"datePublished\":\"2023-06-12T16:00:51+00:00\",\"dateModified\":\"2023-07-04T17:45:08+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.lios.ca\\\/#\\\/schema\\\/person\\\/1f9d81898e17fd26c77dfb35137a8d05\"},\"breadcrumb\":{\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/content-boxes-2.png\",\"contentUrl\":\"http:\\\/\\\/www.lios.ca\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/content-boxes-2.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/www.lios.ca\\\/en\\\/blogue\\\/using-content-boxes-in-madcap-flare-creating-content-boxes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.lios.ca\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using content boxes in MadCap Flare: Creating content boxes\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.lios.ca\\\/#website\",\"url\":\"http:\\\/\\\/www.lios.ca\\\/\",\"name\":\"Lios\",\"description\":\"L&#039;information \u00e0 l&#039;oeuvre\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.lios.ca\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.lios.ca\\\/#\\\/schema\\\/person\\\/1f9d81898e17fd26c77dfb35137a8d05\",\"name\":\"Charlotte\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8294bc90659023944ee10719296b1baf0852f983b7a0e810b97f91f6405c0af5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8294bc90659023944ee10719296b1baf0852f983b7a0e810b97f91f6405c0af5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8294bc90659023944ee10719296b1baf0852f983b7a0e810b97f91f6405c0af5?s=96&d=mm&r=g\",\"caption\":\"Charlotte\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using content boxes in MadCap Flare: Creating content boxes - Lios","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":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/","og_locale":"en_US","og_type":"article","og_title":"Using content boxes in MadCap Flare: Creating content boxes - Lios","og_description":"When you&#8217;re writing documentation, you may want to highlight certain pieces of information with content boxes.\u00a0 In Part One of this two-part article series, we\u2019ll show you how to design content boxes with HTML\/CSS in MadCap Flare. Depending on the project, you may have several types of content boxes that contain different kinds of information. [&hellip;]","og_url":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/","og_site_name":"Lios","article_published_time":"2023-06-12T16:00:51+00:00","article_modified_time":"2023-07-04T17:45:08+00:00","og_image":[{"url":"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2.png","type":"","width":"","height":""}],"author":"Charlotte","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Charlotte","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/#article","isPartOf":{"@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/"},"author":{"name":"Charlotte","@id":"http:\/\/www.lios.ca\/#\/schema\/person\/1f9d81898e17fd26c77dfb35137a8d05"},"headline":"Using content boxes in MadCap Flare: Creating content boxes","datePublished":"2023-06-12T16:00:51+00:00","dateModified":"2023-07-04T17:45:08+00:00","mainEntityOfPage":{"@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/"},"wordCount":831,"image":{"@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/#primaryimage"},"thumbnailUrl":"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2.png","articleSection":["Information architecture","MadCap Flare"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/","url":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/","name":"Using content boxes in MadCap Flare: Creating content boxes - Lios","isPartOf":{"@id":"http:\/\/www.lios.ca\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/#primaryimage"},"image":{"@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/#primaryimage"},"thumbnailUrl":"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2.png","datePublished":"2023-06-12T16:00:51+00:00","dateModified":"2023-07-04T17:45:08+00:00","author":{"@id":"http:\/\/www.lios.ca\/#\/schema\/person\/1f9d81898e17fd26c77dfb35137a8d05"},"breadcrumb":{"@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/#primaryimage","url":"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2.png","contentUrl":"http:\/\/www.lios.ca\/wp-content\/uploads\/2023\/06\/content-boxes-2.png"},{"@type":"BreadcrumbList","@id":"http:\/\/www.lios.ca\/en\/blogue\/using-content-boxes-in-madcap-flare-creating-content-boxes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.lios.ca\/en\/"},{"@type":"ListItem","position":2,"name":"Using content boxes in MadCap Flare: Creating content boxes"}]},{"@type":"WebSite","@id":"http:\/\/www.lios.ca\/#website","url":"http:\/\/www.lios.ca\/","name":"Lios","description":"L&#039;information \u00e0 l&#039;oeuvre","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.lios.ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/www.lios.ca\/#\/schema\/person\/1f9d81898e17fd26c77dfb35137a8d05","name":"Charlotte","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8294bc90659023944ee10719296b1baf0852f983b7a0e810b97f91f6405c0af5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8294bc90659023944ee10719296b1baf0852f983b7a0e810b97f91f6405c0af5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8294bc90659023944ee10719296b1baf0852f983b7a0e810b97f91f6405c0af5?s=96&d=mm&r=g","caption":"Charlotte"}}]}},"_links":{"self":[{"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts\/3351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/comments?post=3351"}],"version-history":[{"count":20,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts\/3351\/revisions"}],"predecessor-version":[{"id":3451,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/posts\/3351\/revisions\/3451"}],"wp:attachment":[{"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/media?parent=3351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/categories?post=3351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lios.ca\/en\/wp-json\/wp\/v2\/tags?post=3351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}