Adding Alert Boxes

Types of alerts and their html code

1. Important information

   Important information

   [text here]

   NLSinfo-adding-alerts

   <div class="usa-alert usa-alert--info">
      <div class="usa-alert__body">
         <h2 class="usa-alert__heading">
            Important information
         </h2>
         <p>
            [text here]
         </p>
      </div>
   </div> 

   Important information example

2. Created variables

   Created variables

   [text here]

   <div class="usa-alert usa-alert--vars">
      <div class="usa-alert__body">
         <h2 class="usa-alert__heading">
            Created variables
         </h2>
         <p>
            [text here]
         </p>
      </div>
   </div>

   Created variables example

3. Slim version without a heading / title

   [text here]

   <div class="usa-alert usa-alert--info usa-alert--slim">
      <div class="usa-alert__body">
         <p>
            [text here]
         </p>
      </div>
   </div>

   Slim alert example

How to add an alert box

1. Copy the HTML code for the alert box you want to use.
2. Navigate to the page where you'd like to add the alert and click Edit.
3. (Optional, but recommended) Add temporary placeholder text, such as [HERE], where you want the alert box to appear in your page's body copy.
4. Open the HTML/code view by clicking Source in the editor toolbar.
5. If you added placeholder text, use your browser's Find function (Ctrl+F) to locate [HERE] in the source code.
6. Replace the placeholder text with the alert box HTML code. If you did not use a placeholder, paste the HTML code directly in the appropriate location.
7. Click Source again to return to the normal editor view.
8. Update the alert message.
9. Save your changes, and review to confirm the alert box appears as expected.

Adding alerts video (28 MB) (No audio)

Do's and Don'ts

• Don't add a heading to the slim alert, use the "Important information" version.
• Don't remove "Important information" from the heading, but do add more context if necessary. 
  • Example: Important information: How to download a tagset
• Don't remove or change the "Created variables" heading. Do add context to the list of Question names / Variable titles within this type of alert.
• Do change the heading level to fit within your page structure.
  • For instance, the first two alert styles (above) have <h2> tags for heading level 2. If the alert would fall lower in an outline structure, change the <h2>...</h2> tags to <h3>...</h3> and so on. 
    • Headings for page content can use levels 2-6 with level 1 <h1> being reserved for the page title.
  • Note: Make the heading tag change in the code view by clicking Source. Do not change the heading level by using the drop-down menu in the editor tools because it will strip out some of the style code used to format the alert.
    • If you're not sure what level to use, keep <h2>...</h2>.