The textbox is a callout meant to highlight important information on a page. It is offset from standard body text and used to differentiate special information.
Considerations
- Do: Use a textbox to draw attention to key information, new terms, etc.
- Do: Use a heading inside the text box to indicate the purpose of the text box.
- Do: Limit the amount of text you put in a callout—the shorter it is, the more likely it will be read.
- Do: Use a callout box as a clear call to action in the form of a link or task.
- Don't: Use a callout box for decoration purposes.
- Don't: Change fonts or reduce sizes in order to fit more words inside the textbox.
- Don't: Use text colors that are light because they have low contrast.
- Don't: Use a separate callout for each paragraph of text on the page.
Text Box with Background Fill
Explore
Preview
Image
Apply
Code
<div class="uacm-text-box uacm-bg-cool-gray">
<p>#ToDo: Use this Text Box to highlight important
concepts, ideas, or next steps. Learn more about the <a href="https://coursemaker.arizona.edu/build/building-blocks/text-box" target="_blank">Text Box</a> building block in the
Course Maker website. Remove if not needed.
</p>
</div>
Text Box with Border
Explore
Preview
Image
Apply
Code
<div class="uacm-text-box uacm-border-silver">
<p>#ToDo: Use this Text Box to highlight important
concepts, ideas, or next steps. Learn more about the
<a href="https://coursemaker.arizona.edu/build/building-blocks/text-box"
target="_blank">Text Box</a> building block in the Course Maker website. Remove if not needed.
</p>
</div>
Textbooks & Materials
Explore
Preview
Image
Apply
Instructions
- Insert the code using Insert Stuff > Enter Embed Code.
Considerations
- Do: Choose only one of the labels: Required or Optional
<div class="uacm-text-box uacm-border-silver">
<h2>#ToDo: Add Book/Material Title</h2>
<p><span class="uacm-label required">Required</span><span
class="uacm-label optional">Optional</span></p>
<p class="uacm-margin-bottom-0">
<strong>Author: </strong>Name of author</p>
<p class="uacm-margin-top-0 uacm-margin-bottom-0">
<strong>Edition: </strong>number</p>
<p class="uacm-margin-top-0 uacm-margin-bottom-0">
<strong>Published Date: </strong>MM/DD/YYYY</p>
<p class="uacm-margin-top-0 uacm-margin-bottom-0"><strong>ISBN:
</strong>Number</p>
<p class="uacm-margin-top-0 uacm-margin-bottom-0">
<strong>Publisher: </strong>Name</p>
<p class="uacm-margin-top-0 uacm-margin-bottom-0">
<strong>Description/Notes: </strong>Add any notes or
description here.</p>
</div>
<p>#ToDo: Need to add more textbooks? Grab the code from the
<a href="https://coursemaker.arizona.edu/build/building-blocks/text-box"
target="_blank">Textbook & Materials Building Block</a>.
Then, insert the code using <strong>Insert Stuff > Enter Embed
Code</strong> while the cursor is placed after this arrow
→</p>