Articles

  1. Lios
  2. Using content boxes in MadCap Flare: Creating content boxes
12/062023

Using content boxes in MadCap Flare: Creating content boxes

When you’re writing documentation, you may want to highlight certain pieces of information with content boxes.  In Part One of this two-part article series, we’ll 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. Here are some examples:

A screenshot of five rectangular content boxes. From top to bottom, they are:Danger, with a red background and bold white text. It reads, “Indicates a hazardous situation that, if not avoided, will result in serious injury or death.” Warning, with an orange outline. It reads, “Indicates a hazardous situation that, if not avoided, could result in serious injury or death.” Caution, with a yellow outline. It reads, “Indicates a hazardous situation that, if not avoided, could result in minor or moderate injury. Notice, with a blue outline. It reads, “Indicates information that should be read to avoid equipment damage.” Tip, with a thin green outline. It reads, “Indicates complementary information, tips, or advice.” 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.
Examples of five content boxes.

 

A Danger box. The container, icon, title, and text are outlined in green and labelled.
A diagram showing the parts of a content box.

 

In this example, content boxes have up to four parts:

  • Container: The “box” of the content box.
  • Icon: An image in the upper left corner that signals what kind of information the box contains. Some content boxes do not use an icon.
  • Title: A word signaling what type of information is in the box. Common titles include Notice and Danger. Some content boxes do not use a title.
  • Content: The content in the box. This is usually regular text, but can also include lists and images.

All boxes have a container and content. A box may have an icon, a title, or both.

Understanding the coding of content boxes

To create a content box, you need the following styles:

  • div.ContentBox: The container
  • p.ContentBoxTitle: The icon and/or title
  • p.ContentBox: The content

Replace “ContentBox” with the name of the box (Danger, Warning, Note, etc.) to get the name of the selector.

<div class="Danger"> 
     <p class="DangerTitle">&#160;</p> 
     <p class="Danger">
         Indicates a hazardous situation that, if not avoided, 
         will result in serious injury or death.
     </p> 
</div>

div.ContentBox

This selector controls the following properties for the container:

  • minimum height
  • background colour
  • border colour
  • border radius
  • padding (blank space between the box’s borders and its content)
  • margin (blank space outside the box)

It can also control properties related to its content, including:

  • text colour
  • text alignment
div.Danger {
     display: block;
     text-align: left;
     margin: 16px 0px;
     padding: 12px 16px;
     min-height: 32px;
     background-color: #D70000;
     color: #FFFFFF; 
}

The other parts of the content box are wrapped in the div.

p.ContentBoxTitle

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.DangerTitle { 	
     margin-left: -1px; 	
     margin-top: 0 !important; 	
     margin-bottom: 0;	
     color: #FFFFFF; 
}

Its main purpose, however, is to call the icon and/or title using pseudo-elements.

Tip: You can set the font size in p.ContentBoxTitle, or you can set different font sizes in its pseudo-elements.

Font Awesome icons

Font Awesome makes free icons that you can use for your content boxes. To use the icons, download the Free For Desktop package for the newest version. When you install the font, click Install for all users 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.

Use the site’s search bar to find icons. Once you’ve chosen an icon, click it and copy the Unicode value from the top right corner of the popup.

Tip: Not all icons are available in the free version. Click the Free filter below the search bar to only see free icons.

::before and ::after pseudo-elements

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 content property, you can modify the selected icon or title.

p.DangerTitle::before { 
     content: "\f071";	
     font-size: 14px; 	
     font-family: 'Font Awesome 6 Free Solid';	
     line-height: 20px; 	
     border: none; 
}

p.DangerTitle::after { 
     content: "DANGER";	
     font-family: 'Barlow Semibold'; 	
     font-size: 13px; 	
     font-weight: 700; 	
     line-height: 18px; 	
     padding-left: 12px; 
}

In the ::before pseudo-selector above, the content property contains a backslash and the Unicode value of the Font Awesome icon you’re using. The ::after pseudo-selector contains the title text.

When using p.ContentBoxTitle, put a non-breaking space (&#160;) between the tags. We only use this selector to call the icon and/or title – no actual text goes in the tags. Whatever is in the ::before and ::after pseudo-selectors will appear.

<div class="Danger">
     <p class="DangerTitle">&#160;</p>
     <p class="Danger">content</p>
</div>

Depending on what parts the content box has, put them in the pseudo-elements as follows:

   Parts
    Where the icon goes
    Where the title goes
   Icon and title    ::before    ::after
   Icon only
    ::before    n/a
   Title only
    n/a    ::before

p.ContentBox

This selector controls the text spacing, including indentation (left padding).

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.

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.
The line height of the Tip icon overlaps with the first line of text.

 

In this example, p.Tip has negative top padding, so you can’t use p.Tip for subsequent paragraphs in div.Tip. You can create another paragraph selector, p.Tip2, that has the same left padding but no top padding, so it will work for subsequent paragraphs in the same content box.

A GIF showing the Inspect feature in a browser being used on the second paragraph in a Tip box.
Using p.Tip2 keeps the second paragraph from overlapping with the previous text.

 

That’s it for Part One! In Part Two, we’ll share some tips and tricks for using content boxes in Flare.