Callouts & Textboxes

The NIDA Website has three methods of calling out blocks of text, or making certain sections stand apart from the main text:

  • Callout Boxes
  • Textboxes
  • Highlights

All three of these callout methods have helper classes that can modify their color and/or alignment on the page.

Callout Boxes

Callout Boxes can be used to highlight quotes or passages or to alert the user to especially useful information.

A default callout box has a white background and extends to 100% the width of its container. Sample markup for standard callout box:


<div class="callout">
  This is some text in the default callout box style. 
  Text is bold, and the box has a white background.
</div>

This code will render like:

This is some text in the default callout box style. Text is bold, and the box has a white background.

Optional Colors

To change the background color of a callout box, add an optional color class after the 'callout' class on the containing <div> element.

Available color classes are:

  • default (white background, purple border)
  • purple
  • purple reverse
  • teal
  • teal reverse

For example, to create a teal callout box, you would use this code:


<div class="callout purple">
  This is some text in the purple callout box style.
  Text is bold and purple, and the box has a white background.
</div>

This code will render like:

This is some text in the 'purple callout' box style. Text is bold and purple, and the box has a white background.
This is some text in the 'purple reverse callout' box style. Text is bold and purple, and the box has a purple background.
This is some text in the 'teal callout' box style. Text is bold and teal, and the box has a white background.
This is some text in the 'teal reverse callout' box style. Text is bold and white, and the box has a teal background.

Alignment

To change the alignment of a callout box, add an optional alignment class after the 'callout' class on the containing <div> element.

Available alignment classes are:

  • left
  • right

For example, to create a right-aligned, red callout box, you would use this code:


<div class="callout right">
  This is some text in the right-aligned, purple callout box style.
  Text is bold and purple, the box has a white background, and it is aligned to the right.
</div>
<p>
  This is some body text, which will wrap around the aligned callout box. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Lorem ipsum dolor sit amet.
</p>

This code will render like:

This is some text in the right-aligned, purple callout box style. Text is bold and purple, the box has a white background, and it is aligned to the right.

This is some body text, which will wrap around the aligned callout box. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet.

Textboxes

Textboxes can be used to visually separate insets or sub-sections of text from the main content.

A default textbox has a white background and extends to 100% the width of its container. Unlike callout boxes, the text is not bold and you will use standard markup (headings, paragraphs, links, and lists) on content inside the textbox. Sample markup for standard textbox:


<div class="textbox">
  <h2>Heading in Textbox</h2>
  <p>This is some text in the default textbox style. 
  Text is standard size and weight, and the box has a white background.</p>
</div>

This code will render like:

Heading in Textbox

This is some text in the default textbox style. Text is standard size and weight, and the box has a white background.

Optional Colors

To change the background color of a textbox, add an optional color class after the 'textbox' class on the containing <div> element.

Available color classes are:

  • purple
  • purple reverse
  • teal
  • teal reverse

For example, to create a purple textbox, you would use this code:


<div class="textbox purple">
  <h2>Heading in Text Box</h2>
  <p>This is some text in the purple textbox style. 
  Text is standard size and weight, and the box has a grey background.</p>
</div>

This code will render like:

Heading in Textbox

This is some text in the purple textbox style. Text is standard size and weight, and the box has a grey background.

Heading in Textbox

This is some text in the 'purple reverse textbox' style. Text is white in standard size and weight, and the box has a purple background.

Heading in Textbox

This is some text in the 'teal textbox' style. Text is standard size and weight, and the box has a grey background.

Heading in Textbox

This is some text in the 'teal reverse textbox' style. Text is white in standard size and weight, and the box has a teal background.

Alignment

To change the alignment of a textbox, add an optional alignment class after the 'textbox' class on the containing <div> element.

Available alignment classes are:

  • left
  • right

For example, to create a left-aligned textbox, you would use this code:


<div class="textbox right">
  <h2>Heading in Textbox</h2>
  <p>This is some text in the right-aligned, default textbox style. 
  Text is standard size and weight, and the box has a white background.</p>
</div>
<p>
  This is some body text, which will wrap around the aligned textbox. 
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Lorem ipsum dolor sit amet.
</p>

This code will render like:

Heading in Textbox

This is some text in the right-aligned, default textbox style. Text is standard size and weight, and the box has a white background.

This is some body text, which will wrap around the aligned textbox. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet.

 

Highlights

Highlights are meant to visually offset content that is related, but NOT directly part of the content at hand.


<div class="highlight highlight--bold">
  <h2>Heading in Highlight</h2>
  <p class="font-secondary" >This is some text in the right-aligned, default textbox style. 
  Text is standard size and weight, and the box has a white background. <a href="/" >This is a sample of a link</a>. This is some text in the right-aligned, default textbox style. 
  Text is standard size and weight, and the box has a white background.</p>
</div>

Heading in Highlight

This is some text in the right-aligned, default textbox style. Text is standard size and weight, and the box has a white background. This is a sample of a link. This is some text in the right-aligned, default textbox style. Text is standard size and weight, and the box has a white background.